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

React(TypeScript) 기반 프로젝트 진행 회고 – 구조부터 API까지

최근 React(TypeScript) 기반 프로젝트를 진행하면서 라우팅 → 모델 정의 → API 통신 → 회원가입 기능 구현까지 전체 흐름을 정리해봤습니다.

단순 기능 구현이 아니라, 확장 가능한 구조를 만드는 것에 초점을 맞췄습니다.

---

1. 라우트 작성 – 화면 구조의 뼈대

프로젝트의 시작은 라우팅 설계였습니다.

React에서는 보통 react-router-dom을 사용해 페이지를 구성하는데,

여기서 중요한 건 단순 이동이 아니라 페이지 구조를 어떻게 나눌 것인가입니다.

✔ 핵심 포인트

• 페이지 단위 분리 (Home, Login, Signup 등)
• Layout 분리 (Header/Footer 포함 여부)
• Private Route (인증 필요 페이지)

<Routes>
<Routepath="/"element={<Home/>}/>
<Routepath="/signup"element={<Signup/>}/>
<Routepath="/login"element={<Login/>}/>
</Routes>

이 단계에서 구조를 잘 잡으면 이후 작업이 훨씬 수월해집니다.

---

2. 모델 정의 – 데이터의 기준 만들기

TypeScript를 사용하는 가장 큰 이유 중 하나는 타입 안정성입니다.

백엔드 API와 연결하기 전에,

프론트에서 사용할 데이터 모델을 먼저 정의했습니다.

✔ 예시 (User 모델)

exportinterfaceUser {
  id:number;
  email:string;
  nickname:string;
  createdAt:string;
}

✔ 왜 중요한가?

• API 응답 구조가 명확해짐
• 개발 중 실수 줄어듦
• 협업 시 커뮤니케이션 비용 감소

특히 백엔드와 협업할 때 DTO 역할을 해줍니다.

---

3. API 통신과 데이터 레이어

이 단계가 프로젝트의 핵심입니다.

프론트와 백엔드를 연결하는 구간이기 때문입니다.

✔ 구조 분리 전략

• api/ → axios 설정
• services/ → 실제 API 호출 함수
• hooks/ → React에서 사용하는 로직

✔ 예시

// api instance
constapi=axios.create({
  baseURL:"<http://localhost:3000>",
  withCredentials:true,
});

// service
exportconstsignup=async (data:SignupRequest) => {
constres=awaitapi.post("/auth/signup",data);
returnres.data;
};

이렇게 분리하면

• 유지보수 쉬움
• 테스트 용이
• 재사용성 증가

---

4. 회원가입 기능 구현 (1) – UI & 상태 관리

회원가입은 단순한 폼이지만,

실제로는 꽤 많은 요소가 들어갑니다.

고려한 요소

• 입력값 상태 관리
• 유효성 검사
• 에러 처리
• 로딩 상태

const [form,setForm]=useState({
  email:"",
  password:"",
  nickname:"",
});

UX 관점에서 중요한 단계입니다.

---

5. 회원가입 기능 구현 (2) – API 연결

이제 UI와 API를 연결합니다.

✔ 핵심 흐름

1. 사용자 입력
2. API 호출
3. 성공/실패 처리
4. 페이지 이동

consthandleSignup=async () => {
try {
awaitsignup(form);
alert("회원가입 성공!");
  }catch (error) {
console.error(error);
  }
};

중요 포인트

• 에러 메시지 분기 처리
• 서버 응답 구조 이해
• 인증 방식 고려 (쿠키 vs 토큰)

특히 지금 진행 중인 프로젝트처럼

HttpOnly 쿠키 기반 인증이라면

withCredentials: true 설정이 필수입니다.