본문 바로가기

study

(80)
vue - 성능 최적화(번들 사이즈 줄이기, Code Splitting) 1. 번들 사이즈와 Code Splitting이 렌더링 속도에 영향을 주는 이유 2. 번들(webpack) 사이즈 최적화 3. 코드 분할(Code Splitting) 4.이미지 Lazy Loading 오늘은 진행하고있는 프로젝트의 첫 웹사이트 접근시 렌더링 속도를 개선하기위한 작업을 포스팅하려고한다. 웹사이트의 초기 로딩시간이 길어질수록 사용자 경험은 떨어진다. 네트워크 속도가 빠르다면 크게 문제되진 않겠지만 모두가 좋은 네트워크 환경속에서 있는건 아니기때문에 개선을 하고자한다. 프론트엔드에서의 성능 최적화는 여러 관점에서 볼 수 있다. 번들 사이즈 줄이기, Code Splitting, 이미지 lazy loading, 폰트 최적화, 리플로우 / 리페인팅 등등.... 폰트 최적화에 대한 포스팅 보기 => ..
Js - 자바스크립트 동작 원리(런타임 환경) 1. 자바스크립트 엔진(Js Engine) 2. Browser Web APIs 3. Callback Queue 4. Event Loop 그동안 자바스크립트가 어떻게 동작하는지 정확히 이해하지 못하고 프레임워크를 쓰기에 급급했던것 같아 자바스크립트 동작 원리에대해 공부한 후 정리를 하려고 한다. 자바스크립트는 위의 이미지와 같은 구조를 가지고있다. 자바스크립트의 런타임 환경은 Js엔진(Memory Heap , Call Stak), Web APIs, Callback Queue, Event Loop 등으로 이루어져 있으며, 각각 맡은 역할이 다르다. 자바스크립트를 처음 접하는 사람들은 멀티 스레드 언어로 종종 오해하는 경우가 있다. Web ApIs, Callback Queue, Event Loop를 활용하여 ..
Js - 불변성(immutability) React와 Vue의 불변성 차이 1. 불변성이란? 2. JavaScript 메모리 구조 3. 원시타입과 참조 타입의 데이터 저장방식과 재할당 비교 4. React와 Vue에서의 데이터 불변성 1. 불변성이란? 불변성은 값이나 상태를 변경할 수 없는 것을 의미한다. 프로그래밍에서 불변성은 데이터 원본의 훼손을 막는 것을 의미한다. 간단히 말하자면, 어떤 값을 직접적으로 변경하지 않고 새로운 값을 만들어내는 것이다. 2. JavaScript 메모리 구조 자바스크립트 엔진은 call stack과 heap memory 2가지 메모리 공간을 가지고있다. call stack: 실행 중인 함수를 추적해 계산을 수행하고 지역변수를 저장하는 공간이다. 이곳에 원시 타입들이 저장된다. heap memory: 참조 타입들이 할당되는 곳입니다. 메모리 누수..
Js - 어휘적 환경(Lexical Environment)과 클로저(Closure) 목차 1. 어휘적 환경(Lexical Environment)란? 2. 실행 컨텍스트와 어휘적 환경 3. 어휘적 환경의 작동 방식 4. 클로저란? 5. 클로저 예시 1. 어휘적 환경(Lexical Environment)란? 코드 Block, Function, Script를 실행하기 앞서 생성되는 객체로, 실행할 스코프 범위 안에 있는 변수와 함수를 저장하는 객체이다. 코드를 실행하면서 참조가 필요한 변수의 값을 어휘적 환경 객체에서 식별자 이름을 키로 찾는다. 렉시컬 환경은 환경 레코드(Environment Record)와 외부 렉시컬 환경(Outer Lexical Environment)에 대한 참조로 구성되어있다. 환경 레코드 모든 지역 변수를 프로퍼티로 저장하고 있는 객체이다. this 값과 같은 기타..
Js - 스코프(Scope) 목차 1. 스코프란 2. 전역 스코프, 지역 스코프, 블록 레벨 스코프, 함수 레벨 스코프 3. 스코프 예시 4. 스코프 체인(Scope Chain) 5. 함수의 상위 스코프 결정 6. 함수의 실행 1. 스코프란 자신이 선언된 위치에 따라 본인의 유효범위가 결정된다. 변수 이름, 함수 이름, 클래스 이름과 같은 식별자가 자신이 선언된 위치에 따라 다른 코드에서 자신이 참조될 수 있을지 없을지 결정되는 것이다. 2. 전역 스코프, 지역 스코프, 블록 레벨 스코프, 함수 레벨 스코프 자바스크립에서는 전역, 지역 스코프가 존재한다. 전역 스코프 전역에 선언되어 있어 어느 곳에서든지 해당 변수에 접근할 수 있다. 지역 스코프 해당 지역 스코프에서만 접근할 수 있으며, 지역을 벗어난 곳에서는 접근할 수 없다. 블..
Web - 쿠키, 세션 스토리지, 로컬 스토리지 Htttp 프로토콜의 한계를 보안하기 위해 쿠키 또는 웹 스토리지를 이용한다. 비연결성지향(connectionless) Http는 클라이언트가 서버로 요청을 보내면, 서버는 클라이언트에게 그에 맞는 응답을 보내고 Tcp/Ip 연결을 끊는 특성이다. 무상태(stateless) 연결을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보를 유지하지 않는 특성이다. 1. 쿠키(Cookie) 브라우저에 저장되는 키-벨류 형식으로 정보를 저장한다. 4KB의 용량 제한을 가지고 있다. 보안에 취약하기 때문에 중요한 정보를 노출해서는 안된다. 브라우저에 300개까지 쿠키를 저장할 수 있으며, 한 도메인당 20개의 쿠키를 가질 수 있다. Request Header에 자동으로 실려 서버에 전송된다. 쿠키의 종류 영구 ..
Js - 호이스팅 간단히 이해하기 호이스팅이란 코드를 실행하기 전에 변수와 함수의 선언을 해당 스코프의 최상단으로 끌어올리는 것이 아니다. 코드를 실행하기 전에 변수와 함수의 선언을 해상 스코프의 최상단으로 올린 것처럼 보이는 현상이다. 자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 위한 과정에서 모든 선언(var, let, const, function, class)을 스코프에 등록한다. 코드 실행 전 이미 메모리에 선언된 변수나 함수가 저장되어 있기 때문에 선언문보다 참조/호출이 먼저 나와도 오류 없이 동작한다. => var키워드와 함수 선언문만 오류 없이 동작하며(undefined), let, const 변수는 참조 오류가 발생한다. 선언이 코드 실행보다 먼저 메모리에 저장되는 과정으로 인한 현상이다. 변수의 호이스팅 모든 ..
Web - 브라우저 랜더링 과정 브라우저 랜더링 과정 1. 사용자의 접근 사용자가 브라우저를 통해 웹 사이트에 접속하면, Dns에 연결된 서버로부터 HTML, CSS, font, image 등 웹 사이트에 필요한 리소스를 다운로드 받습니다. 2. Html 파일과 Css 파일 파싱 (Parsing) Html과 Css 파일일을 파싱 하여 DOM(Document Object Model) Tree와 CSSOM(Css Object Model) Tree를 만든다. * 파싱 중 Js Script Tag를 만나면 브라우저는 파싱 작업을 일시 중지하고 Js 엔진에 제어권을 넘긴다. Js 코드를 로드, 파싱, 실행한다고 한다. 왜냐하면 DOM을 변경하는 행위가 있을 수 있기 때문이다. 이것이 HTML 파서가 HTML 문서를 다시 파싱 하기 전에 자바스크..