[2편] 라우팅 설계

📘 Aura_AI Day 2 전체 정리

안녕하세요.
이번 글은 Aura_AI 프로젝트 Day 2에서 진행한 내용을 바탕으로,
단순 작업 기록이 아니라 구조 설계 이유와 개념 정리, 면접 대응 포인트까지 함께 정리한 글입니다.

React / Next.js를 처음 접하시는 분들도 이해할 수 있도록
최대한 기초부터 설명해보겠습니다.

---

1️⃣ Day 2에서 확정한 핵심 결론 요약

✅ 지금 우리가 선택한 방향

• React 신버전 기반
• Next.js App Router 구조
• TypeScript 기본 적용
• layout.tsx 중심의 구조 설계

❌ 의도적으로 하지 않은 것들

• App.jsx 사용 ❌
• import React ❌
• jsx 파일 사용 ❌
• 헤더 / 푸터 기준으로 폴더 분리 ❌

👉 단순히 신기술을 쓰는 것이 아니라,
실제 회사에서 신입 개발자에게 기대하는 구조를 기준으로 선택했습니다.

---

2️⃣ 최종 페이지 구성 (사용자 기준)

실제로 URL로 접근 가능한 페이지는 다음과 같습니다.

/                메인 페이지
/login           로그인
/signup          회원가입
/chat            채팅 (핵심 기능)
/mypage          마이페이지

/terms           이용약관
/privacy         개인정보처리방침
/about           서비스 소개
/support         고객센터
/notice          공지사항

• 총 9~10개 페이지
• 신입 포트폴리오 기준으로 과하지도, 부족하지도 않은 규모

---

3️⃣ “이건 페이지가 아닙니다” (중요 개념)

Next.js App Router에서는
모든 화면 요소를 페이지로 만들지 않습니다.

항목구분

헤더	컴포넌트
푸터	컴포넌트
사이드바	컴포넌트
다크모드	기능(상태)

❌ 이들을 페이지로 만들면 설계 미숙

⭕ layout.tsx + 컴포넌트로 처리하는 것이 정답

---

4️⃣ 우리가 선택한 최종 파일 구조

📂 app 폴더 구조

app/
├─ (public)/                ← 로그인 전 영역
│  ├─ layout.tsx            ← Header + Footer
│  ├─ page.tsx              ← 메인 페이지
│  ├─ login/page.tsx
│  ├─ signup/page.tsx
│  ├─ terms/page.tsx
│  ├─ privacy/page.tsx
│  ├─ about/page.tsx
│  ├─ support/page.tsx
│  └─ notice/page.tsx
│
├─ (auth)/                  ← 로그인 후 영역
│  ├─ layout.tsx            ← Header + Sidebar
│  ├─ chat/page.tsx
│  └─ mypage/page.tsx
│
├─ layout.tsx               ← Root Layout (폰트, body)
├─ globals.css

---

5️⃣ 왜 이렇게 나눴을까?

❌ 페이지별로 나누지 않은 이유

• URL 구조와 맞지 않음
• 로그인 전/후 구분 불가능
• Next.js layout 시스템의 장점을 살리지 못함

⭕ public / auth 기준 분리의 장점

• 로그인 상태에 따라 UI가 명확히 구분됨
• 공통 UI를 layout 하나로 제어 가능
• 실무에서 가장 많이 사용하는 패턴

👉 UI 기준이 아니라, 서비스 흐름 기준 설계입니다.

---

6️⃣ 컴포넌트 구조 (React 관점)

components/
├─ layout/
│  ├─ Header.tsx
│  ├─ Footer.tsx
│  └─ Sidebar.tsx
│
├─ auth/
├─ chat/
└─ common/

• 페이지는 조립만 담당
• UI와 로직은 컴포넌트에 집중
• 유지보수성과 재사용성 향상

---

7️⃣ React 신버전 개념 정리

🔄 예전 React (CRA 기준)

import React from "react";

function App() {
  return <div />;
}

• App.jsx 필수
• React import 필수
• index.js에서 렌더링

---

🆕 현재 React + Next.js

export default function Page() {
  return <div />;
}

• App.jsx 필요 없음
• React import 필요 없음
• Next.js가 렌더링 자동 처리
• React 17+ JSX 자동 변환

👉 이것이 현재 React 생태계의 표준 방식입니다.

---

8️⃣ JSX vs TSX 정리

용도확장자

페이지	page.tsx
컴포넌트	.tsx
순수 로직	.ts

• jsx는 거의 사용하지 않음
• tsx + ts 조합이 실무 표준

---

9️⃣ “신버전 써서 중소기업 취업에 불리할까?”

❌ 회사가 보지 않는 것

• React 버전 숫자
• Next.js 버전 숫자

⭕ 회사가 보는 것

• 컴포넌트 분리 능력
• 상태 흐름 이해도
• 구조 설계 이유
• 유지보수 관점

👉 버전은 핑계이고, 이해도가 핵심입니다.

---

🔟 면접에서 이렇게 말하면 됩니다

Q. 왜 Next.js App Router를 사용했나요?

레이아웃 단위로 공통 UI를 분리해
로그인 전과 후 화면을 명확히 나누기 위해 사용했습니다.

---

Q. App.jsx가 없는데 괜찮나요?

Next.js App Router에서는 layout.tsx가
App 컴포넌트 역할을 대신하기 때문에 필요하지 않습니다.

---

Q. 우리 회사는 구버전 React인데요?

구조와 상태 관리 개념은 동일하다고 생각하고 있으며,
기존 코드 스타일에도 빠르게 적응할 수 있습니다.

---

Q. 왜 헤더/푸터 기준으로 나누지 않았나요?

UI 구성요소 기준이 아니라,
서비스 흐름과 사용자 상태 기준으로 설계하는 것이
유지보수에 더 적합하다고 판단했습니다.

---

마무리

Day 2에서는 기능 구현보다
구조와 개념을 명확히 잡는 데 집중했습니다.

이 단계가 탄탄해야 이후 기능 개발과 면접 설명이 쉬워진다고 생각합니다.

다음 단계에서는 이 구조 위에서
실제 기능을 하나씩 얹어갈 예정입니다.