디렉터리 구조
웹사이트 루트를 기준으로 코드를 배치하는 위치입니다.
표준 구조
app/
assets/ # 빌드되는 CSS·이미지·폰트
components/ # Cake20 View 컴포넌트
composables/ # 선택적인 함수 조합 방식 공통 상태
middleware/ # 선택적인 클라이언트 Route Hook: *.hook.ts
layouts/ # 공통 레이아웃
lib/ # 브라우저 전용 라이브러리·기능 모듈
pages/ # 페이지
preview/ # Design Preview 샘플 JSON
stores/ # 전역 UI 상태
types/ # UI 전용 자동 import 타입
utils/ # UI 전용 자동 import 함수
public/ # 그대로 공개되는 정적 파일
privacy-policy.html # 영문 개인정보처리방침 기본 문서
social.jpg # 선택적인 링크 공유 대표 이미지
terms-of-service.html # 영문 웹사이트 이용약관 기본 문서
robots.txt # 검색 엔진 접근 규칙
sitemap.xml # 검색 엔진 페이지 목록
server/
api/ # /api 경로
routes/ # *.ws.ts, *.sse.ts, hello.ts
hooks/ # HTTP Hook: *.hook.ts
db/ # DB 모델·sql·seed
tasks/ # 배경작업: *.task.ts, *.job.ts
types/ # 서버 전용 자동 import 타입
utils/ # 서버 전용 자동 import 함수
shared/
types/ # 공통 타입
utils/ # 공통 함수
package.json # 웹사이트 설정과 의존성
tsconfig.json # TypeScript와 에디터 설정
build/ # Cake20 생성물, 편집 금지관리 영역
.cake, .git, build, node_modules, tmp, data와 files는 Cake20 시스템 영역이며 에디터와 MCP 파일 도구에 표시하지 않습니다. package.json, tsconfig.json과 app/index.html은 그대로 표시합니다.
package.json은 설정과 의존성의 단일 원본으로 직접 수정할 수 있습니다. 고정 표시된 표준 파일은 내용을 수정할 수 있지만 이름 변경, 이동과 삭제는 할 수 없습니다.
파일 목록에서 대상 폴더를 선택한 뒤 우클릭하여 로컬 파일 여러 개나 폴더를 한 번에 올릴 수 있습니다.
MCP 파일 도구의 파일당 2MB 제한을 넘는 정적 리소스는 에디터의 로컬에서 업로드를 사용합니다. 업로드한 대용량 파일은 MCP에서 내용을 읽거나 교체할 수 없으므로 최종 경로와 이름을 먼저 정하는 것이 좋습니다.
Cake20 공통 폴더와 표준 웹 파일은 내용을 편집할 수 있지만 이름 변경, 이동과 삭제는 할 수 없습니다. 예제 파일과 사용자가 추가한 항목은 자유롭게 이동하거나 삭제할 수 있습니다.
app의 직계 폴더는 assets, components, composables, middleware, layouts, lib, pages, preview, stores, types, utils, server는 api, db, hooks, routes, tasks, types, utils, shared는 types, utils로 고정됩니다. 세 루트 바로 아래에 파일이나 다른 폴더를 만들 수 없으며, 허용된 폴더 안에서는 필요한 깊이의 하위 폴더를 자유롭게 만듭니다.
Phaser 같은 브라우저 전용 라이브러리와 기능 모듈은 app/lib에 두고 페이지나 컴포넌트에서 명시적으로 import합니다. ~/는 화면 코드에서 app 최상위, 서버 코드에서 server 최상위를 가리킵니다. 예를 들어 ~/lib/browser처럼 사용하며 shared만 경로 없이 자동 import합니다.
기본 템플릿은 각 표준 폴더에 실제 화면이나 API에서 사용하는 작은 예제를 제공합니다. 일반 웹사이트에서는 쓰지 않는 선택 폴더와 예제 파일을 해당 호출부와 함께 삭제할 수 있습니다.
파일 트리에서는 표준 폴더가 아닌 사용자 생성 폴더와, 현재 위치의 이름·확장자 규칙에 맞지 않는 파일을 어둡게 표시합니다. 선택하거나 가리키면 정상 밝기로 보여 편집 기능은 그대로 사용할 수 있습니다.
파일 내용 검색
- FILES 아래의 파일 내용 검색이나 macOS의 ⌘⇧F, Windows·Linux의 Ctrl+Shift+F로 검색창을 엽니다.
- 대소문자 구분, 단어 단위, 정규식과 tsx, ts, css 같은 파일 확장자 필터를 함께 사용할 수 있습니다.
- 결과는 파일별 줄·열과 주변 내용을 표시하며, 선택하면 해당 파일과 위치로 이동합니다. 검색어 지우기 버튼은 입력과 결과를 함께 초기화합니다.
- 검색 대상은 FILES에 표시되는 2MB 이하 텍스트 소스입니다. 시스템 숨김 경로, 이미지와 바이너리는 제외하며 열어 둔 파일의 저장 전 변경도 반영합니다.
- 검색 결과는 최대 300개까지 표시합니다.