소개

이 블로그에서는 데이터베이스 없이 Svelte를 사용하여 상태를 유지하는 방법에 대해 알아보겠습니다.
큰 어플리케이션에서 많은 상태를 가진 클라이언트가 있고, 사용자가 프로젝트에 여러 변경 사항을 추가하고 저장 버튼을 클릭하기 전까지는 정보가 API로 업로드되지 않는 프로젝트를 다루기 위해 이 방법을 사용하게 되었습니다.
사용자가 탐색한 후 돌아오더라도 정보를 유지하기 위한 방법이 필요했습니다. 그래서 우리는 오늘 Svelte를 사용하여 이를 해결해보려고 합니다.
여기서 제공된 어플리케이션은 간단한 환영 및 계정 정보가 있으며, 버튼을 클릭할 때마다 숫자가 증가합니다. 상당히 간단해 보이죠?

우리가 해야할 일은 어떻게 정보를 저장하고, 빠르게 액세스하고, 프론트엔드에서 실행되는 상태 관리 소프트웨어에 정보를 넣을 수 있을까요? 또한 데이터베이스에 액세스할 수 없는 경우 어떻게 이를 구현할 수 있을까요?
Session Storage 또는 Local Storage를 사용하여 이를 수행할 수 있습니다. 이 방법은 간단하고, 서비스 워커 없이도 사용할 수 있습니다. 사용자가 JavaScript를 사용할 수 있어야 한다는 점에 유의해야 합니다.

이 기능을 구현하기 위해 우리는 함수 내에서 갱신될 때마다 스토어 내에 그 정보를 저장해야 합니다. 스토어 정보를 다른 위치에 저장해야 합니다. 여기에서는 Local Storage를 사용하기로 결정했습니다. Session Storage와 Local Storage 사이에는 몇 가지 차이점이 있지만, 대부분의 경우 유사하게 작동합니다.

Session Storage 또는 Local Storage 사용하기

Session Storage와 Local Storage에 대해 설명해 보겠습니다.
먼저 Session Storage와 Local Storage는 웹 브라우저에서 데이터를 임시로 저장하는 메커니즘입니다.
둘 다 클라이언트 측에서만 작동하며, 서비스 워커 없이도 사용할 수 있습니다.
다만, 사용자가 JavaScript를 사용할 수 있어야 한다는 점에 유의해야 합니다.

Session Storage는 페이지 세션이 유지되는 동안 데이터를 저장하는 데 사용됩니다.
즉, 사용자가 웹 사이트에 접속한 동안에만 데이터가 유지됩니다.
반면에 Local Storage는 브라우저를 종료하고 다시 접속해도 데이터가 유지됩니다.

Session Storage와 Local Storage는 간단하고 사용하기 쉽지만, 몇 가지 제약 사항이 있습니다.
먼저, 서버 사이드 렌더링 중에는 사용할 수 없습니다.
또한, 데이터베이스에 액세스할 수 없는 경우에만 사용할 수 있습니다.

이를 구현하기 위해선 데이터가 업데이트될 때마다 정보를 저장해야 합니다.
이를 위해 Local Storage를 사용하겠습니다.
Session Storage와 Local Storage는 몇 가지 차이점이 있지만, 대부분의 경우 유사하게 작동합니다.

업데이트된 정보 저장하기

정보를 저장하는 기능에 대해 설명하겠습니다.
로컬 스토리지에서 이전 카운트를 검색하는 방법
새 값으로 로컬 스토리지 카운트 업데이트하기
업데이트를 위해 로컬 스토리지 set item 사용하기

정보를 저장하기 위해 함수를 설명하면 스토어에 있는 정보가 업데이트될 때마다 해당 정보를 저장해야합니다. 스토어 정보를 다른 위치에 저장해야합니다. 여기에서는 로컬 스토리지를 사용하기로 결정했습니다. 세션 스토리지와 로컬 스토리지 사이에는 몇 가지 차이가 있지만 대부분의 경우 비슷하게 작동합니다.

컴포넌트 실행 시 상태 초기화하기

상태 초기화 로직에 대해 설명하겠습니다.
윈도우 및 스토리지의 사용 가능 여부 확인
이미 상태가 초기화되었는지 확인
로컬 스토리지에서 count 값을 가져오고 구문 분석하기.

어플리케이션이 실행될 때마다 상태를 초기화해야합니다. 상태 정보를 다른 위치에 저장해야합니다. 여기서는 로컬 스토리지를 사용하기로 결정했습니다. 세션 스토리지와 로컬 스토리지 사이에는 몇 가지 차이가 있지만 대부분의 경우 비슷하게 작동합니다.

이를 위해 로직을 추가하면 됩니다. 먼저 윈도우와 스토리지가 사용 가능한지 확인해야합니다. 그리고 이미 상태가 초기화되었는지 확인해야합니다. 그리고 로컬 스토리지에서 count 값을 가져와야합니다. 이 값은 로컬 스토리지에 저장된 문자열로 저장됩니다. 따라서 구문 분석하여 정수로 변환해야합니다.

결론

이 솔루션의 요약은 다음과 같습니다. Svelte를 사용하여 데이터베이스 없이 상태를 유지하는 방법을 알아보았습니다. 이 방법은 사용자가 프로젝트에 변경 사항을 추가하고 저장 버튼을 클릭하기 전까지는 정보가 업로드되지 않는 프로젝트에 유용합니다. 사용자가 탐색한 후에도 정보를 유지하기 위해 세션 스토리지 또는 로컬 스토리지를 사용할 수 있습니다. 이 방법은 간단하고 서비스 워커 없이도 사용할 수 있으며, 사용자가 JavaScript를 사용할 수 있어야 합니다.

잠재적인 문제와 사용 사례에 대해 주의해야 합니다. 먼저, 서버 사이드 렌더링 중에는 세션 스토리지와 로컬 스토리지를 사용할 수 없습니다. 또한, 데이터베이스에 액세스할 수 없는 경우에만 이 방법을 사용할 수 있습니다.

제 개인적인 경험과 사용 사례 시나리오는 다음과 같습니다. 저는 이 방법을 다른 프로젝트에서 사용하고 있습니다. 사용자가 프로젝트에 변경 사항을 추가하고 저장하지 않은 경우에도 정보를 유지해야 했습니다. 이 방법을 사용하여 문제를 해결할 수 있었습니다. 하지만 사용자에게 특정 시나리오에서 정보를 유지하기 위한 동작을 신중하게 구현해야 했습니다.

피드백과 생각을 장려하고 있습니다. 이 솔루션에 대한 피드백이나 질문이 있으면 언제든지 말씀해주세요. 여러분의 의견을 기다리고 있습니다.