Nuxt / NestJs 간단 개념

1) Nuxt와 NestJS의 역할 한 줄 요약

Nuxt: 관리자 화면(UI)를 만드는 프런트엔드 프레임워크
(페이지, 레이아웃, 로그인 화면, 목록/상세 화면, 버튼 클릭 등)

NestJS: 데이터와 비즈니스 로직을 처리하는 백엔드 서버
(로그인 검증, 세션 생성, DB 조회/저장, 권한 체크 등)

관리자 페이지에서 Nuxt = “보여주는 쪽”, NestJS = “결정하고 처리하는 쪽”

---

2) 구조

요청 흐름

1. 브라우저에서 페이지 접속
2. Nuxt가 페이지를 렌더링
3. 로그인 버튼 클릭
4. Nuxt → /api/auth/login 호출
5. (프록시) → NestJS API로 전달
6. NestJS가 로그인 검증 → 세션 쿠키 발급
7. 이후 모든 요청에 쿠키가 자동 포함됨

---

3) Nuxt 개념

3-1. Nuxt가 하는 일

• 관리자 페이지 라우팅
  • login, /users, /orders 등
• SSR / CSR
  • 초기 로딩 빠르게 (관리자 UX 좋음)
• API 호출
  • useFetch('/api/users')
• 로그인 상태에 따른 화면 제어
  • 로그인 안 됐으면 /login으로 리다이렉트

3-2. “Nuxt는 API 서버가 아니다”

Nuxt는 직접 DB를 만지지 않는다.

API 호출은 항상 백엔드(NestJS)를 향함

❌ Nuxt → DB
⭕ Nuxt → API(NestJS) → DB

---

4) NestJS 개념

4-1. NestJS가 하는 일

• 로그인 / 로그아웃
• 관리자 계정 검증
• 세션 생성 및 유지
• DB 접근 (User, Admin, Permission 등)
• “이 요청을 허용해도 되는가?” 판단

4-2. NestJS 구조 감각

NestJS는 레이어가 명확합니다.

Controller  →  Service  →  Repository(DB)

Ex)

• AuthController → /auth/login 요청 받음
• AuthService → 비밀번호 비교, 계정 상태 확인
• UserRepository → DB에서 관리자 계정 조회

---

5) 관리자 로그인 흐름 (세션 기준)

5-1. 왜 세션이 관리자에 적합한가

• JWT보다 탈취 리스크 관리가 쉬움
• 브라우저 기반 관리자에 적합
• 로그아웃/강제 만료 처리 쉬움

5-2. 실제 로그인 흐름

① 로그인 요청 (Nuxt)

await useFetch('/api/auth/login', {
  method: 'POST',
  body: { email, password },
})

② NestJS 로그인 처리

• 이메일/비밀번호 검증
• 성공 시:
  • 세션 생성
  • Set-Cookie: session=...; HttpOnly

③ 이후 요청

브라우저
  └─ 자동으로 쿠키 포함
       └─ /api/users
       └─ /api/orders

Nuxt에서는 쿠키를 직접 만질 필요가 없음.

---

6) “같은 오리진처럼 보이게” 하는 이유

관리자에서 가장 많이 터지는 문제

문제

• 프런트: localhost:3100
• 백엔드: localhost:3001

→ 쿠키, CORS, credentials 문제 폭발

해결

Nuxt에서 /api/*를 NestJS로 프록시

브라우저는 항상
http://admin.local/api/...
만 본다

• 쿠키 정상 동작
• CORS 설정 거의 불필요
• 코드 단순

---

7) 관리자 권한 체크는 어디서 하나?

❌ Nuxt에서 판단

• 보안상 위험
• 화면은 숨길 수 있어도 API는 못 막음

⭕ NestJS에서 판단 (정답)

• 세션 확인
• 관리자 권한(role) 확인
• 권한 없으면 401 / 403

Nuxt는:

• “실패하면 로그인 페이지로 보내기”만 담당

---

8) 개념을 한 문장으로 정리하면

Nuxt는 관리자 화면을 그리고,

NestJS는 관리자 권한을 보증한다.

• Nuxt는 “요청한다”
• NestJS는 “허용한다”