[우테코] 10편 : 오픈미션 4일차

| 서론

안녕하세요 팡일입니다!

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

| 오늘 한 일

• Github Repo 생성하기

• 3일차 내용인 SvelteKit 정리본 포스팅하기

• 라우팅 방법 공부하기

| 어려웠던 점

1) 선택과 집중의 실패

: 2주라는 시간이 결코 길다고 생각하지 않았던 저에게, 이번 주는 몇가지 변수가 있었습니다. 바로 돌아오는 토요일에 예정된 정보처리기사 실기 시험이었죠. 게다가 갑작스럽게 생긴 발표 준비와 기존 일정이었던 디자인 졸업 전시 축하 일정까지 겹치면서, 충분히 시간을 투자하지 못한 점이 아쉬움으로 남았습니다.

오늘은 앞으로 사용할 Github Repository를 새로 생성하고, 전날 로컬 환경에서 구축해둔 Svelte + Vite 개발 환경에 Git을 init하여
원격 저장소(Remote)까지 연결을 완료했습니다. 이 과정은 여러 프로젝트와 과제를 진행하면서 익숙해진 덕분에 비교적 수월하게 끝낼 수 있었지만, 하루를 돌아보면 결과물로 남은 것은 Repo 생성뿐이었다는 점이 다소 아쉽게 느껴졌습니다.

| 배운 점

1) SvelteKit의 페이지 이동 방법

: 개발 환경이 구축된 시점에서, 본격적으로 페이지 개발에 들어가기 전에 라우팅 구조를 먼저 익히고자 했습니다. 단순히 페이지를 추가하는 것뿐 아니라, 어떻게 이동이 이루어지는지를 정확히 이해해야 전체 흐름을 설계하기가 훨씬 수월하기 때문입니다.

SvelteKit에서는 src/routes 폴더 구조가 곧 라우팅 구조로 연결된다는 점이 인상적이었습니다. 예를 들어 /list 경로를 만들고 싶다면, 단순히 routes/list/+page.svelte 파일만 생성하면 되는 구조였죠. React에서 react-router를 직접 설정해야 했던 과정이 완전히 사라지고, 폴더 구조 자체가 라우트 정의가 되는 점이 매우 직관적이었습니다.

특히 goto() 함수를 통해 코드 내에서 페이지 이동을 제어할 수 있다는 점이 흥미로웠습니다. 예를 들어, 버튼 클릭 시 특정 페이지로 이동시키는 로직은 다음과 같이 간단히 구현할 수 있었습니다. 이 코드를 작성하면서 “이동”이 단순한 라우팅이 아니라, 사용자의 행동과 흐름을 직접 제어할 수 있는 하나의 로직이라는 점을 깨달았습니다. React에서 useNavigate('/about'), Next.js에서 router.push('/about')와 같은 개념이지만, SvelteKit은 더 단순하고 직관적인 구조로 이를 처리할 수 있다는 게 매력적이었습니다.

이 과정을 통해 단순히 페이지를 “전환하는 것”이 아니라, 사용자 경험(UX)과 데이터 흐름을 고려한 페이지 이동 설계가 얼마나 중요한지를 배웠습니다.

| 내일 목표

1) Write 페이지

• 회고 작성 페이지 뼈대 구현

• 마크다운 에디터 구현

• 감정 버튼 / 랜덤 질문 표시 기능 구현

2) List 페이지

• 리스트 페이지 뼈대 구현

• 전체 데이터 불러오기 구현

3) Detail 페이지

• 상세 페이지 뼈대 구현

• 데이터 불러오기 구현

4) Firebase

• 프로젝트 생성 후 프로젝트와 연결

• hosting 배포

• Firestore로 DB 생성

• 회고 컬렉션 추가

• 사용자 컬렉션 추가

| 한 줄 회고

: '바쁜건 핑계이기에, 시간을 투자하자'