용어 알기 ✅ 하이드레이션(hydration) 1. JS 코드가 실행되어 2. JS로직과 HTML이 연결 후 3. 유저 상호작용이 가능하도록 하는 것 ✅ 요청 페이지 요청을 의미 ✅ TTFB(Time To First Byte) ⏩️ 데이터가 브라우저에 도달 ✅ FCP(First Contentful Paint) ⏩️ 유저가 컨텐츠를 볼 수 있음 ✅ LCP(Largest Contentful Paint) ⏩️ 유저가 주요 컨텐츠를 볼 수 있음 ✅ TTI(Time To Interactive) ⏩️ 유저와 상호작용 가능 CSR (Client Side Rendering) 데이터 페칭 이후에 렌더링. 1. User Request 2. CDN이 JS로 접근할 수 있는 링크와 HTML 파일을 서빙 3. 브라우저는 HTM..
클로저(Closure)란? 정의 1 “A closure is the combination of a function and the lexical environment within which that function was declared” 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다. [240130] 렉시컬 환경, 렉시컬 스코프 렉시컬 환경(렉시컬 환경 객체) 이란? 코드블록({...}), function, script를 실행하기 앞서 생성되는 특별한 객체 실행할 스코프 범위 안에 있는 변수와 함수를 프로퍼티로 저장하는 객체 렉시컬 환경 hamo0.tistory.com 함수 makeCounter()를 호출하면 내부 함수 function() { re..
CDN(Content Delivery Network)이란 컨텐츠 전송 네트워크(CDN)는 지리적으로 분산된 서버들을 연결한 네트워크이다. 사용자가 웹 사이트를 방문할 때 해당 웹 사이트 서버의 데이터는 사용자의 컴퓨터에 도달하기 위해 인터넷을 통해 이동해야 함 사용자가 해당 서버에서 멀리 떨어져 있는 경우 동영상 또는 웹 사이트 이미지와 같은 대용량 파일을 로드하는 데 시간이 오래 걸림 웹 사이트 컨텐츠는 지리적으로 사용자와 가까운 CDN 서버에 저장되며 컴퓨터에 훨씬 빨리 도달 가능 CDN의 장점 페이지 로드 시간 단축 대역폭 비용 절감 캐싱 및 기타 최적화를 통해 CDN은 서버가 제공해야 하는 데이터의 양을 줄임 컨텐츠 가용성 ⬆️ 더 많은 웹 트래픽을 처리하고 웹서버의 로드를 줄일 수 있음 하나 이..
[240126] 실행 컨텍스트 - (1) 실행 컨텍스트(execution context)란? 함수 실행에 대한 세부 정보를 담고 있는 내부 데이터 객체. 동일한 환경에 있는 환경 정보들을 모은 실행 컨텍스트를 콜스택에 쌓아올린 후 실행하여 코드의 환 hamo0.tistory.com 이전 글에서는 실행 컨텍스트가 무엇인지, 어떻게 구성되는지 알아보았다! 이번에는 실행 컨텍스트의 생성 과정을 살펴보자. 0. 예시 코드 var var1 = "gvar1"; const const1 = "gconst1"; function first() { var var1 = "fvar1"; var var2 = "fvar2" const const1 = "fconst1"; function second() { const const2 =..
문제 https://www.acmicpc.net/problem/1406 1406번: 에디터 첫째 줄에는 초기에 편집기에 입력되어 있는 문자열이 주어진다. 이 문자열은 길이가 N이고, 영어 소문자로만 이루어져 있으며, 길이는 100,000을 넘지 않는다. 둘째 줄에는 입력할 명령어의 개수 www.acmicpc.net 풀이과정 💡 아이디어 실제 cursor 변수를 다룬다고 생각하지 말고, cursor의 왼쪽과 오른쪽에 있어야 할 문자열을 stack으로 관리한다. 명령어 L : 커서를 왼쪽으로 한 칸 옮김 (커서가 문장의 맨 앞이면 무시됨) if (c === 'L') { if (cursor_left.length) { const top = cursor_left.pop(); cursor_right.push(top..
1. 배열로 스택 구현하기 그냥 JS 배열 메서드를 사용하면 스택을 활용할 수 있다. 2. 객체로 스택 구현하기 class Stack { #storage; constructor() { this.#storage = {}; this.length = 0; } push(item) { this.#storage[this.length++] = item; } pop() { if (!this.length) return; const item = this.#storage[--this.length]; delete this.#storage[this.length - 1]; return item; } } 3. 링크드리스트로 스택 구현하기 push(item) class Node { constructor(data) { this.dat..
✅ 제네릭 ✅ extends 키워드 활용하기 ✅ 인덱스 시그니처 활용하기 ✅ 의존성에 대한 이해 ✅ TS Doc을 활용해보자. ✅ any를 구체화시키자. 혹은 unknown을 활용하자. ✅ declare 키워드의 활용 ✅ 타입 커버리지를 추적하자. 이펙타 스터디를 하면서 적은 추가로 공부해야 할 내용들을 지난 프로젝트에 하나씩 적용해보자 ! ~~ 제네릭이란? 타입을 마치 함수의 파라미터처럼 사용하는 것 코드의 선언 시점이 아니라 생성 시점(런타임)에 타입을 명시 이런 코드를 function identity(arg: any): any { return arg; } 이렇게 써볼 수 있다! function identity(arg: T): T { return arg; } any와 다른 점은, 매개변수로 받은 타입..
this란? this는 자신이 속한 객체, 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. this가 왜 필요할까? 메서드는 자신이 속한 객체의 프로퍼티를 참조하고 변경할 수 있어야 한다. ➡️ 이를 위해 메서드는 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 생성자 함수 내부에서는 프로퍼티 또는 메서드를 추가하기 위해 자신이 생성할 인스턴스를 참조할 수 있어야 한다. 하지만 생성자 함수를 정의하는 시점은 인스턴스를 생성하기 이전이므로 생성자 함수가 생성할 인스턴스를 가리키는 식별자를 알 수 없다. ➡️ 이를 위해 자신이 생성할 인스턴스를 가리키는 특수한 식별자가 필요하다. this는 언제 결정되는가 this의 값은 런타임에 결정된다. 동일한 함수라도 다른 객체에서 호출했다면..
