📚 PropsWithChildren type PropsWithChildren = P & { children?: ReactNode }; https://github.com/DefinitelyTyped/DefinitelyTyped/blob/813a8799e465a7d5f0d6776643f20f93681e85e4/types/react/index.d.ts#L820 1. generic 타입 매개변수 P를 받아온다 2. 해당 타입에 ReactNode 타입의 children 속성을 추가해준다. 📚 PropsWithChildren 사용하기 PropsWithChildren타입은 말 그대로 children을 가진 props 타입을 의미한다. 직접 children의 타입으로 명시해주어야했던 ReactNode와는 다르게 chi..
깃헙 레포를 보다가 객체에 `as const`를 선언하는 것 몇번 봤었다. `as const`가 뭐지? 왜 객체에 선언할까? 한번 알아보자 🤔 📚 as const 상수가 아닌 것을 상수로 타입단언 (const assertion)한다. 이때 리터럴 타입으로 추론해준다. 리터럴 타입으로 추론되기 때문에 상수가 아닌 것에도 상수처럼 관리할 수 있다! 📚 const assertion을 활용한 상수 관리하기 const Colors = { red: "#FF0000", blue: "#0000FF", green: "#008000" } 각 컬러의 대문자를 담은 Colors 변수를 선언해줬다. Colors 변수 내부에 추론된 값을 보면 각 속성 별로 리터럴 타입이 아닌 `primitive type(string)`으로 추론..
자꾸 까먹어서 정리하는 나름 유용한 웹스톰 단축키~! 코드 감싸기: 드래그 한 후 Cmd + Opt + T 멀티 커서: Opt + Click 열 선택 모드: Cmd를 누른 상태에서 원하는 텍스트를 드래그 다중 커서를 활성화하여 여러 줄의 텍스트를 동시에 편집할 때 유용함 코드 끝으로 이동: Cmd + →\ 현재 라인 복제: Cmd + D 현재 라인 삭제: Cmd + Backspace 현재 라인(또는 선택한 블록) 이동: Cmd + Shift + Up/Down 코드 포맷팅: Cmd + Opt + L 자동 완성: Cmd + Space 코드 실행: Cmd + R\ 현재 커서 위치에서 단어 선택 확장: Opt + Up/Down 스니펫 만들어서 사용할 수도 있던데 나중에 만들어봐야겠다...
📚 Set `Set`는 중복을 허용하지 않는 값들의 집합을 다루는 자료구조. 주로 중복을 제거하고 고유한 값의 컬렉션을 관리하기 위해 사용된다. 얼핏 보면 배열과 세트가 유사하다고 느낄 수 있지만, Set는 배열과 엄연히 다르다. 배열(Array) vs 세트(Set) 차이 구분 Array Set 동일한 값 중복 포함 가능 ⃝ X 순서 유의미 ⃝ X 인덱스로 요소에 접근 가능 ⃝ X Set의 주요 특징 Set 생성 Set는 `new` 키워드를 통해 생성할 수 있다. (클래스는 아니고 객체 생성자함수인 듯) const set = new Set(); console.log(set); // Set(0) () 아무 값도 전달하지 않으면 빈 세트를 생성하며, 보통 다음과 같이 `iterable`한 객체를 인수를 전달..
- 23/08/31 스터디 면접 질문 🙋 브라우저 렌더링 과정을 설명해주세요. 📚 브라우저 동작원리 브라우저 렌더링 과정 브라우저 로딩 과정: 파싱 > 스타일 > 레이아웃(리플로우) > 페인트 > 합성 & 렌더 1. 파싱 (Parsing) 브라우저에서 웹 페이지를 로드하면 가장 먼저 HTML 파일을 다운로드한다. 파싱은 다운로드한 HTML와 CSS를 해석하여 DOM 트리, CSSOM 트리를 구성하는 단계. HTML 파서는 문서 구조를 파악하고 DOM(Document Object Model)을 생성함. CSS 파서는 스타일 규칙을 해석하고 CSSOM(CSS Object Model)을 생성함. 2. 스타일 (Style) 스타일 단계에서는 CSSOM과 DOM을 가지고 스타일을 매칭 시킴. 이 과정을 거쳐 렌더..
- 23/08/31 스터디 면접 질문 🙋 웹사이트 성능 최적화에는 어떤 방법이 있나요? 성능 최적화를 하는 이유와 어떻게 개선되는지를 이해하기 위해선 브라우저의 렌더링 과정을 알아야한다. 브라우저 렌더링 과정 https://imnayoung.tistory.com/25 📚 성능 최적화 성능 최적화를 위해서는 웹 사이트의 `로딩 성능(Loading Performance)`과 `렌더링 성능(Rendering Performance)`을 개선해야 한다. 1) 웹 페이지 로딩 최적화 1. 블록 리소스(CSS, 자바스크립트) 최적화 브라우저 로딩 과정에서 파싱이 일어날 때 CSS 또는 자바스크립트로 인해 파싱이 중단될 수 있는데, 이때 원인이 되는 리소스를 블록 리소스(Block resource)라고 한다. 블록 리..
- 23/08/31 스터디 면접 질문! 🙋 리액트에서 JSX 문법이 어떻게 사용되나요? 📚 React 엘리먼트 React 앱의 화면을 표시하는 가장 작은 구성 요소. React 엘리먼트는 React 컴포넌트의 반환 값으로`일반 객체(plain object)`이다. 엘리먼트가 모여 컴포넌트라는 구조를 갖는다. React 엘리먼트는 실제 DOM에 직접 렌더링되지 않음 📚 React.createElement() `React 엘리먼트를 생성`하는 역할. 가상 DOM에 리액트 엘리먼트가 생성되고, 실제 DOM으로 렌더링됨. 📚 JSX JSX는 리액트에서 사용되는 JavaScript 확장문법으로, UI를 구성하는 데 사용된다. JSX를 사용하면 HTML과 유사한 마크업을 사용하여 UI 요소를 정의할 수 있다. JS..
📚 타입스크립트 컴파일 옵션: tsconfig.json { // 컴파일러 옵션 지정 "compilerOptions": { // 컴파일될 ES(JS) 버전 명시 - "ES2015" 권장 "target": "esnext", // 모듈 시스템 지정 - "CommonJS", "AMD", "ESNext" "module": "ESNext", // 모듈 해석 방식 지정 - "Node", "Classic" "moduleResolution": "Node", // ESM 모듈 방식 호환성 활성화 여부 "esModuleInterop": false, // 모든 파일을 모듈로 컴파일, import 혹은 export 키워드 "isolatedModules": false, // 모듈 해석에 사용할 기준 경로 지정 "baseUrl":..
