FE 코드 fe/ 폴더 배치
FE 코드는 무조건 `fe/`에. 백엔드 `be/` 대칭 구조 위함.
프론트엔드 코드는 항상 프로젝트 루트 직속 fe/ 폴더에 둔다.
현재 백엔드 없어도 예외 없음.
Why: 나중에 백엔드 be/ 추가 시 대칭 구조 유지 위함.
루트에 FE 파일 흩어지면 지저분함.
적용법:
- 새 FE 파일/설정 파일 (package.json, next.config, tsconfig, app/, components/, public/ 등) 모두 fe/ 내부에.
- create-next-app 같은 스캐폴딩 도구 실행 시 fe 디렉토리 타겟 지정.
bash
npx create-next-app fe ...
- 백엔드 생기면 be/에. 프로젝트 루트엔 README, 공통 설정, docker-compose 정도만.
- problems/ 콘텐츠는 fe/problems/에 두거나, 별도 content/로 빼고 FE에서 참조. 기본은 fe/problems/로 퉁침.
여기서 배울 것
- FE 코드 `fe/` 폴더에 고정 배치.
- 백엔드 `be/` 폴더와 대칭 구조 미리 잡기.
- 루트 폴더는 최소한의 공통 파일만 유지.
- 스캐폴딩 툴 사용 시 타겟 디렉토리 지정 중요함.
원본 파일 보기 (.claude/projects/-home-son-prj-tutorials/memory/feedback_fe_folder_convention.md)
---
name: 프론트엔드 코드는 항상 fe/ 폴더에 배치
description: tutorials 프로젝트에서 FE 코드를 별도 fe/ 디렉토리에 두는 규칙 — 백엔드 추가 시 be/와 대칭 구조 유지
type: feedback
originSessionId: 19d9a159-187f-45ff-a97d-55357b523c0c
---
`/home/son/prj/tutorials` 프로젝트에서 프론트엔드 코드는 항상 **프로젝트 루트 직속의 `fe/` 폴더**에 생성/배치한다. 현재 백엔드가 없더라도 예외 없음.
**Why:** 사용자가 2026-04-20에 명시적으로 지시 — 나중에 백엔드를 추가할 때 `be/`와 대칭 구조로 깔끔하게 유지하려는 의도. 루트에 FE 파일이 흩어지면 구조가 망가짐.
**How to apply:**
- 새 FE 파일·설정 파일 (package.json, next.config, tsconfig, app/, components/, public/ 등) 모두 `fe/` 내부에 둘 것.
- `create-next-app` 같은 스캐폴딩 도구 실행 시 `fe` 디렉토리를 타겟으로 지정 (`npx create-next-app fe ...`).
- 백엔드가 생기면 `be/`에 둔다 — 프로젝트 루트에는 README, 공통 설정, docker-compose 정도만.
- 문제 콘텐츠(`problems/`) 위치는 FE가 static import하므로 `fe/problems/`에 두거나, 별도 `content/`로 빼고 FE에서 참조. 기본은 `fe/problems/`.