Ch.Covelope

브라우저에 URL을 입력했을 때 일어나는 일1. URL 파싱     - 브라우저는 입력된 URL을 파싱 하여 프로토콜, 도메인, 경로 등을 분석합니다.     URL : 리소스 위치를 나타내는 표준화된 주소 체계(고유한 식별자)     프로토콜 (protocol) : 웹 브라우저가 서버와 통신하는 방법     도메인(domain) : 웹사이트의 고유한 이름    경로(path) : 웹 서버 내의 특정 리소스 위치  2. DNS 조회     - 먼저 브라우저 캐시, 운영체제 캐시, 라우터 캐시, ISP 캐시를 확인합니다.     - 캐시에 없다면, ISP(인터넷 서비스 제공업체 SK, KT 등)의 DNS 서버에 쿼리를 보냅니다.     - 브라우저는 도메인 이름을 IP 주소로 변환하기 위해 DNS 조회를 ..

호출 스택, 실행 프로세스 복습 하기 호출 스택(call stack), 콜백 큐(callback queue), 이벤트 루프(event loop) 자바스크립트 코드가 실행되고 자바스크립트 엔진은 각각의 함수 호출을 호출 스택에 추가, call stack 에 푸시(push) 되고 , 실행이 완료되면 stack 에서 팝(pop)된다. 호출스택(call stack) 함수의 호출을 기록 하는 자료 구조 만약 함수가 동기적일 경우 해당 연산이 완료될 때까지 다른 모든 작업은 대기하게 된다. JS 엔진은 단일 스레드로 동작하기 때문에 한 번에 하나의 작업만 처리한다. 만약 함수가 비동기적일 경우 예를 들어 setTimeout 또는 fetch,promise 등 해당 연산은 백그라운에서 처리되는데 해당 함수들의 결과를 ..

리코일(Recoil) ? 리코일은 2020년 Facebook 에서 만든 React 전용 상태 관리 라이브러리 이다. 이전에는 redux, mobx 그리고 React에 context등 다양한 상태관리 툴들이 존재한다. 기존 프로젝트도 redux로 되어있었고 처음 접했을 때는 많은 양에 코드들이 이해를 하는데 어려움을 주었지만 recoil은 이전 상태관리 라이브러리들과 다르게 러닝커브가 높지 않아 편하게 접근했던 거 같다. 리코일은 리액트 문법 친화적이며 get/set 인터페이스로 사용가능한 보일러 플레이트가 없는 API를 사용한다. 미들웨어 없이 비동기 처리가 가능하다 리코일 내부적으로 캐싱을 지원하며 동일한 atom 값에 대한 메모제이션된 값을 사용하여 성능적 이점이 있다. 간단하고 직관적인 API를 사..

리액트에서 함수형 컴포넌트 이전 클래스형 컴포넌트 사용시에는 상태를 지역변수 state에 정의하고 상태를 변경할 메소드 안에 setState 메소드를 넣어서 상태를 변경 했다. 그럼 왜 state변수를 직접 변경하지 않고 setState를 통해서 했는지는 해당 메소드를 사용해서 리액트 컴포넌트에 상태변경에 대해서 알려주고 리렌더링을 요청 하기 위해서다. 함수형 컴포넌트 리액트 함수형 컴포넌트에서는 useState 라는 React Hooks를 사용해서 상태를 관리한다. 해당 훅은 초기값을 받아서 [state, setState] 의 배열을 반환하며 [상태, 상태 변경 핸들러] 로 보면 된다. 함수형 컴포넌트는 렌더가 필요 할 때마다 함수를 재호출 하는데 렌더링은 곧 함수 호출이다. 함수가 재호출 되었을때 이..

자바스크립트 엔진(javascript engine) JavaScript 엔진은 JavaScript 코드를 해석하고 실행하는 역할을 담당. 주요 JavaScript 엔진에는 V8(Chrome 및 Node.js에서 사용), SpiderMonkey(Firefox에서 사용), JavaScriptCore(Safari에서 사용), Chakra(이전 버전의 Microsoft Edge에서 사용)가 포함. 주요 역할 파서 (Parser): 자바스크립트 코드를 읽고 추상 구문 트리(Abstract Syntax Tree, AST)로 변환하는 역할을 한다. AST는 코드의 구조를 표현하며, 엔진은 이를 분석하여 실행에 필요한 정보를 추출한다. 인터프리터 (Interpreter): 변환된 AST를 실행 가능한 명령어로 해석하고..

유틸리티 타입(Utility type)이란? TypeScript에서 제공하는 내장 타입 중 하나로, 기존 타입을 조작하고 변환하는 데 사용되는 타입이다. 이러한 유틸리티 타입은 코드를 더 간결하고 유지보수하기 쉽게 만들어주며, 타입 안정성을 높이는 데 도움이 된다. 자주 사용되는 TypeScript 유틸리티 타입들 Exclude ExcludedMembers'에 할당할 수 있는 모든 union 멤버를 'UnionType'에서 제외하여 Type을 생성합니다. type T0 = Exclude; //type T0 = "b" | "c" type T1 = Exclude; //type T1 = "c" type T2 = Exclude void), Function>; //type T2 = string | number U..