[12주차] - [9기] 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 10회차 - 58

1. 중간 회고 (1) & (2)

프로젝트 중간에 두 번의 회고를 진행하면서 방향을 점검했다.

• 처음에는 기능 구현 위주 → 점점 구조 개선 중심으로 전환
• “지금 이 코드가 유지보수 가능한가?”를 계속 고민

👉 특히 느낀 점:

처음부터 완벽한 구조를 만들려고 하기보다
만들고 → 회고하고 → 개선하는 흐름이 훨씬 현실적

---

2. import alias 적용

기존에는 이런 코드가 많았다:

 

import Button from "../../../components/common/Button";

 

👉 alias 적용 후:

 

import Button from "@/components/common/Button";

 

📌 장점

• 가독성 개선
• 경로 이동 시 유지보수 쉬움
• 협업 시 혼동 감소

---

3. 중복 코드 제거

프로젝트가 커지면서 동일한 로직이 여러 곳에 반복되기 시작했다.

예:

• API 호출 로직
• UI 패턴 (버튼, 카드 등)
• 유틸 함수

👉 해결 방법:

• 공통 컴포넌트 분리
• custom hook 도입
• util 함수 정리

📌 핵심 포인트:

“비슷한 코드가 2번 이상 나오면 분리 고민 시작”

---

4. 스니펫 만들기

개발 속도를 높이기 위해 자주 사용하는 패턴을 스니펫으로 등록했다.

예:

• React 컴포넌트 기본 구조
• useState / useEffect 템플릿
• API 호출 구조

📌 효과:

• 반복 작업 감소
• 실수 줄어듦
• 코드 스타일 통일

---

5. useAuth 훅 만들기

인증 관련 로직을 컴포넌트마다 작성하는 대신
custom hook으로 분리했다.

 

const { user, isLogin } = useAuth();

 

📌 장점:

• 인증 로직 중앙 관리
• 코드 재사용성 증가
• 테스트 및 유지보수 용이

👉 이건 사실상 프론트 구조의 핵심 개선 포인트

---

6. react-query 적용

서버 상태 관리를 위해 react-query를 도입했다.

(1) 기본 적용

• API 요청 로직 분리
• loading / error 상태 자동 관리

(2) 심화 적용

• 캐싱 활용
• refetch 전략 설정
• query key 설계

📌 느낀 점:

react-query는 단순 라이브러리가 아니라
데이터 흐름을 바꿔주는 도구

---

💡 전체적으로 느낀 점

이번 프로젝트를 통해 가장 크게 느낀 건:

❗ 기능보다 구조가 더 중요하다

초반에는:

“일단 돌아가게 만들자”

중반 이후:

“이 코드 계속 쓸 수 있나?”

---

🔥 배운 핵심 포인트 정리

• alias는 무조건 초반에 설정하자
• 중복 코드는 바로 분리하는 습관
• custom hook은 구조 개선의 핵심
• react-query는 선택이 아니라 거의 필수
• 회고를 해야 성장한다