React 동적 UI - part8

작업 중간 회고

회고를 하는 이유

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

결론적으로 "더 잘 할려고" 하는 것이다.

주요 학습 주제

1. 타입과 모델

   • Mapped 타입: Record<ColorKey, string> 으로 컬러 맵 선언
   • 인덱드 타입: [key in HeadingSize]: { … } 구조 학습
   • 인터페이스 확장: export interface OrderListItem extends Order
   • 유틸리티 타입: <Pick<Props, 'view'>> | Omit<OrderSheet, "delivery">

2. 데이터 흐름

   • BookList → 부모인 Books 훅(useBooks) 호출 → fetchBooks 통해 API 요청
   • httpClient(Axios) → order.api.ts 같은 모듈로 분리 → .then 과 useQuery 로 응답 처리

   장점: 파라미터 집중 관리, 중복 fetch 로직 방지

3. 컴포넌트 작성

   • 상태값(useState/useQuery)에 반응하는 재사용 컴포넌트 설계
   • CartSummary, Loading, FindAddressButton 등 기능별 분리

4. css 스타일링

   • display: flex;
     • justify-content:
     • aligin-items:
   • display: grid;
     • grid-template-columns:
     • gap

5. 커스텀 훅

   • useBooks, useAuth 등 use~~ 패턴
   • 내부 상태·사이드 이펙트 캡슐화 → 호출부 간결화

생산성

1. 스니펫 사용
   컴포넌트를 많이 만들기 보다는 재사용 가능한걸 만드는게 좋지만, 어쩔 수 없이 만들게 된다면 해당 기능을 통해 기본 뼈대를 만들 수 있다.
2. 기능 단위 작업 흐름 파악
   

KPT

Keep, Problem, Try회고 방식

• Keep
  1. 회원가입 ~ 주문까지 경험
  2. 생산성 고려
  3. 데이터 흐름에 맞추기
• Problem
  1. 테마스위처 미적용
  2. import alias가 아쉽다.
  3. 중복 코드가 있다.
  4. CSS 스타일링 정리
  5. 다양한 UI패턴들을 다루지 못함
• Try
  1. 테마스튀처 재배치
  2. alias 적용
  3. 중복코드 제거
  4. useAuth 훅
  5. 다양한 UI패턴 적용

중간 회고 도출 아이템

1. alias 적용
   • import할때 상대경로를 통해 관리해왔는데, 이걸 절대경로로 바꾸기 위해서 CRACO를 이용할 예정이다.
2. 중복 코드 제거
   • order.api.ts, books.api.ts 등 공통 fetch 로직 통합
3. 스니펫 만들기
   • VSCode ‘Generate snippet’ 플러그인으로 컴포넌트 템플릿 자동화
4. useAuth 훅 만들기
   • order.api.ts, books.api.ts 등 공통 fetch 로직 통합
5. react-query 적용
   • tsnstack이라는 이름으로 제공해주고 있다.
   • 데이터 캐싱·로딩 상태 관리 최적화
   • useQuery 훅으로 useBooks 리팩토링

스니펫 소개

1. Generate Snippet 확장 설치
   Generate snippet 플러그인으로 간편한 템플릿 생성

2. 스니펫 예시

	import styled from "styled-components";

	function $1() {
      return (
        <$1Style>
          <h1>$1</h1>
        </$1Style>
      )}
	
	const $1Style = styled.div``;

	export default $1;",

3. 등록 방법
   • 해당 코드를 드래그하고, 우클릭하여 snippet Generate 클릭
   • 확장자, 이름, prefix(키워드), 설명등을 설정하여 스니펫 만듬
   • prefix만들때 다른 스니펫이랑 안겹치게 앞에 -붙이면 좋음
   • 이후 prefix를 입력하면 스니펫 사용 가능
4. 효과
   • 반복되는 컴포넌트 작성 시간 절약
   • 일관된 코드 스타일 유지
   • 멘토 피드백 반영 후 빠른 템플릿 업데이트 가능