[TS] Pick, Omit, Select, Remove

타입스크립트에서는 기존 타입에 기반해 새 타입을 만들 수 있으므로 파생형을 일일이 유지보수하지 않고 최신으로 유지할 수 있다. 대표적으로 Pick 과 Omit 헬퍼 타입이 있다.매핑된 타입 Pick 은 객체의 키 하위 집합을 가져다 선택한 키만을 포함하는 새 객체를 만든다.type Pick = { [P in K]: T[P];}type PersonName = Pick;type PersonStrings = Pick;Omit 은 포함하고 싶지 않은 프로퍼티 집합으로 매핑한다. 이를 통해 특정 프로퍼티를 제거할 수 있다.type Omit = { [P in Exclude]: T[P];}type PersonWithoutAge = Omit;프로퍼티 키를 매핑할 때 조건부 타입과 타입 어서션을..

• format_list_bulleted TypeScript
• · 2025. 1. 15.
• textsms

Storybook 알아보기

최근에 디자인 시스템에 관심이 생겨서 관련 정보를 찾아보다가 Storybook을 알게 되었습니다. 호기심이 생겨 공식 문서를 통해 학습하여 정리했습니다.StorybookStorybook은 데이터, API 또는 비즈니스 로직으로 벗어나 UI 컴포넌트와 페이지를 독립적으로 구축할 수 있는 프론트엔드 워크샵으로 UI 개발, 테스트 및 문서화를 제공해준다.내구성이 뛰어난 UI를 개발할 수 있다.팀이 재사용할 수 있도록 UI를 문서화할 수 있다.스토리를 통해 UI가 실제로 어떻게 작동하는지 공유할 수 있다.CI 단계에 추가하여 UI 테스트를 자동화할 수 있다.스토리를 한번 작성하면 다양한 개발 환경에서 재사용할 수 있다.프론트엔드 워크샵애플리케이션 환경 외부에서 UI 코드를 작성할 수 있는 환경Storybook ..

• format_list_bulleted 개발
• · 2024. 6. 11.
• textsms

핵심 웹 지표(Core Web Vitals) 정리

모던 리액트 Deep Dive 12장 모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표를 읽고 정리한 내용입니다. 사용자가 웹사이트에 접속했을 때 공통적으로 기대하는 사항방문한 목적을 손쉽게 달성할 수 있어야 한다.목적을 달성하는 데 걸리는 시간이 짧아야 한다.개인정보가 누출되는 등의 사고 없이 보안이 철저해야 한다.즉, 아무리 좋은 기술 스택을 쓰더라도 사용성이 불편하면 사용자는 해당 서비스를 사용하지 않습니다. 따라서 개발자는 웹사이트의 성능에 주의를 기울여야 합니다. 과거 웹사이트의 성능은 단순히 웹사이트의 로딩 속도, 방문이나 결제 같은 실제 목표로 이뤄지는 전환율 등으로만 지엽적으로 판단했습니다. 그러나 몇 년전부터 구글은 핵심 웹 지표(Core Web Vital)라고 하는 웹사이트의 우수한 사..

• format_list_bulleted 개발
• · 2024. 5. 28.
• textsms

[React] 폰트 최적화 알아보기

인프런 강의 프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2의 폰트 최적화를 학습하고 정리한 내용입니다. 폰트를 최적화하지 않으면 다음과 같은 현상이 발생할 수 있습니다. 웹 폰트도 하나의 리소스로 네트워크를 통해 서버에서 다운로드해야 합니다. 그렇기 때문에 폰트가 적용된 텍스트를 브라우저 화면에 출력할 때 깜빡이는 현상이 발생합니다. 깜빡이는 현상에는 FOUT와 FOIT가 있다. FOUT(Flash of Unstyled Text)는 처음에는 기본 폰트로 출력하다가 다운로드가 완료되면 폰트가 적용되는 방식입니다. IE와 엣지 등의 브라우저에서 기본적으로 이 방식을 사용하고 있습니다.FOIT(Flash of Invisible Text)는 처음에는 텍스트를 보여주지 ..

• format_list_bulleted React
• · 2024. 5. 25.
• textsms

JSON Server와 LowDB, JSON Server Auth로 가상의 백엔드 서버 구현

1. JSON Server가짜 REST API를 생성하는 데 사용되는 도구로 이를 통해 간단한 JSON 파일을 사용하여 가상의 백엔드 서버를 구현할 수 있다.설치최신 버전에서 지원하지 않는 기능이 있어 아래의 버전으로 설치했다.npm install json-server@^0.17.32. LowDBNode.js 기반의 간단한 JSON 데이터베이스로, JSON 파일에 데이터를 저장하고 쿼리를 수행할 수 있다. 즉, 파일 기반의 데이터베이스를 생성하고 관리하는 도구이다.설치버전 1를 제외하고 모두 ESM 모듈 시스템을 사용하고 있어 CommonJS 모듈 시스템에서 사용할 수 있는 버전 1을 설치했다. (추후 sqlite로 마이그레이션 할 예정이다.)npm install lowdb@13. 가상의 백엔드 서버 구..

• format_list_bulleted 개발
• · 2024. 2. 13.
• textsms