프로젝트: React(TypeScript) 기반의 동적 UI 개발(8)-회고, <Record k, v>. [key in k], 유틸리티 타입(Omit, Pick), KPT회고, path alias, react-query

작업 중간 회고

🗝️회고를 하는 이유

1. 성장과 학습
2. 문제 해결
3. 유연성과 적응성
4. 퍼포먼스 향상

➡️➡️더 좋은 코드 작성을 위함

주요학습주제

1. 타입과 모델

theme.ts

✨type을 단순한 타입이 아닌 유니온 타입으로 설정하고, interface에서 정의하여 사용할 때, 타입방어가 가능하여 프로젝트가 확장하고 변화하면서 겪을 수 있는 사이드 이펙트를 미리 막을 수 있다.

✨유니온 타입으로 설정한 type은 일일이 열거하기보다, Record<K, V>  | [Key in K] 로 가져다 사용할 수 있다.

✨type과 interface를 적절하게 사용하면 오류를 제한하고, 확장성있는 구조를 만드는데에도 유용하다.

✨테마로 정해놓은 light, dark의 객체가 존재하는데, dark는 light의 기본 정의를 스프레드 연산자로 가지고 오고 dark에서 필요한 부분만 다시 재정의 하여 객체 확장을 하였다.

2. 데이터 흐름

 

3. 컴포넌트 작성

✨map 루프, 삼항식, 단축평가

4. css 스타일링

✨flex, grid는 꼭 숙지하자❗❗

display: flex;
display: grid;

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

https://studiomeal.com/archives/533

이번에야말로 CSS Grid를 익혀보자

🗝️flex, grid를 익히기에 좋은 블로그❗

5. 커스텀 훅

✨파일 생성시 use를 꼭 붙여줘야 훅으로써 동작을 하게 됨. 별도의 상태를 가지고 어떠한 기능을 할때 훅을 만들어서 사용 데이터 교환, 흐름, 화면 로직 등을 공통모듈로 작성하여 사용

---

생산성

1. 스니펫 사용

2. 기능 단위 작업 흐름 파악

 

데이터 모델 정의 ➡️ 컴포넌트 생성 ➡️ 배치 ➡️ 1차 스타일링

➡️ 데이터 패치/훅 ➡️ 이벤트 핸들러 ➡️ 추가 스타일링 ➡️ 리팩토링

🔥강사님의 기능 단위작업 흐름 루틴🔥

KPT 회고

Keep (유지할 점)

1. 회원가입 ~ 주문까지 경험

2. 생산성 고려

3. 데이터 흐름에 맞추기

Problem (아쉬운 점 - 개선점)

1. 테마스위처 미적용

2. import path alias 상대경로가 아쉽다.

3. 중복코드가 있다.

4. css 스타일링 정리

5. 다양한 UI 패턴을 다루지 못 함

Try (다음 작업에 어떻게 할 것인가)

1. 테마스위처 재배치

2. 절대경로 path alias 적용

3. 중복코드 제거

4. useAuth 훅 // Login.tsx에서 커스텀 훅으로 사용하지 않고 promise로 바로 사용

5. 다양한 UI 패턴 경험

중간회고 도출 아이템

1. path alias 절대경로 적용

cra에서는 이를 위해 CRACO라는 외부모듈을 사용한다.

나는 vite이므로 아래와 같은 플러그인을 사용하여 절대 경로 설정이 가능하다.

yarn add -D vite-tsconfig-paths

vite.config.ts

플러그인을 설치후 vite.config.ts 파일에 플러그인을 import해서 호출한다.

tsconfig.json에서 compilerOptions를 설정해 준 후

tsconfig.app.json과 tsconfig.node.json에서 각각 상속 받을 수 있게 extends해준다.

다음과 같이 절대 경로로 설정해 줄 수 있다.

path alias가 필요한 이유

1. 코드 가독성: 긴 상대 경로 대신 짧고 명확한 경로 제공.
2. 유지보수성: 프로젝트 구조 변경 시 중앙 집중식 관리 가능.
3. 생산성: 파일 위치에 관계없이 일관된 import 방식 제공.
4. 리팩토링 용이성: 폴더 이동 시에도 최소한의 수정으로 작업 가능.
5. 대규모 프로젝트 지원: 모듈화된 아키텍처와 잘 어울림.

2. 중복코드 제거

❄️router 중복 코드 리팩토링하기

App.tsx에서 설정한 router의 코드가

<Layout>컴포넌트가 router별로 반복되고 있고,

errorElement가 최상위 path를 제외하고는 사용하지 않고 있다.

그래서 순회하여 다시 리팩토링을 한다.

각 element를 path에 필요한 컴포넌트만 넣어주고

map으로 순회하여 객체 확장을 통해 

element와 errorElement를 재정의해주면

 

원래의 코드와 같은 화면으로 랜더가 된다.

---

❄️http.ts API 요청 중복 코드 리팩토링

type으로 유니온 타입으로 지정해 줄 수 있지만

enum을 사용하여 타입을 지정해주고 

method, url, payload를 파라미터를 받아와서 API를 요청할 수 있는 코드로 수정했다.

유니온 타입으로 타입을 설정했을때는 'post'와 같은 string타입으로 파라미터가 넘어가지만,

enum같은 경우에는 export를 해주고 RequestMethod.POST 로 파라미터를 넣어주어야 한다.

3. 스니펫 만들기

내가 평소에 사용하는 스니펫들과 강의중 추가한 스니펫들✨

4. useAuth 커스텀 훅 만들기

useAuth.ts

Login.tsx, Signup.tsx, ResetPassword.tsx에 나눠져있고,

공통으로 사용되던 import나 코드들을 useAuth.ts에 모아 작성하고

훅으로 보내서 각 컴포넌트에서 간결하게 사용할 수 있게 수정하였다.

5. react-query 적용

https://tanstack.com/query/latest/docs/framework/react/overview

TanStack | High Quality Open-Source Software for Web Developers

yarn add @tanstack/react-query

 

useBooks.ts

Books.tsx

 

 

 

6. 다양한 UI 경험