vinitus / manage-reservations Goto Github PK

1. windows
2. 런타임 환경 - node 18.18.0
3. 사용 언어 - javascript, typescript
4. 패키지 매니저 - npm
5. 빌드 도구 - vite
6. 프론트엔드 프레임워크 - sveltekit
7. 전역 상태 관리 - svelte-store

기타 prettier, eslint, git

npm install

npm run dev

npm install

npm run build

npm run preview

도중에 제가 아파가지고 작업을 거의 2일 정도 밖에 못했지만, 요구사항은 전부 구현하였습니다.

배우고 구현하기 바빠서 원래 어려웠던 경험이나 이런 것을 노션이나 마크다운으로 대충 정리하면서 진행하는데, 이번에는 아예 못해가지고 말로는 할 수 있어도 글로는 크게 남길 만한 것이 없어서 죄송합니다.

1. Svelte 적응하기

매번 React만 하다가 Svelte를 처음 사용해봤습니다. Vue와 비슷해서 큰 어려움은 없었지만, 너무 좁은 생태계를 가진 Svelte여서 생각보다는 시간이 걸린 것 같습니다. 주로 공식문서를 활용하여 문제를 해결하였으며, 혹시 Svelte에 미숙해서 잘못사용하는 것을 방지하기 위해서 eslint를 적용하였습니다.

React와는 확연히 다른 것 같습니다. React는 UI 관련한 것만 신경쓰고, 라이프 사이클이나 상태 관리 같은 것은 훅을 사용해서 편하게 할 수 있었는데, Svelte는 store를 사용하지 않고서는 아직도 상태 관리를 정확하게 어떻게 하는가가 감이 잡히지 않았습니다. 그래도 라이프 사이클을 위해서 import를 해오고 하는 점이 리액트의 클래스 컴포넌트와 유사한 것 같습니다.

2. 예약 생성 컴포넌트의 재활용

우선 생성 페이지부터 구현했는데, 요구 사항 중에 편집 페이지가 있는 것을 고민하면서 만들었습니다.

그래서 예약 생성에 대한 전역 상태를 하나 만들었습니다. 정확하게 요구사항을 인지한 것인지는 모르겠지만, 일정과 시간을 선택하는 컴포넌트로 페이지 이동을 해야해서 만들었습니다.

새로운 생성을 만드는 것이라면 초기화된 상태에서 진행하며, 기존의 예약을 편집하는 형태이면 url에서 index를 받아오고 해당 index의 list에 접근하여 subscribe를 합니다.

그 다음, 예약 생성 포멧이 담긴 전역 상태를 이를 업데이트하여 불러오는 형식으로 하였습니다.