공부34 [Canvas API]캔버스(Canvas)를 이용한 도형 그리기 이제 어떻게 캔버스에 그릴 수 있는지에 대해 알아보자. 캔버스 위에 물체를 그릴 때에는 path를 사용하는 것이 필수적이므로 이것이 어떻게 사용되는 지 볼 것이다. 📒 캔버스(Canvas)를 이용한 도형 그리기 📍 그리드 드로잉을 시작하기 앞서, 캔버스 그리드 혹은 좌표공간(coordinate space)에 대하여 이야기 해보겠다. 이전 페이제에서 이야기했던 HTML 골격(skeleton)은 가로 세로 각 150 픽셀의 캔버스 요소를 가지고 있다. 기본적으로 그리드의 1단위는 캔버스의 1픽셀과 같다. 이 그리드의 원점은 좌측상단의 (0, 0)이다. 모든 요소들은 이 원점을 기준으로 위치된다. 그렇기 때문에 왼쪽에서 x 픽셀, y 픽셀 떨어진 것이라 볼 수 있고, 이 사각형의 좌표는 (x, y)가 된다. .. 2023. 10. 10. Canvas API Canvas HTML의 태그와 JavaScript를 사용하면 다양한 그래픽 요소를 만들 수 있다. 단순한 도형을 그리는 것은 물론, 데이터 시각화, 애니메이션, 웹 게임 등을 사용하기에 따라 무궁무진한 콘텐츠를 만들어 낼 수 있다. 이제 기본적인 캔버스 사용법부터 알아보자면, 일단 캔버스 태그를 작성하는 것으로 시작된다. 캔버스는 canvas 엘리먼트를 DOM으로 조작하는 방식으로 작성된다. 따라서 엘리먼트를 선택할 때 사용할 id를 작성해주는 것이 좋다. 캔버스를 지원하지 않는 브라우저에서는 캔버스 대신 태그 사이 내용이 표시된다. 이제 자바스크립트를 사용해서 엘리먼트를 선택해주자! const canvas = document.querySelector("#canvas"); 우선 너비와 높이를 설정해주어야.. 2023. 10. 10. [ES6+] callback 콜백 "내가 전달한 함수를 나중에 다시 불러줘(호출해줘)" = Callback 콜백은 다른 함수에 인수로 전달되는 함수를 말함 함수가 다른 함수를 호출할 수 있고 또한 함수가 완료된 후 콜백 함수를 실행할 수도 있음 콜백이 자주 쓰이는 곳 = 하나의 함수가 다른 함수를 기다려야 하는 비동기 함수에서 쓰일 때 대표적인 비동기 함수 setTimeout() : 시간 이후 실행 function myMessage1(){ document.getElementById('demo1').innerHTML = 'I love you!!'; } setTimeout(myMessage1, 3000); // 인자값을 전달받는(즉, 매개변수가 존재하는) 함수인 경우..? function myMessage2(value){ documen.. 2023. 9. 22. 동기와 비동기 동기(synchronous)와 비동기(asynchronous)의 개념 자바스크립트는 동기적으로 작동한다. 일반적으로 각 코드 블록이 이전 블록이 끝난 이후에 순차적으로 실행 💡비동기는 왜 필요할까? 어떤 명령을 실행할 때 그 명령이 언제 끝날지 예측하기 어렵거나 또는 주가 되는 작업이 아닐 때 사용 웹 브라우저와 서버가 통신할 때 언제 끝날 지 예측하기 힘들다. (인터넷이 느리거나, 서버가 느리거나) 통신이 끝날 때까지 아무것도 못하고 있는 것보다는 다른 일을 하고 있다가 통신이 끝났을 때 콜백이 호출되면서 작업을 나중에 하면 훨씬 효율적 (예시1) 네이버에서 네트워크 탭 열고 검색창에 ㅅ만 입력하고 통신한 것들 확인(비동기 통신, 새로고침 현상 안 일어남) (예시2) 네이버 지도 같은 경우 모든 데이터.. 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.. 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.. 2023. 9. 22. 이전 1 2 3 4 ··· 6 다음 728x90
