전체 글79 [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+] arrow function 화살표 함수 화살표(=>)를 사용해서 함수를 선언하는 방법 () => {}; 매개변수가 하나만 있으면 소괄호 생략 가능(매개변수가 없으면 생략 불가) 암시적 반환 리턴문 한 줄만 있을 경우 중괄호(함수 블록)이란 return 키워드 둘 다 생략 가능(return 키워드만 생략하면 안됨!) 객체를 소괄호로 감싸야한다! 화살표 함수는 익명함수 참조할 이름이 필요하다면 함수를 변수에 할당하면 됨 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. 이전 1 2 3 4 ··· 14 다음 728x90
