비실이의 개발 성장기

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

Rendering 이란? 컴퓨터 프로그램을 사용하여 모델 또는 이들을 모아놓은 장면인 씬 파일(scene file)로부터 영상을 만들어내는 과정을 말한다. (위키백과 - 렌더링) SSR / CSR 에서 말하는 렌더링은 인용 문구에서 말하는 scene 파일들을 이용해 영상을 만들지는 않습니다. 하지만, 렌더링 엔진을 사용해 소스 코드들로 부터 웹 페이지를 만들어낸다는 면에서 의미는 동일하다고 생각됩니다. Server-Side Rendering(SSR) 이란? PHP, JSP, ASP, Node.js 등 Server-Side Script 언어 기반의 템플릿 엔진을 이용해 동적인 웹 콘텐츠(html) 문서를 만드는 방식 입니다. 다음 코드는 Node.js 템플릿 엔진인 EJS 문법으로 작성 된 .ejs 파일 ..

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

# CORS 란? Cross Origin Resource Sharing(교차 출처 자원 공유) 의 약어 원본 출처에서 실행 중인 웹 어플리케이션이 다른 출처의 자원에 접근할 수 있도록 서버에서 관련 HTTP 헤더를 추가하여 브라우저에 알려주는 체제 입니다. # SOP 란? Same Origin Policy(동일 출처 정책) 의 약어 원본 출처에서 실행 중인 웹 어플리케이션은 보안상의 이유로 동일한 출처의 리소스만 공유할 수 있다 라는 정책 입니다. SOP 정책 중, 다른 출처 리소스 요청을 허용하는 예외 항목이 있는데 그 중 하나가 CORS 정책을 지킨 리소스 요청 입니다. # 출처(Origin) 란? URI 구조에 대해서 알아야 합니다. http://localhost:3000/main?page=1#co..

# 모듈 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..