비실이의 개발 성장기

DOM 이란? 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. DOM 이란? - MDN web docs javascript 를 통해 웹 콘텐츠를 동적으로 제어할 수 있는 이유는 DOM ..

# 이벤트 루프(event loop) 이벤트 루프는 구현방식으로 인해 붙여진 이름이며, 이벤트 루프는 보통 아래 코드와 유사합니다. while(queue.waitForMessage()) { queue.processNextMessage(); } 이벤트 루프는 javascript 실행환경인 브라우저에서 관리합니다. # 이벤트 루프 동작방식 비어있는 태스크 큐에 1개의 태스크가 들어온 경우, 이벤트 루프에 의해 태스크가 큐에서 pop 됩니다. pop 된 태스크가 실행되면 javascript engine 에 의해 실행 가능한 코드범위로 실행 컨텍스트가 생성됩니다. 생성된 실행 컨텍스트는 콜 스택(Call Stack) 에 push 되고 실행됩니다. 코드 실행과정에서 생성되는 태스크는 태스큐 큐에 push 됩니다...

# 모듈 ES6 에서 처음으로 모듈에 대한 표준이 도입되었습니다. ES5 까지 javascript 에는 모듈에 대한 표준이 없었습니다. 모듈 표준이 없었을 당시에는 AMD, CommonJS, UMD 방식의 모듈시스템을 사용했습니다. # 모듈 생성 js 파일이 곧 모듈이 됩니다. 모듈에서 다른 모듈을 가져와 사용할 수 있고, 반대로 내보낼 수 있습니다. (import / export) 생성한 js 모듈을 브라우저에서도 모듈로 인식하도록 script 태그에 type="module" 을 지정합니다. 브라우저가 모듈로 인식해야 import / export 를 사용할 수 있습니다. # 모듈 import / export 모듈에 선언한 변수나 함수를 다른 모듈에 제공하기 위해 export 를 사용합니다. export..

# Arrow function 이란? Arrow function 은 일반 function 구문보다 짧게 사용할 수 있도록 추가 된 문법입니다. Arrow function 은 ES6 에 추가 된 문법이며, ES6 미지원 브라우저에서 사용하려면 js transpiler 를 통해 변환 해야합니다. # Arrow function 특징 Arrow function 구문에는 함수 이름을 작성하지 않습니다. 즉, 무조건 익명함수가 됩니다. Arrow function 은 일반 function 과 다르게 this 를 정의하지 않습니다. Arrow function 내부에서 this 를 사용하는 경우, 상위 스코프의 this 객체가 사용됩니다. (일반변수를 스코프 객체에서 찾는 방식과 동일) Arrow function 이 전..

# Symbol 이란? symbol 은 우리말로 '상징, 고유' 의 의미를 가집니다. javascript Symbol 은 ES6 에 추가 된 primitive data type 입니다. Symbol() 을 통해 생성된 값은 유일무이한 값이 됩니다. # Symbol 참고할 사항 for...in 문과 같이 객체의 property 를 열거하는 문법을 사용하는 경우, Symbol 속성은 열거되지 않습니다. Symbol 값을 key 로 하는 객체의 속성에 접근하고자 하는 경우, 객체[Symbol 값] 으로만 접근이 가능합니다. # Symbol 을 활용하는 경우 객체의 속성 key 를 Symbol 값으로 하여 해당 속성을 고유하게 관리하고자 하는 경우 # Symbol 이 활용되고 있는 부분 Array.prototy..

# 비구조화 할당(destructuring assignment) 이란? Destructuring 은 우리말로 '구조를 파괴하다, 분해하다' 의미를 가집니다. javascript 비구조화 할당은 배열이나 object 리터럴 객체를 분해한 뒤, 그 값을 변수에 할당하는 것을 말합니다. 비구조화 할당은 ES6 에 추가 된 문법이며, ES6 미지원 브라우저에서 사용하려면 js transpiler 를 통해 변환 해야합니다. # 비구조화 할당 활용 object 리터럴 객체에서 일부 속성(key) 을 할당하여 사용하고자 하는 경우 const user = { id: 9369, nickName: "2dubbing", fullName: { first: "Lee", last: "dubbing" } }; const { ful..

# Spread 문법이란? Spread 는 우리말로 '펴다, 펼쳐지다' 의미를 가집니다. javascript Spread 문법도 배열이나 문자열과 같은 반복가능한(Iterable) 객체에 사용하여 객체 내부 데이터들을 펼쳐놓을 수 있습니다. Spread 문법은 ES6 에 추가 된 문법이며, ES6 미지원 브라우저에서 사용하려면 js transpiler 를 통해 변환 해야합니다. 추가로 ES9(ECMAScript 2018) 부터는 object 리터럴 객체에도 Spread 문법을 사용할 수 있습니다. # Spread 문법 활용 기존 배열에 새로운 원소를 추가하여 새로운 배열 리터럴을 생성하는 경우 const foo = ["a", "b", "c", "f"]; const bar = ["d", "e"]; cons..

# async & await 이전의 비동기 코드 개발 javascript 에서 비동기 연산의 결과를 보장받기 위해 콜백 또는 Promise chain 방식을 사용합니다. 하지만, 위 두가지 방식으로 코드를 짜고 나면 코드구조가 복잡해져 있는 것을 확인할 수 있습니다. (callback hell) 코드구조가 복잡하다는 것은 코드를 이해하는데 시간이 걸리는 것이라 볼 수 있습니다. 이렇게 비동기 처리 코드 개발의 불편함을 간소화하고자 ES8(ECMAScript 2017) 에 async & await 문법이 추가되었습니다. # async & await 사용 및 확인사항 async & await 은 ES8 에 추가 된 표준 문법이며, ES6+ 미지원 브라우저에서 사용하려면 js transpiler 를 통해 변환..