~/VibeHandbook
$39

챕터 05 · 06

프로젝트의 생김새

전형적인 프로젝트를 열어보면 폴더 목록이 잡음처럼 느껴질 수 있습니다. 하지만 잡음이 아닙니다 — 대부분의 프로젝트는 알아볼 수 있는 패턴을 따릅니다. 여기 군더더기를 뺀 웹 앱이 있습니다:

my-app/
├── package.json          # 의존성 + 실행 명령어 (위 참고)
├── package-lock.json     # 잠금 파일 — 정확한 버전
├── .env                  # 로컬 비밀/설정 — 공유 안 함
├── .gitignore            # Git이 무시해야 할 파일 (예: .env)
├── README.md             # 이 프로젝트가 무엇인지, 어떻게 실행하는지
├── public/               # 있는 그대로 제공되는 정적 파일 (이미지, 아이콘)
└── src/                  # 여러분의 실제 코드가 사는 곳
    ├── components/        # 재사용 가능한 frontend 조각 (버튼, 카드)
    ├── pages/ (or app/)   # 사용자가 이동하는 화면/경로
    ├── lib/               # 공유 헬퍼와 backend 로직
    └── styles/            # CSS

이걸 외울 필요는 없습니다 — 그저 알아보기만 하면 됩니다. 그래야 AI가 "이걸 src/lib에 추가할게"라고 할 때, 그게 대략 어디인지 그리고 왜인지 알 수 있죠. 무게를 지탱하는 몇 가지 관례:

  • **src/**는 여러분이 쓰는 코드를 담습니다. 최상위 단계의 어수선한 것들은 대부분 설정입니다.
  • 루트의 설정 파일들 (package.json, dotfile들)은 도구를 설정하는 것이지, 여러분 앱의 동작을 설정하는 게 아닙니다.
  • **.gitignore**는 버전 관리에 저장되지 말아야 할 파일들을 나열합니다 — 여러분의 .env가 여기에 속하며, 바로 이것이 비밀이 공유 저장소 바깥에 머무는 방식입니다.

오프라인으로 보고 싶으세요?

PDF + EPUB + 다운로드형 프롬프트 라이브러리 + 버전 업데이트를 받으세요.

$ PDF 받기 — $39