Sveltekit에서 특정파일의 고유 역할

SvelteKit에서는 여러 특별한 파일들이 있으며, 각각 고유한 역할을 합니다. 주요 파일들과 그 역할은 다음과 같습니다.

해당 파일을들은 이름 변경 없이 그대로 작성하여 사용하여야 하며 이것은 규칙이라고 생각하면된다.

1. `+page.svelte`
   - 역할: 페이지의 클라이언트 측 컴포넌트를 정의합니다.
   - 이 파일에서 페이지의 UI와 클라이언트 측 로직을 작성합니다.

2. `+page.server.js`
   - 역할: 서버 측에서 페이지 데이터를 로드하고 처리합니다.
   - `load` 함수를 export하여 서버 측 데이터 로딩을 수행합니다.
   - 서버에서만 실행되므로 데이터베이스 접근 등 민감한 작업을 수행할 수 있습니다.

3. `+page.js`
   - 역할: 클라이언트와 서버 양쪽에서 실행되는 페이지 로직을 정의합니다.
   - `load` 함수를 export하여 양쪽에서 데이터 로딩을 수행할 수 있습니다.

4. `+layout.svelte`
   - 역할: 여러 페이지에 공통적으로 적용되는 레이아웃을 정의합니다.
   - 네비게이션 바, 푸터 등 공통 UI 요소를 포함할 수 있습니다.

5. `+layout.server.js`
   - 역할: 레이아웃에 대한 서버 측 로직을 정의합니다.
   - 여러 페이지에 공통적으로 필요한 서버 측 데이터를 로드할 수 있습니다.

6. `+layout.js`
   - 역할: 클라이언트와 서버 양쪽에서 실행되는 레이아웃 로직을 정의합니다.

7. `+server.js`
   - 역할: API 엔드포인트를 정의합니다.
   - HTTP 메서드(GET, POST 등)에 대한 핸들러를 export하여 API 요청을 처리합니다.

8. `+error.svelte`
   - 역할: 에러 페이지를 정의합니다.
   - 404, 500 등의 에러 발생 시 표시될 페이지를 커스터마이즈할 수 있습니다.

9. `hooks.server.js`
   - 역할: 서버 측 훅을 정의합니다.
   - 모든 요청에 대해 실행되는 로직을 정의할 수 있습니다 (예: 인증).

10. `hooks.client.js`
    - 역할: 클라이언트 측 훅을 정의합니다.
    - 네비게이션 이벤트 등을 처리할 수 있습니다.

이 파일들은 SvelteKit의 파일 기반 라우팅 시스템의 일부로, 각 파일의 위치와 이름이 중요합니다. 예를 들어, `routes` 디렉토리 내의 파일 구조가 웹사이트의 URL 구조를 결정합니다.

각 파일은 특정 상황과 요구사항에 따라 선택적으로 사용될 수 있으며, 필요한 기능에 따라 적절한 파일을 생성하고 사용하면 됩니다.