LocalStorage로 투두 리스트 만들기

요오드용액·2021년 10월 8일

프론트엔드

목록 보기

1/4

과제를 주신 사수님께서 만들어보라며 제작해준 이미지

무려 이틀을 걸쳐 만든 결과물!

지금은 수습기간이기도 하고 바로 업무에 투입될 수 없는 단계...
첫 과제로 받은 것은 프론트엔드를 준비하는 사람이라면 다들 들어보고 해봤을 법한 투두 리스트 만들기였다.

근데 나는...한 번도 만들어 본 적이 없다
ㅋㅋ(이런 저를 견뎌주세요)

그래서 회사 내에서 혼자 공부하면서 어렴풋이 봤던 기억과 검색을 통해 만들어냈다.
~~공부 했으면 이틀은 안 걸렸겠지....~~

디자인 시안은 위 레이아웃을 바탕으로 그대로 제작

진행과정
1. html,css디자인
2. 주간,야간 모드 추가
3. 할 일 추가 시 로컬스토리지에 저장
4. 세세한 UX 수정

기능은 사수님이 조언을 해주셔서 쫌쫌따리 추가되었다

필요 기능
1. 엔터를 누르더라도 할 일이 추가될 것.
2. placeholder에는 예시 할 일 목록이라도 넣는 것이 UX에 좋다.
3. 아무런 텍스트도 입력하지 않고 추가한다면 placeholder에 있는 것을 추가한다.
4. 새로고침을 하거나 할 일을 입력하면 placeholder의 값이 변하도록 한다.
5. 중복되는 할 일이 입력될 경우의 기능을 추가(나는 alert로 대체했다)
6. 입력한 정보는 창을 닫더라도 계속 저장되도록 local Storage를 이용하기

헐. 처음 쓰는 기능었다.
지금까지 뭘 공부했는지 의심스러운 수준

로컬 스토리지

웹 스토리지 중 하나로 클라이언트에 정보를 저장할 수 있는 저장소

사용자가 직접 지우는 것이 아닌 이상 영구적으로 저장된다.

key 와 value 값을 쌍으로 저장할 수 있다.

값을 저장할 때에는 객체의 값을 그대로 저장하는 것이 아닌, 텍스트로 변환해서 저장하는 것이 좋다. 변환 없이 저장하면 온전한 값이 저장되지 않는 경우 발생할 수 있다.

JSON.stringfy(저장할 값)

이런 식으로!
반대로 값을 가져올 땐 텍스트를 다시 파싱해서 가져와야겠지?

JSON.parse(가져올 값)

*JSON은 문자 기반의 포맷. 경량의 데이터 교환 방식.
키-값 쌍으로 이루어져 있다!
stringfy는 객체를 문자열로, parse는 문자열을 객체로 변환.

간단하게 썼던 것을 상기할 겸 로컬스토리지 사용법을 적어보자.

//로컬 스토리지에 무언가 저장할 땐
localStorage.setItem("키","값");

//로컬 스토리지의 값을 가져올 땐
localStorage.getItem("키");

//특정 키에 해당하는 값을 삭제하고 싶다면
localStorage.removeItem("키");

//전체 삭제
localStorage.clear();

이것 외에도 더 있겠지만 우선 내가 투두리스트를 만들면서 사용했던 함수들은 이 정도.

반성해야할 점이 있었다...

투두리스트를 만들면서 치명적인...실수를 하나 발견한 게 있었다.
로컬스토리지를 어떻게 활용할 지 몰랐던 나는, 각 할 일들을 하나하나 키:값 으로 넣었다는 점이다...

.........
..............................

키는 배열의 인덱스로, 값을 저렇게 하나하나 넣었다...

보통 사용하는 방식은

key: todo,
value : [{todo: "할일1", clear: false},{todo: "할일2", clear: false},{...}]

대충 이런식으로 저장하는 형태

나처럼 하면 리스트를 화면에 보여주거나 삭제하는 과정도 복잡해지더라.
나중에 주간/야간 모드를 로컬에 저장해서 관리하고 싶었는데, 로컬을 읽을 때 오류가 생기는 문제점 발생했다...
고치라면 어~~~떻게든 방법을 찾겠지만 더더욱 복잡해질 것으로 보였다.

넣고싶기는 해서 차선책으로 밝기 모드는 세션 스토리지(Session Storage)에 저장했다.

세션 스토리지

웹 스토리지의 하나

로컬 스토리지와 다르게 세션이 종료되면(브라우저 닫기) 저장된 정보는 사라진다

사용하는 방법은 위의 로컬 스토리지와 똑같다. 그냥 local > session으로 바꾸면 끝~

//세션 스토리지에 무언가 저장할 땐
sessionStorage.setItem("키","값");

//세션 스토리지의 값을 가져올 땐
sessionStorage.getItem("키");

//특정 키에 해당하는 값을 삭제하고 싶다면
sessionStorage.removeItem("키");

지금 깃허브에는 바보같이 밝기 모드 수정한 걸 커밋하지 않았다.

^ ^;;

처음 만들다보니 함수가 꼬인 것도 있었고... 로컬 스토리지 사용도 너무 미숙했고...

예전에 저장해둔 강의 다시 찾아 보니까 이 사람은 훨씬 적은 코드로 30분만에 끝냈더라.
물론 강의로 만들어야 했으니까 많이 공부하셨겠지!
그러고보니 이전에 이미 강의를 봐놓고 사용법을 몰랐었다니 부끄럽다...

다음엔 더 완성도를 높이자~_~