[시리즈][좋프엔지] 서론

Table of Contents

Intro

좋은 프론트엔드 개발자 되기 시리즈를 연재하려고 합니다.

지난 4년 동안 외주 및 풀타임 프론트엔드 개발자로서 현업에 있었습니다. 지난 시간동안 엔지니어링 적으로 다양한 문제점들을 겪었고 때로는 우아하게, 가끔은 지저분하게 문제를 해결했습니다.

문제를 이렇게 해결했으면 내 코드가 좀 더 잘 쓰일 수 있지 않을까 반성하면서 시리즈를 연재하려고 합니다.

주로 타입 안전성을 지키는 방법과 사이드 이펙트를 최소화하는 방법에 대해 소개할 예정이며 다음과 같은 주제로도 글을 쓸 예정입니다.

사이드 이펙트를 위임하는 방법
- Browser 주소창을 이용한 영속성 위임하기
- Uncontrolled State를 이용한 State 위임하기
- Funnel을 설계하는 방법

What과 How를 분리하는 방법
- React Suspense & ErrorBoundary(Making SmartSuspense)
- React Hook Form with Resolver
- Compound Pattern
컴포넌트 다형성
- Slot 컴포넌트 뜯어보기
- as vs asChild
컴포넌트 형상관리
- Make & Skeleton & Render 패턴

데이터 모델링(with. 대수적 데이터 타입)
- Parse, Don't validate의 의미
- Tagged Union으로 Optional Chaining 피하기
ts-belt로 알아보는 함수형 프로그래밍의 장점과 단점
- 데이터 파이프라이닝
- Option 타입 VS Result 타입()
- Currying과 Partial Application
- Opaque Type
- Lazy Evaluation

React를 더 잘 쓰는 방법
- children as prop
- 나만의 Type Extraction Utility 만들기
Typescript를 더 잘 쓰는 방법
- 타입을 좁히는 기술(as const)
- 타입을 존중하는 기술(satifies)
- tsconfig 옵션 뜯어보기
디자인 시스템 설계하기
- 디자인 시스템의 본질
- 설계 원칙
React-Query를 잘 쓰는 방법
- Optimistic Update
- Query Key를 잘 관리하는 방법
Graphql with Relay
- Relay 처럼 생각하기
- Rest API를 GraphQL 처럼 사용하는 방법(with. Caching)
자동화
- 디자인 시스템 자동화하기(with. style-dictionary, svgr)
- Mock 서버 생성 자동화하기(with. OpenAPI Spec)
- Github Action을 이용한 동료의 실수 방지하기
키워드
- Feature Flag
- TC39
- 불변성
- 힌들리 밀러 타입 시스템
Animation 잘쓰기
- AnimatePresence 컴포넌트 동작원리
- Fabrics