목록개발 공부 (70)
Just Do IT!
React란? SPA란? Single Page Application 서버에서 HTML 페이지들을 일일이 다운로드하는 것이 아니라, 하나의 마크업(markup) HTML 파일을 받아 클라이언트에서 데이터를 직접 로딩해 동적으로 화면을 표시 사용자가 페이지를 다시 로딩할 필요가 없어진다. Virtual DOM DOM (Document Object Model) : HTML 마크업 구조를 자바스크립트로 조작이 가능한 객체 형태로 모델링한 것 어떤 DOM 요소를 변경하게 되면 브라우저는 새롭게 변경된 DOM을 토대로 새로운 화면을 그린다. DOM 요소의 변화 레이아웃 단계 : DOM 요소의 변화 이후 요소들의 위치를 계산 페인트 단계 : 새로운 화면을 다시 그리는 단계 Virtual Dom : 실제로 랜더링 되지..
1. 실행 컨텍스트란? 스택(stack) : Last in, first out 실행 컨텍스트 : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 콜 스택(call stack) 안에 실행 컨텍스트가 모아져 있다. 가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경 및 순서를 보장 (LIFO) 컨텍스트의 구성 방법 전역 공간 eval() 함수 함수 ☞ 우리가 흔히 실행 컨텍스트를 구성하는 방법 실행컨텍스트 구성 예시 실행 컨텍스트 객체 생성(활성화) 시점 : 한 '실행 컨텍스트'가 콜 스택의 맨 위에 쌓이는 순간이 곧 현재 실행한 코드에 관여하게 되는 시점 생성 시점에 JS 엔진은 해당 컨텍스트에 관련된 코드를 실행하는데 필요한 환경 정보들을 수집해서 실행 컨테스트 객체에 저장 실행..
기본적인 HTML 파일을 빨리 볼 수 있지만 사용자가 의미 있는 콘텐츠를 보기 위해서는 fetching과 실행하는 시간을 기다려야 한다. 3. head + async JS 파일 다운로드 받는 시간 절약 가능 자바스크립트 파일에서 DOM 요소를 조작하려는 시점에 HTML 파일이 정의되지 않는 위험한 요소가 생길 수 있다. 사용자들이 페이지를 로드하는데 여전히 시간이 걸린다. 4. head + defer 가장 좋은 옵션 순서대로 실행할 수 있어서 가장 안전하다 5. head + async 먼저 다운로드 된 파일을 먼저 실행 (정의된 순서는 상관이 없다) 순서에 의존적이라면 문제가 발생할 수 있다. 드림코딩 자바스크립트 강의를 들을 때 가장 처음으로 나왔던 부분인데, 영 헷갈려서 나중에 찾아볼 수 있을 것 같..
DOM (Document Object Model) 1. Javascript가 생긴 이유 브라우저에서 쓰려고 만들어진 JS (출처: https://roseline.oopy.io/dev/javascript-back-to-the-basic/history-of-javascript) 본연의 역할 웹 페이지를 동적으로 만들기 위해 즉, HTML 문서를 조작해서 생명력을 불어넣어주기 위해 만들어진 언어이다. 2. 웹 페이지가 뜨는 과정 www.naver.com (클라이언트 → 서버) HTML 문서를 수신 (서버 → 클라이언트) 브라우저가 HTML 파일을 해석 (parsing) 브라우저에는 기본적으로 랜더링 엔진이 있다 랜더링 엔진이 HTML 문서에 코드 한줄, 한줄 보면서 '해석' 한다. DOM Tree를 구성 HT..