ㄱ 부터 ㅎ 까지

공부를 시작하며 앞으로 공부할 내용인 클로저, 실행 컨텍스트와 관련이 있으며 이를 이해하는데 어려움이 없도록 공부를 하게 되었습니다. 책 모던 자바스크립트 Deep Dive를 통해 공부하였습니다. 스코프 스코프(scope)는 자바스크립트를 포함하여 다른 프로그래밍 언어에서도 있는 개념이지만 자바스크립트의 스코프는 다른 언어들과 다른 특징이 있습니다. 변수 선언문에서 var의 변수 선언문과 let, const 변수 선언문이 다르게 동작하는것을 하나의 예시로 들 수 있습니다. 다음과 같이 var은 함수 단위의 유효범위를 가집니다. var test1 = 1; console.log("1:", test1); // 출력 : 1 if (true) { var test1 = 2; console.log("2:", test..

공부를 시작하며 "use strict"; 가 엄격 모드를 사용한다! 라는 정도로만 알고 있고, 이 모드를 사용함으로써 정확하게 동작하는것이 무엇인지 알지 못했습니다. 이 공부를 통해서 strict mode 가 어떠한 특징을 가지고 있는지를 배워갑니다. 공부는 책 모던 자바스크립트 Deep Dive를 통해 진행하였습니다. strict mode strict mode, 엄격 모드는 자바스크립트 언어의 문법을 엄격하게 적용시켜 오류가 발생할 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 명시적인 에러를 발생시킵니다. 다음의 예제를 통해서 이 부분에 대해서 설명하겠습니다. function foo() { x = 1; } foo(); console.log(x); 위의 예제에서 con..

공부 시작 배경 그동안 웹 프론트엔드 개발을 하면서 결과물을 보여주는 웹 브라우저가 어떻게 동작하는지, 그 원리에 대해서 무심하게 지나치는 경우가 많았는데요. 제가 이 일을 하면서 "원리조차 모르고 있으면서 제대로 된 개발을 할 수 또는 하고 있을까?" 라는 생각이 들 때즘 "차근차근 공부해 나가야겠다" 라는 생각을 했습니다. 공부는 " 모던 자바스크립트 Deep Dive "라는 책을 바탕으로 진행하였습니다. 브라우저의 렌더링 과정 브라우저는 간단하게는 HTML, CSS, 자바스크립트 문서를 파싱하여 브라우저에 렌더링하는 순서대로 브라우저에 페이지를 띄워줍니다. 좀 더 세부적으로 과정을 살펴보자면 다음과 같은 순서입니다. 1. 브라우저의 렌더링에 필요한 리소스인 HTML, CSS, Javascript, ..

◆ 변수의 선언 (모던 자바스크립트 Deep Dive 책을 통해 공부한 글입니다.) ES6가 나오기 이전에 변수를 선언하기 위해서는 var을 사용해야 했습니다. var로 선언한 변수는 어떠한 문제점이 있고 특징이 있는지 살펴보고 let 과 const에 대해서 설명합니다. ◆ var 변수의 선언 var은 다음과 같이 변수를 선언합니다. 여러 타입을 변수에 넣을 수 있는데, 다음 예제와 같이 function과 같은 자바스크립트에서 이미 사용되고 있는 키워드는 변수 이름으로써 사용이 불가합니다. var foo = 'this is foo'; var one = 1; // 다음과 같은 function 키워드는 자바스크립트에서 함수로써 사용되고 있는 // 키워드입니다. 따라서 변수 이름으로 지정할 수 없습니다. va..

단계별 진행 Canvas 드로잉의 Best Practice를 알아가기 위해 한번에 모든것을 구현하지 않고 단계별로 나눠서 진행을 하고 있습니다. 컴포넌트 기본이 되는 캔버스 컴포넌트를 제작해주었습니다. 최종적으로 원하는 방향은 ~ ~ 과 같이 단방향 사용성을 목표로 두고 작업을 진행하였습니다. 간단하게 canvas 드로잉을 위한 속성값과 이벤트들을 받았습니다. 단계적으로 진행되어 추후 더 받아야할 타입들은 추가될 예정입니다. 사이즈 캔버스는 width(너비) 와 height(높이) 속성값을 받는데, 해당 값은 숫자가 입력되면 픽셀(px)로 적용이 되어 캔버스의 크기를 설정하게 됩니다. ( width와 height는 ref 를 통해서 설정을 할 수 있도록 바꾸었습니다. ) 이벤트 마우스(onMouse.....

프로젝트를 시작하며... 처음 시작은 HTML의 canvas 태그와 스크립트를 사용해서 웹 그림판을 만들어보고 싶었었습니다. 그 후에 그림판의 기능을 어느정도 데모로 만들어보니 레이어 관리와 여러가지 툴들을 제공해주는 앱( 요즘 많이 사용되고 있는 여느 디자인 툴들과 같이)을 만들어 보고 싶어 개인 프로젝트를 진행하게 되었습니다. 이번 프로젝트의 목적은 기획, 디자인, 개발까지 혼자서 진행하면서 프로젝트 프로세스의 전반적인 흐름을 익혀가고, 캔버스를 활용하여 관련된 다양한 기능들을 구현해보는데에 있습니다. 프로젝트 초기 세팅 프로젝트는 컴포넌트 재 사용성을 고려하여 개발하기 편한 싱글페이지 어플리케이션을 만들 수 있는 React 라이브러리와 Typescript를 사용하여 진행합니다. Create Reac..