티스토리

wonah's devlog

검색하기

블로그 홈

wonah's devlog

wonah99.tistory.com/m

wonah 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[Canvas API]캔버스(Canvas)를 이용한 도형 그리기 이제 어떻게 캔버스에 그릴 수 있는지에 대해 알아보자. 캔버스 위에 물체를 그릴 때에는 path를 사용하는 것이 필수적이므로 이것이 어떻게 사용되는 지 볼 것이다. 📒 캔버스(Canvas)를 이용한 도형 그리기 📍 그리드 드로잉을 시작하기 앞서, 캔버스 그리드 혹은 좌표공간(coordinate space)에 대하여 이야기 해보겠다. 이전 페이제에서 이야기했던 HTML 골격(skeleton)은 가로 세로 각 150 픽셀의 캔버스 요소를 가지고 있다. 기본적으로 그리드의 1단위는 캔버스의 1픽셀과 같다. 이 그리드의 원점은 좌측상단의 (0, 0)이다. 모든 요소들은 이 원점을 기준으로 위치된다. 그렇기 때문에 왼쪽에서 x 픽셀, y 픽셀 떨어진 것이라 볼 수 있고, 이 사각형의 좌표는 (x, y)가 된다. .. 공감수 0 댓글수 0 2023. 10. 10.
Canvas API Canvas HTML의 태그와 JavaScript를 사용하면 다양한 그래픽 요소를 만들 수 있다. 단순한 도형을 그리는 것은 물론, 데이터 시각화, 애니메이션, 웹 게임 등을 사용하기에 따라 무궁무진한 콘텐츠를 만들어 낼 수 있다. 이제 기본적인 캔버스 사용법부터 알아보자면, 일단 캔버스 태그를 작성하는 것으로 시작된다. 캔버스는 canvas 엘리먼트를 DOM으로 조작하는 방식으로 작성된다. 따라서 엘리먼트를 선택할 때 사용할 id를 작성해주는 것이 좋다. 캔버스를 지원하지 않는 브라우저에서는 캔버스 대신 태그 사이 내용이 표시된다. 이제 자바스크립트를 사용해서 엘리먼트를 선택해주자! const canvas = document.querySelector("#canvas"); 우선 너비와 높이를 설정해주어야.. 공감수 0 댓글수 0 2023. 10. 10.
[ES6+] callback 콜백 "내가 전달한 함수를 나중에 다시 불러줘(호출해줘)" = Callback 콜백은 다른 함수에 인수로 전달되는 함수를 말함 함수가 다른 함수를 호출할 수 있고 또한 함수가 완료된 후 콜백 함수를 실행할 수도 있음 콜백이 자주 쓰이는 곳 = 하나의 함수가 다른 함수를 기다려야 하는 비동기 함수에서 쓰일 때 대표적인 비동기 함수 setTimeout() : 시간 이후 실행 function myMessage1(){ document.getElementById('demo1').innerHTML = 'I love you!!'; } setTimeout(myMessage1, 3000); // 인자값을 전달받는(즉, 매개변수가 존재하는) 함수인 경우..? function myMessage2(value){ documen.. 공감수 0 댓글수 0 2023. 9. 22.
동기와 비동기 동기(synchronous)와 비동기(asynchronous)의 개념 자바스크립트는 동기적으로 작동한다. 일반적으로 각 코드 블록이 이전 블록이 끝난 이후에 순차적으로 실행 💡비동기는 왜 필요할까? 어떤 명령을 실행할 때 그 명령이 언제 끝날지 예측하기 어렵거나 또는 주가 되는 작업이 아닐 때 사용 웹 브라우저와 서버가 통신할 때 언제 끝날 지 예측하기 힘들다. (인터넷이 느리거나, 서버가 느리거나) 통신이 끝날 때까지 아무것도 못하고 있는 것보다는 다른 일을 하고 있다가 통신이 끝났을 때 콜백이 호출되면서 작업을 나중에 하면 훨씬 효율적 (예시1) 네이버에서 네트워크 탭 열고 검색창에 ㅅ만 입력하고 통신한 것들 확인(비동기 통신, 새로고침 현상 안 일어남) (예시2) 네이버 지도 같은 경우 모든 데이터.. 공감수 0 댓글수 0 2023. 9. 22.
[ES6+] arrow function 화살표 함수 화살표(=>)를 사용해서 함수를 선언하는 방법 () => {}; 매개변수가 하나만 있으면 소괄호 생략 가능(매개변수가 없으면 생략 불가) 암시적 반환 리턴문 한 줄만 있을 경우 중괄호(함수 블록)이란 return 키워드 둘 다 생략 가능(return 키워드만 생략하면 안됨!) 객체를 소괄호로 감싸야한다! 화살표 함수는 익명함수 참조할 이름이 필요하다면 함수를 변수에 할당하면 됨 공감수 0 댓글수 0 2023. 9. 22.
[ES6+] var, let, const var, let, const의 차이 var 함수 스코프에 종속, 그 외엔 전역 블록 기준으로 스코프가 생기지 않기 때문에 블록 밖에서 접근 가능 예: for문(블록 스코프) 내에서 var로 선언하면 for문 밖에서도 사용 가능 let 블록 스코프에 종속, 그외엔 전역 변수가 선언된 블록과 그 하위 블록 내에서만 사용 가능 const 블록 스코프에 종속, 그외엔 전역 값이 변경될 수 없다.(값 재할당 불가) (예시) const에 객체가 담겼다면 const person = { name: 'wonah', age: 23 }; person.age = 24; 변수 전체를 재할당하는 것이 아니라 그 속성 중 하나에 대한 재할당은 가능하다. 객체 내용을 변경할 수 없게 const 객체를 고정할 수는 있다. Object.. 공감수 0 댓글수 0 2023. 9. 22.
HTML 요소 접근 JavaScript에서의 HTML 요소 접근 JavaScript에서 HTML의 요소를 제어하기 위해서 특정 Web API를 이용하여 요소를 선택해야한다. Document.querySelector() 선택된 선택자 또는 선택자 그룹과 일치하는 문서 내 첫 번째 Element를 반환한다. 일치하는 요소가 없으면 null을 반환한다. let a = document.querySelector('.txt'); console.log(a); txt라는 class를 가진 요소 중 첫 번째 요소를 반환한다. Document.querySelectorAll() 선택된 선택자 그룹에 일치하는 document의 element list를 나타내는 NodeList를 반환한다. let a = document.querySelectorA.. 공감수 0 댓글수 0 2023. 9. 22.
dataset : 문서 객체 사용자 정의 속성 dataset이란? 사용자가 해당 요소에 커스텀 속성을 추가한 객체 dataset 사용법 1. HTML 태그에 접두어(data-)가 붙은 속성을 추가하고, 거기에 사용하고자 하는 값을 지정해놓는다. 2. 자바스크립트에서 요소를 선택하고, dataset객체에서 커스텀 속성을 읽어들인다. 이때 접두어는 생략한다. dataset 속성의 값은 개수 제한이 특별히 없다. 자바스크립트에서의 data-* 값 가져오기 📍 getAttribute() - data-* 속성도 결국엔 태그 속성이기 때문에 getAttribute() 메서드로 값을 가져와서 활용할 수 있다. ✏️ 코드 예시 h1을 클릭하면 해당 [data-index]값을 경고창에 반환하도록 하였다. 제목태그1 제목태그2 위 코드에서 보다시피 CSS에서도 속성 .. 공감수 0 댓글수 0 2023. 9. 22.
[HTML] Canvas 요소는 HTML page의 비트맵 영역을 정의한다. Canvas API를 사용하면 JavaScript가 캔버스에 그래픽을 그릴 수 있다. Canvas API는 색상, 회전, 투명도 및 기타 픽셀 조작을 사용하여 모양, 선, 곡선, 상자, 텍스트 및 이미지를 그릴 수 있다. HTML DOM 메소드를 사용하여 요소에 액세스할 수 있습니다. getElementById() 캔버스에 그리려면 2D 컨텍스트 객체를 생성해야 한다. const myCanvas = document.getElementById("myCanvas"); const ctx = myCanvas.getContext("2d"); HTML 요소 자체에는 그리기 기능이 없다. 그래픽을 그리려면 JavaScript를 사용해야 한다. 이 getContext.. 공감수 0 댓글수 0 2023. 9. 22.
5. function 함수 여러 실행 코드들의 묶음(그룹화) 자주 사용하는 코드들(기능)을 저장했다가 필요할 때 호출해서 사용 function 키워드를 사용하여 정의 => ES6차에서는 화살표 함수를 사용 1. 함수 선언문 : 기명 함수로 정의 function 함수명() { 실행코드; } 2. 함수 표현식 : 익명 함수를 변수에 할당 변수 = function() { 실행코드; } 위와 같이 정의된 함수는 즉시 실행되지 않음 메모리에 할당되어 있다가 함수가 호출되면 실행 1. 함수명(); 2. 변수명(); function greeting(){ document.write('hello'); } greeting(); 📍함수 선언문과 함수 표현식의 차이점 함수 선언문은 호이스팅(끌어 올리기)이 일어난다. 해당 스코프(유효 범위)의 최.. 공감수 0 댓글수 0 2023. 9. 22.
4-4. Audio 객체 Audio 객체 오디오를 재생하기 위해 사용되는 요소 MP3, WAV, OGG 등 다양한 오디오 포맷 파일을 재생할 수 있음ㅈ 자바스크립트 상에서 audio객체를 생성하거나 혹은 HTML상에 태그를 선언해둔 상태라면 엘리먼트 취득 방식으로 audio 객체 확보할 수도 있다. const audio = new Audio('audio.mp3'); // 'audio.mp3' 파일을 로딩 audio.play(); // 오디오 재생 이러한 Audio 객체는 다양한 메서드와 이벤트를 제공하므로, 다양한 오디오 제어 기능을 구현할 수 있다. Audio 객체 프로퍼티 src - 음원 파일 경로 : "경로/파일명. 확장자" volumn - 볼륨 : 0.0 ~ 1.0 loop - 반복 여부 : true | false aut.. 공감수 0 댓글수 0 2023. 9. 22.
4-1. object 객체 여러 데이터들의 묶음 속성(데이터, Property)과 기능(동작, Method)을 가지는 모든 것 객체 안에 객체도 가능함 자바스크립트의 객체의 종류 1. 사용자 정의 객체 2. 내장 객체 3. 브라우저 객체(BOM) 4. 문서 객체(DOM) 1. 사용자 정의 객체 1) Object 내장 객체 이용 변수 = new 객체 생성자 함수(); new: 객체 생성 키워드 생성한 객체를 사용하기 위해 변수에 저장 객체 생성자 함수(constructor)는 대문자로 시작 속성 및 메소드 추가, 객체 접근은 도트 연산자(.)를 이용 this: 객체 자기 자신을 가리킴 2) 리터럴 방식 이용 직접 작성 객체 속성 = key : value 1쌍의 형태 공감수 0 댓글수 0 2023. 9. 21.
3-2.loop 반복문 조건식을 만족하는 동안 실행코드를 반복하여 수행 예) 데이터를 반복해서 처리해야 될 때 while문 1->2->3 반복 while (1. 3. 조건식){ 2. 실행코드; } for문(가장 많이 사용) for (1. 초기화식; 2. 5.조건식; 4. 증감식) { 3. 실행코드; } 4번에는 모든 증감식이 올 수 있음 i++, i--, i = i * 10 break문 switch문 또는 반복문 빠져나갈때 사용 continue문 반복문에서만 사용 가능 뒤에 오는 코드는 무시하고 다음 반복(for문 : 조건식)을 계속할 때 사용 공감수 0 댓글수 0 2023. 9. 21.
3-1. conditional 조건문 조건 만족 여부(true/false)에 따라 코드 수행 여부가 결정됨 if문 조건식을 만족하면 실행 코드 실행 if(조건식){ 실행코드; } if ~ else 문 조건식을 만족하면 if문 실행, 만족하지 않으면 else문 실행 조건식의 결과에 따라 두 가지 결과 중 하나를 실행시킬 때 사용 if ~ else if 문 여러 if문 조건식 중 만족하는 것을 찾아 실행, 만족하는게 없으면 else문 실행 조건식의 결과에 따라 여러가지 결과 중 하나를 실행시킬 때 사용 선택문 일치하는 경우의 값이 있을 경우 선택하여 실행 코드를 수행 일치하는 값이 없을 경우 default문(optional) 수행 switch문 const 변수 = 값; switch (변수) { case 값1: 코드1 break; case.. 공감수 0 댓글수 0 2023. 9. 21.
2. operator 연산 : 데이터를 처리하여 결과가 나오는 것 예) 연산식 : 10 + 20 연산자 : + 피연산자 : 10, 20 산술 연산자 +, - , * , / , %(나머지 연산자) 문자 결합 연산자 + 여러 개의 문자를 하나의 문자로 결합할 때 사용 문자 데이터가 하나라도 포함되어 있으면 문자 결합 연산 연산의 기본 방향 : 왼쪽에서 오른쪽으로 대입 연산자 = 값(데이터)을 변수에 저장할 때 사용 복합 대입 연산자 +=, -=, *=, /=, %= 대입 연산자 응용 : 데이터를 동적으로 받아와서 넣어줄 때 사용 innerHTML, appendChild(), insertBefore() 증감 연산자 ++(1씩 증가), --(1씩 감소) 📍다른 연산자와 같이 사용 시 위치(전위, 후위)에 따라 연산이 달라짐 비교 연.. 공감수 0 댓글수 0 2023. 9. 21.
[프로그래머스]숫자 찾기 - JavaScript 🤔 indexOf 사용하면 됨 - indexOf 사용하기 위해서 정수 num을 string으로 변환 - 숫자가 없으면 -1, 있으면 해당 index가 나오기 때문에 +1 해줘야 몇 번째인지 나옴 1️⃣ 😎😎😎 공감수 0 댓글수 0 2023. 9. 10.
[인터넷컴퓨팅] CRUD 웹 게시판 구축 2020년 3학년 2학기 인터넷컴퓨팅 수업 과제 기획 과제는 회원가입과 로그인을 할 수 있는 CRUD 기능을 갖춘 웹 게시판을 구축하기였습니다. W & S, Watch & Study라는 웹 사이트를 구축하여 드라마와 영화 등을 바탕으로 회화를 익히는데 도움을 주는 웹 사이트를 만든다고 생각하고 진행하였습니다. 메인 화면에 이를 소개를 했고 게시판 기능을 갖추도록 제작하였습니다. 회화 서비스를 구축하진 않았습니다😓😓😓 구현 영상 소감 프로젝트 진행에 있어서 막막했지만 많은 자료를 찾아보면서 하나하나 이뤄가는 과정이 의미가 있었습니다. 먼저 간단하게 구상한 후에 웹호스팅을 받아 잘 작동되는지 확인한 후에 자세한 내용을 덧붙여야 했는데 웹호스팅 전에 JSP(Tomcat)와 DB(MySQL)를 구축 연동하여 웹.. 공감수 0 댓글수 0 2023. 9. 8.
[프로그래머스]배열의 유사도 - JavaScript 🤔 두 배열 for문 돌려서 같을 때 1씩 더하기 1️⃣ 😎😎😎 공감수 0 댓글수 0 2023. 9. 8.
[프로그래머스]문자열 계산하기 - JavaScript 🤔 문자열에서 공백으로 연산자와 피연산자가 나눠지기 때문에 split 사용해서 공백기준으로 나눈다. index가 1인 값이 연산자이고 0과 2가 피연산자이다. 1️⃣ 20 / 100 🤨 연산자가 적어도 하나 포함되었다 = 하나 이상인 경우가 있다 이 부분을 놓쳐서 오류 발생 arr 배열 for문 돌려서 계산하기 answer에 arr[0] 첫번째 피연산자 저장해두고 피연산자가 + 일 때 인덱스보다 1 더한 자리 숫자형으로 바꾼후 더해지도록 변경 2️⃣ 😎😎😎 공감수 0 댓글수 0 2023. 9. 8.
[프로그래머스]가장 큰 수 찾기 - JavaScript 🤔 1. Math.max로 array 배열에서 가장 큰 수 찾기 2. indexOf로 가장 큰 수의 인덱스 찾기 1️⃣ 😎😎😎 공감수 0 댓글수 0 2023. 9. 8.
[프로그래머스]편지 - JavaScript 🤔 편지를 가로로만 적을 때 한 글자당 가로2cm이기 때문에 message길이 * 2하면 편지지의 최소 가로 길이이다. 1️⃣ 😎😎😎 공감수 0 댓글수 0 2023. 9. 8.
[프로그래머스]약수 구하기 - JavaScript 🤔 1부터 n까지 반복하면서 나눈 나머지가 0일 때 배열에 push하기 1️⃣ 😎😎😎 공감수 0 댓글수 0 2023. 9. 8.
[프로그래머스]인덱스 바꾸기 - JavaScript 🤔 splice 사용하기 위해 문자열을 split을 사용하여 배열로 만들어준다. splice(인덱스, 개수, 바꿀내용) 을 통해 변경해준 배열을 join을 통해 다시 문자열로 변경 1️⃣ 😎😎😎 공감수 0 댓글수 0 2023. 9. 7.
[프로그래머스]영어가 싫어요 - JavaScript 🤔 문자열 numbers를 정수로 바꾸려면 "zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine" 를 배열로 생성 forEach 사용하기 매개변수로 index도 추가 replaceAll 사용하여 문자열을 해당 index로 변경 1️⃣ 😎😎😎 공감수 0 댓글수 0 2023. 9. 7.
[프로그래머스]369 게임 - JavaScript 🤔 1. order 한 자리씩 비교 위해 split으로 나눠 새로운 배열 만들기. 이전에 string으로 변경해야함 2. 새로운 배열 map 돌려서 3, 6, 9 인 경우에 answer 1씩 증가해야함 3. swtich문으로 case 3, 6, 9 인 경우 answer++ 주의) string형이므로 number형 변환 후 3, 6, 9 비교하거나 형변환 없이 "3", "6", "9" 비교해야함 1️⃣ 😎😎😎 공감수 0 댓글수 0 2023. 9. 6.
[프로그래머스]가까운 수 - JavaScript 🤔 가까운 수를 찾으려면 n과 얼마나 차이나는 지 비교해야한다. 비교할 때 절대값으로 비교하여 그 수가 작을때 수를 찾아야한다. 1. Math.abs로 |n - array[i]| 새로운 배열에 넣기 2. 그 배열에서 가장 작은 값을 찾아 그 값의 인덱스를 찾기 3. array 배열의 인덱스 찾은 인덱스 값 대입하여 가까운 수 찾기 주의! 가장 가까운 수 가 여럿일 경우 더 작은 수를 리턴하기 때문에 미리 array를 오름차순 정렬해두면 좋음. 1️⃣ 😎😎😎 공감수 0 댓글수 0 2023. 9. 5.
[데일리문제] (6과목) 프로그래밍 언어 활용 - 2 다음은 C언어 코드이다. 실행결과를 쓰시오. #include void main(){ char arr[32]="What's your ETA?"; int i; for(i=0;arr[i]; i++){ if((arr[i]>='a') && (arr[i] 공감수 0 댓글수 0 2023. 9. 5.
[데일리문제] (6과목) 프로그래밍 언어 활용 - 1 1. 다음은 C언어 코드이다. soojebi라는 문자열을 입력하였다. 실행결과를 쓰시오. #include int main() { char arr[30]; gets(arr); printf("puts>"); puts(arr); return 0; } puts>soojebi 💡 gets(arr)로 soojebi 입력 받음 printf("puts>")로 puts> 출력됨 puts(arr)로 soojebi 출력됨 따라서 출력 결과 puts>soojebi 📍 gets() 문자열을 키보드로부터 입력 받는 함수 puts() 문자열을 화면에 출력하는 함수 getchar() 문자를 키보드로부터 입력 받는 함수 putchar() 문자를 화면에 출력하는 함수 [출처] [2023년 제3회 기사 실기 출제예상 문제] (6과목) 프.. 공감수 0 댓글수 0 2023. 9. 5.
[CSS]화면고정 position: sticky; top: 0; 스크롤로 인해서 화면에서 벗어날 상황에서 최상단에 고정된다. 부모 태그가 있고 부모 태그가 더 크다면 부모 태그가 화면에서 벗어날 때 같이 사라지게 된다. 공감수 0 댓글수 0 2023. 9. 5.
[프로그래머스]삼각형의 완성조건(1) - JavaScript 🤔 배열 sides sort 오름차순 정렬 마지막 원소가 나머지 원소의 합보다 작으면 1, 아니면 2 1️⃣ 😎😎😎 공감수 0 댓글수 0 2023. 8. 31.

728x90

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.