스벨트킷(SvelteKit) Layout Groups 이해하기 - 08

이번 글에서는 SvelteKit의 Layout Groups 개념을 다룰 것입니다. Layout Groups는 여러 경로에 공통 레이아웃을 적용하면서도 URL 구조에 영향을 주지 않도록 도와줍니다. 이 개념을 예제를 통해 쉽게 설명하고자 합니다.

1. Layout Groups란 무엇인가?

Layout Groups는 SvelteKit에서 여러 경로에 동일한 레이아웃을 적용하기 위한 기능입니다. 특정 경로들을 하나의 그룹으로 묶어 공통 레이아웃을 사용할 수 있으며, 이때 URL 구조는 변경되지 않습니다.

2. Layout Groups의 필요성

때로는 애플리케이션의 여러 페이지가 동일한 레이아웃을 공유해야 하지만, URL 구조는 단순하게 유지되어야 합니다. 예를 들어, 로그인과 회원가입 페이지는 같은 레이아웃을 사용할 수 있지만 URL에 /auth와 같은 경로 세그먼트가 포함되지 않도록 해야 할 수 있습니다. 이때 Layout Groups가 유용하게 사용됩니다.

3. 인증 관련 라우트 구현하기

3.1 로그인과 회원가입 페이지 생성

처음으로 우리는 로그인과 회원가입 라우트를 만들어야 합니다. routes 폴더 내에 register와 login이라는 폴더를 생성하고, 각각 +page.svelte 파일을 추가합니다.

routes/

├── login/

          └── page.svelte

└── register/

           └── page.svelte

 

로그인과 회원가입 페이지는 간단하게 <h1> 태그로 페이지 제목을 추가해줍니다.

 

<!-- login/page.svelte --> 
<h1>Login</h1> 

<!-- register/page.svelte --> 
<h1>Register</h1>

3.2 레이아웃 추가 요구 사항

이제 제품 관리자가 새로운 요구 사항을 제시합니다. 모든 인증 관련 페이지에는 "Welcome to Jahvo"이라는 메시지를 포함하는 공통 레이아웃을 추가해야 한다는 것입니다.

4. 공통 레이아웃 정의하기

라우트 구조를 바꾸지 않으면서 로그인과 회원가입 페이지에 공통 레이아웃을 추가하려면 layout.svelte 파일을 만들어야 합니다.

routes/

├── auth/

│ ├── +layout.svelte

│ ├── login/

│ └── register/

+layout.svelte 파일 안에는 레이아웃을 정의하고, 페이지의 콘텐츠가 표시될 수 있도록 <slot /> 태그를 사용합니다.

<!-- +layout.svelte --> 
<h1>Welcome to Jahvo</h1> 
<slot />

 

5. 폴더 구조 변경을 통한 라우트 개선

login과 register 폴더를 auth 폴더 안으로 이동하면 /auth/login과 /auth/register로 접근할 수 있게 됩니다. 하지만 URL에 /auth 세그먼트가 포함되는 것을 원하지 않습니다.

6. URL에 영향을 주지 않는 Layout Groups 활용

이 문제를 해결하기 위해 SvelteKit의 Layout Groups 기능을 사용할 수 있습니다. 폴더 이름을 괄호로 감싸면 해당 폴더는 경로에 영향을 미치지 않으면서 라우트를 그룹화할 수 있습니다.

routes/

├── (auth)/

│ ├── +layout.svelte

│ ├── login/

│ └── register/

이렇게 하면 /login과 /register로 접근하면서도 공통 레이아웃을 유지할 수 있습니다.

7. SvelteKit에서 괄호를 사용한 그룹핑

SvelteKit에서는 괄호로 경로를 감싸는 방식으로 라우트를 그룹핑할 수 있습니다. 예를 들어, (auth) 폴더를 사용하면 /auth 세그먼트 없이도 auth 경로 내의 라우트들이 동일한 레이아웃을 공유할 수 있습니다.

8. Layout Groups가 유용한 경우

Layout Groups는 애플리케이션 내에서 여러 페이지에 걸쳐 동일한 레이아웃을 적용해야 할 때 유용합니다. 인증 페이지, 대시보드, 마케팅 페이지 등 다양한 섹션에 공통적인 디자인 요소를 추가하면서도 URL은 깔끔하게 유지할 수 있습니다.

9. Layout Groups 사용 시 주의사항

Layout Groups를 사용할 때는 폴더 구조가 복잡해지지 않도록 주의해야 합니다. 폴더 이름이 URL에 영향을 미치지 않기 때문에 코드가 다소 헷갈릴 수 있습니다. 명확한 구조와 네이밍 규칙을 사용하는 것이 중요합니다.

10. 코드 예시

10.1 초기 로그인 및 회원가입 라우트

<!-- routes/login/page.svelte --> 
<h1>Login</h1> 

<!-- routes/register/page.svelte --> 
<h1>Register</h1>

10.2 Layout Groups 적용

bash

코드 복사

routes/

├── (auth)/

│ ├── +layout.svelte

│ ├── login/

│ └── register/

<!-- (auth)/+layout.svelte --> 
<h1>Welcome to Jahvo</h1> 
<slot />

11. Layout Groups의 장점

1. URL 단순화: 경로에 불필요한 URL 없이 페이지 그룹화 가능.
2. 유지보수 용이: 여러 페이지에 걸쳐 동일한 레이아웃을 쉽게 적용.
3. 사용자 경험 향상: 복잡한 URL 대신 직관적인 경로 제공.

12. URL 구조와 사용자 경험

복잡한 URL 구조는 사용자 경험에 부정적인 영향을 미칠 수 있습니다. 특히 인증 페이지와 같은 중요 페이지에서는 깔끔하고 간단한 URL이 사용자에게 신뢰감을 줄 수 있습니다. Layout Groups는 이러한 요구를 충족시키는 유용한 도구입니다.