본문 바로가기

Javascript36

[드림코딩 JS] #2 data types, let vs var, hoisting - CPU에 최적화된 로직을 작성하는게 중요. - 메모리 사용을 최소화 let (ES6에서 추가된 변수) var 변수는 선언도 하기 전에 값을 할당할 수가 있다. (var보다는 let을 사용해주자.) age = 4; var age; 심지어 출력도 가능하다. console.log(age); age = 4; console.log(age); var age; name = 4; let name; let은 var와 다르게 선언 하기 전에 값을 할당하면 에러가 발생한다. 값을 선언하기도 전에 쓸 수 있는것을 var hoisting이라고 한다. 어디에 선언했는지 상관없이 항상 선언을 가장 위로 끌어올리는것을 말한다. 그리고 var는 block scope도 없다. 블록을 철저히 무시한다. { age = 4; var ag.. 2020. 9. 26.
[드림코딩 JS] #1 script async 와 defer의 차이점 드림코딩 by엘리 www.youtube.com/playlist?list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2 AJAX : 비동기적으로 데이터를 서버에서 받아오고 처리할 수 있도록 도와준다. SPA(Single Page Application) : 하나의 페이지 안에서 데이터를 받아와서 필요한 부분만 업데이트하는 것이 유행이다. 물론 자바스크립트만으로도 구현이 가능하겠지만, SPA를 조금 더 쉽게 만들기 위해서 React, ANGULAR. VUE 등이 나오는것이다. 많은 개발자들이 공식 사이트처럼 이용하는 곳이 MDN이다. developer.mozilla.org/ko/docs/Web/JavaScript JavaScript JavaScript(JS)는 가벼운 인터프리터 또는 JIT 컴.. 2020. 9. 24.
[Vanilla-JS] 7. Saving the Image 이미지를 우클릭하면 아래와 같이 저장이 가능하다. canvas는 pixel을 다루는 거니까 기본적으로 image를 만든다. 그래서 download와 save파트는 이미 내장되어 있다. 하지만 아래와 같이 저장했을 때 버그가 있다. canvas의 배경색이 transparent(투명)로 저장이 된다. canvas의 배경색을 설정하지 않아서 실제 pixel manipulator canvas에 background를 설정하지 않았다. ( HTML 의 background만 설정한거다.) 그래서 canvas가 load 되자마자 설정되도록 해야된다. fillStyle을 black으로 만들기 전에 이렇게 설정을 하면 기본적으로 canvas의 background는 default에 의해서 하얀 배경이 되는거다. 이러한 co.. 2020. 8. 20.
[Vanilla-JS] 6. Filling Mode fillRect() : width와 height에 의해서 결정된 사이즈로 (x, y)위치에 색칠된 사각형을 그린다. 캔버스에서는 위에서부터 아래로 내려오면서 실행이 된다. 색상을 클릭하면 strokeStyle과 fillStyle을 color값으로 설정해주는 거다. 기본 색상값도 설정해놓겠다. 클릭 시 사격형이 만들어지게 하는 함수를 만들어보자. 하지만 색을 채우고 painting을 하면 paiting한 색으로 채워지는 문제점이 발생한다. 그래서 filling variable이 필요하다. filling이 true 상태에서만 색이 채워지도록 만들었다. ※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다. 2020. 8. 20.