← 전체로 돌아가기
프로젝트 메모 frontend -home-son-prj-tutorials

FE folder convention

FE 코드는 무조건 fe/ 폴더에 몰아넣기. 나중에 be/랑 대칭 맞춤.

frontendconventionproject-structure

FE folder structure rule

프로젝트 루트에 파일 흩뿌리지 말고 무조건 fe/ 폴더 안에 다 넣음. 백엔드 없어도 예외 없음.

npx create-next-app fe

  • fe/ : 프론트엔드 전용 디렉토리. package.json, app/, components/ 등 전부 여기 들어감.
  • be/ : 나중에 백엔드 추가하면 여기로 배치해서 fe/랑 대칭 구조 유지.

루트에는 README, docker-compose 같은 공통 설정만 남겨두는 게 깔끔함.

problems/ 위치 관련: FE에서 static import 해야 하니까 fe/problems/에 두거나 따로 content/ 빼서 참조. 일단은 fe/problems/로 통일.

keep it clean for future be/ addition.

여기서 배울 것

  1. FE 코드는 무조건 fe/ 폴더에 격리
  2. 나중에 be/ 추가할 때 대칭 구조 맞추기 위함
  3. 루트 디렉토리는 공통 설정 파일만 남겨서 지저분함 방지
원본 파일 보기 (.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/learn_code_test` 프로젝트에서 프론트엔드 코드는 항상 **프로젝트 루트 직속의 `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/`.