[우테코] 9편 : 오픈미션 3일차

| 서론

안녕하세요 팡일입니다!

오늘은 우아한테크코스 8기 프리코스의 오픈미션 3일차 포스팅입니다. 오늘은 진행한 점들에 대해서 기록하고 공유하려고 합니다!

| 오늘 한 일

1) 개발

Svelte + Vite 초기 세팅
폴더 구조 설계

| 어려웠던 점

1) Svelte? SvelteKit?

이번 오픈미션에서 처음으로 Svelte를 사용해보려고 했습니다. 처음엔 “Svelte로 프로젝트를 만들어야지!” 하고 공식 문서를 참고했는데, 검색하다 보니 ‘SvelteKit’이라는 프레임워크가 자꾸 등장하더군요. 처음엔 “둘이 같은 건가?”, “Kit은 또 뭐지?”라는 혼란이 생겼습니다.

조금 더 조사해 보니, Svelte는 UI 컴포넌트를 구성하고 렌더링하기 위한 프레임워크(컴파일러 포함)인 반면, SvelteKit은 이 Svelte를 기반으로 라우팅, 서버사이드 렌더링(SSR), 파일 기반 라우트, 빌드 및 배포 환경 등 웹 애플리케이션을 위한 전체 구조를 제공하는 애플리케이션 프레임워크(혹은 메타-프레임워크)라는 사실을 알게 되었습니다.

이 사실을 이해하고 나니, 단순히 Svelte만으로 시작하기보다는 SvelteKit을 사용하는 편이 애플리케이션 개발에 더 적합한 경우가 많다는 걸 깨달았습니다. 물론 아주 단순한 UI 위주 프로젝트라면 순수 Svelte만으로도 충분할 수 있습니다. 덕분에 프로젝트 초기 방향을 다시 잡았고, SvelteKit의 디렉토리 구조(routes, +page.svelte, +layout.svelte 등), 기본 라우팅 방식, 내부에 통합되어 있는 Vite 기반 개발 환경 등을 공부하면서 시간을 꽤 들였습니다.

이 과정이 조금은 어렵고 낯설었지만, 결국 “언어·프레임워크의 관계를 이해하는 것부터가 진짜 시작이다”라는 인사이트를 얻었습니다. 단순히 문법을 배우는 게 아니라, 개발 환경이 어떻게 전체적으로 맞물려서 작동하는지를 파악하는 것이 앞으로 프로젝트 방향을 잡는 데 큰 도움이 될 것 같습니다.

| 배운 점

1) 문서를 더 찾아보고 더 참고하자

https://sveltebyexample.com/filesystem-and-routing/

SvelteKit을 이용한 개발에 있어 파일 기반 라우팅(filesystem-routing) 구조에 대해 설명하는 페이지를 찾게 되었습니다. 특히나 Re:Log 서비스에서는 회고 문서 별 동적 라우트와 같이 데이터 로딩 스크립트를 넣는 방식에 대해서 고민이 됐었는데, 이런 부분이 실제로 문서화되어 있어서 이후 개발 시 도움이 되리라 생각했습니다.

또한, 폴더/파일 구조가 너무 깊거나 복잡해지면 열려 있는 폴더만 보고도 흐름이 어려울 수도 있겠다는 생각이 들었습니다. 그래서 적절히 평범함을 유지하기 위해서 어떻게 폴더 구조를 작성하면 좋을지에 대해서 고민할 수 있었습니다.

scr 폴더 내에서는 크게 lib / routes로 나누기- lib : components(공통 UI) / layouts(공통 레이아웃) / store (전역 상태) / services (DB 연동 서비스) / utils (유틸 함수) / constanst (상수)- routes - layout.svelte(전역 레이아웃), page.svelte(랜딩 페이지), 페이지 별 폴더 (page.svelte)

| 내일 목표