Svelte Todolist

svelte todo list

Todo List (Svelte)

이 프로젝트는 Svelte를 사용하여 간단한 Todo List 앱을 만드는 것을 목표로 합니다. 이 프로젝트를 통해 Svelte의 기본적인 사용법을 익힐 수 있습니다.

npm install
npm run start

Svelte에서의 상태 관리 방식을 처음 접하면서 초기 학습 곡선이 있었습니다. 특히 여러 컴포넌트 간의 상태 공유와 동기화를 위한 로직 구현이 복잡하게 느껴졌습니다. 특정 컴포넌트에서 발생하는 상태 변경이 다른 컴포넌트에 어떻게 영향을 미치는지 추적하는 것이 어려웠습니다. Svelte에서 상태 관리를 공부하면서 다음과 같은 것을 배웠습니다.Svelte 컴포넌트 내에서 export된 변수는 해당 컴포넌트의 props로 사용되며, 이를 통해 부모 컴포넌트로부터 데이터를 전달받을 수 있다는 것을 깨달았습니다. Svelte의 반응형 선언 ($:)을 통해 상태의 변화를 자동으로 감지하고 렌더링하는 방식에 대해 학습했습니다. Svelte의 상태 관리 방식과 이를 통해 컴포넌트 간의 상태 공유와 동기화를 어떻게 처리하는지에 대해 깊게 이해하게 되었습니다.

그동안 svelte의 주요 기능에 관련된 많은 영상들을 보고 관심이 있긴 했지만 "Hello World" 이상의 기능 구현을 해보지 않아 장점들에 대해 쉽게 와닿지는 않았다. 하지만 목표 결과물을 놓고 직접 기능들을 구현해보니 어떤 부분 때문에 svelte가 쉽고 편하다는 지에 대한 장점을 느낄 수 있었고, 반대로 수정기능 추가 시 의도하지 않은 부분이 업데이트가 되는 것을 보면서 자유도가 높고 간편한 것이 모든 면에서 좋은 것만은 아니라는 것도 느꼈다. 이와 연결된 svelte의 또 다른 단점을 마주했던 것이... 리액트로 개발할 때는 에러를 마주했을 때 참고할 수 있는 자료가 많이 나왔는데, svelte는 아무래도 커뮤니티가 리액트에 비해 작다보니 오류나 막히는 부분이 있을 경우 참고 자료가 많이 없는 것이 난감했다. 때문에 직접 부딪혀보고 공식문서를 여기저기 파보면서 해결할 수밖에 없었는데, 스터디 팀원들과 서로의 코드를 공유하면서 좀 더 자신감을 얻을 수 있었다. 이 프로젝트를 시작으로 현재는 회사 신규 프로젝트에서도 svelte를 사용 중이고 덕분에 빠르게 적응하여 개발이 가능했다!

처음으로 리액트 외의 다른 프레임워크의 코드를 보고, 사용해본 경험이었다. 이전에 리액트나 바닐라자바스크립트로 투두리스트를 만들어본 경험이 있어서, 조금 더 쉽게 스벨트는 어떻게 다른가에 집중할 수 있었던 것 같다. 상태관리(양방향)나 프롭스 드릴링 같은 부분에서 리액트와 다른 부분이 있었지만, 결국에 표현을 하는 방식이 조금 다를 뿐, 전체적인 흐름은 같다라고 느꼈던 것 같다. 그래서 하나를 잘하면 금방 다른 하나도 금방 잘하겠구나 라고 생각하기도 했고, 다른 프레임워크를 써보는 것이, 지금 하는 것에도 도움이 되겠구나 라고 생각하며, 조금 더 재밌게 작업할 수 있었다.