웹
-
[WEB] 브라우저는 어떻게 렌더링할까?Front-end/Web 2020. 5. 4. 22:03
웹 어플리케이션을 개발하다보면 DOM(Document Object Model)을 참조하거나 부득이하게 변경할 때가 있다. 이 때문에 "DOM은 정체"와, 퍼포먼스의 이유로 "브라우저는 어떻게 렌더링"의 과정이 궁금해지게 된다. 자주 쓰고 있는 웹이든 Vue.js든 본인이 사용하는 기술의 Lifecycle을 이해하는 것은 중요하다고 생각한다. 브라우저의 구성 요소 그림1처럼 브라우저는 구성되어 있다. 네트워크를 가르쳐주시는 교수님 또는 책에서 종종 쓰는 Top-down 방식으로 보면 우리가 접하는 UI 레이어부터 이 UI의 백엔드까지 내려오게 된다. 이번 포스트에서는 브라우저의 렌더링 과정을 다룰 예정이므로, 구성 요소 중 렌더링 엔진이 주인공이다. 브라우저의 렌더링 엔진은 요청한 컨텐츠를 표시한다. 예를..
-
[Javascript] var, let, const 차이는?Front-end/Javascript 2020. 5. 4. 13:51
var 변수 선언시 사용되는 var는 아래 링크에서 설명하였다. https://daniel-park.tistory.com/5 [Javascript] Hoisting(호이스팅) Hoisting이란? 요즘 웹 개발하는 환경은 bolierplate를 쓰는 경우가 많다. 내장된 eslint와 같은 syntax 검사 모듈의 도움을 받기 때문에, 개발자는 var 대신 let, const를 쓰면서 hoisting의 개념을 알기 쉽지.. daniel-park.tistory.com 요약하자면, var을 통해 변수를 선언 및 초기화 할 수 있다. function scope에서 조건에 따라 hoisting이 이루어진다. es2015 사용 환경에서는 var 대신 let과 const를 사용한다. (추가) 아래 코드처럼 변수를 ..
-
[WEB] CORS(Cross Origin Resource Sharing) 개념Front-end/Web 2020. 5. 3. 16:22
CORS(Cross Origin Resource Sharing)가 필요한 경우 Node.js dev 모드로 웹을 api 서버와 달리 개발할 때, 크롬 개발자도구 콘솔에서 에러를 뿜어낼 때가 있다. CORS CORS CORS... 정체가 무엇일까? CORS(Cross Origin Resource Sharing)는 Front, Back 개발자 모두 기본적으로 알아야하는 웹 지식 중 하나이다. Web은 보안상 이슈의 이유로 동일 출처 정책(Same Origin Policy)을 사용해오고 있다. 즉, 클라이언트가 HTTP 요청시, 자신의 출처(도메인, 프로토콜, 포트)가 같아야 함을 의미한다. 하지만, 웹 개발의 복잡성이 더해지면서, SOP를 지켜가며 구현하기란 쉽지 않은 일이다. 수요가 있으면, 공급이 있듯,..