디자이너의 네이티브 앱 개발 도전기 #19
Local Storage #1
제일 애먹고 있다.
차근차근 정리할 테지만, 일단 문제가 몇 가지 발생했다.
오늘 나갈 물량 재고가 부족해 거래처에 급히 요청했는데, 그 녀석들이 도착하기 전 잠시 짬을 내어 글을 쓴다.
지역을 1개 이상, 3개 이하로 저장하게끔 하는 게 목표였다.
서로 번갈아 갈 수 있고 저장하고 지우고 할 수 있다.
각 지역마다 유니크 Key값이 있어서 Key값을 저장하면 될 일이다.
처음엔 쉽게 생각했다.
새롭게 SetItem을 넣어주면 알아서 데이터가 row로 쌓이는 건 줄 알았다.
하지만 스토리지는 Key(지역의 유니크 키 값이 아닌) 값과 value가 쌍으로 이루어져 있는데, key를 기반으로 value를 넣어주기만 하면 덮어쓰기가 된다.
결국 오브젝트 형태로 저장해줘야 하는데 여기에 로직이 필요하다.
주말 내내 시간을 쏟았다.
욕도 많이 하고 좌절도 많이 했다.
제일 이해하기 어려웠고 습득하는 것도 어려웠다.
관련 구문을 찾는 것도 쉽지 않았다. 나와 같은 케이스를 동일한 코드로 작성하는 사람을 찾기 어려웠기 때문일 것.
결국 토요일 늦은 밤, 커뮤니티의 선배들이 제시한 힌트로 일단락 지었다.
차례차례 개념만 정리 해보자면
1. LocationList라는 Key에 value가 없으면 setItem 한다.
2. value가 1개 이상이라면 기존 value를 getItem으로 가져와 parse 한다.(로컬 스토리지에는 string으로만 넣을 수 있다. 위에 오브젝트 형태로 저장해줘야 한다고 적었는데 어떻게 하는 거냐면 오브젝트 형태를 stringify 해서 오브젝트를 스트링으로 바꾼 후 저장해야 한다.)
3. parse 한 값과 새로운 값을 합쳐 setItem 한다.
4. 2개 이상이라면 기존 value를 getItem으로 가져와 parse 한다.
5. 가져온 value는... 를 통해 분해를 하고 새로운 value와 합쳐 setItem 한다.
이런 방식이다.
1개일 때 분해를 하지 않는 이유는 1개의 value를 분해하면 글자 하나하나 분해를 하기 때문.
오브젝트가 스트링으로 변환된걸 다시 오브젝트로 분해해야 하는데 이게 2개 이상일 경우에만 애초에 저장하려 했던 온전한 형태의 key값들이 분해될 수 있다.
여기서 발견된 문제는 각각의 경우의 수에 따라 화면이 실시간 반응하지 않는다.
각각의 로직을 검증하기 위해 앱을 계속 새로고침 해야만 했다.
아마도 특정 함수를 component의 마운트 혹은 업데이트에 따라 나눠 넣어야 할 것 같은데 잘 모르는 분야이므로 잠깐 덮어놓고 있다.
