Jessie

I am growing 🌱



이번주 주간 목표

데이터를 로컬에 저장하고 그것을 활용해 리스트를 동적 생성해보자.
리스트 삭제, 예산 추가, setting 내용 수정 기능 등 디테일을 추가해볼 게획.



2022.11.21

소비내역 데이터 로컬에 저장

add-modal에서 입력하는 값들을 묶어서 로컬에 저장하는 코드를 작성하기 위해
이전에 강의 들으면서 만들었던 todo-list 부분도 다시 찾아서 들어보고
localStorage에 관련한 문서들을 좀 더 찾아보며 공부했다.

잊고 있었던 JSON.stringify() 와 JSON.parse() 복습하기

localstrage에는 데이터가 string 타입으로만 저장될 수 있다.
여러 정보가 담긴 배열 [‘a’, ‘b’, ‘c’] 를 local에 저장했을때
배열 내부 값만 a, b, c 와 같은 문자열로 저장되어버려서 다시 가져와 활용하기가 어려워진다.

JSON.stringify()를 사용하면 데이터 그 자체를 문자열로 저장시킬 수 있다.
[‘a’, ‘b’, ‘c’] 문자 상태 그대로.
그런다음 JSON.parse()를 사용하면 저장된 값을 객체로 변환시켜 가져올 수 있다.
지금 프로젝트에서는 한 개의 리스트에 id, date, expence, title, memo 등의 값을 담은 객체를 만들고
그 값을 배열로 담아 로컬에 저장해야겠다.

단계가 많아 혼란스러울때는, 차근차근 순서를 적어보면 정리가 된다.

  1. 저장버튼(submit) 누르면 페이지 새로고침 되지 않도록 preventDefault 해주기
  2. input들의 value를 변수에 담고 저장한 값들을 담은 object 생성하기
  3. 생성한 object를 spendList 배열에 push하기
  4. spendList를 로컬에 문자열 그대로 저장하기 (stringify 사용)
  5. 저장한 데이터를 가져와 리스트 동적으로 생성하기 (parse 사용 & innerHTML 보단 appendChild 로)
  6. modal 닫기

복잡해보여서 어느세월에 할 수 있을까 했는데, 순서를 정리하고나니 차근차근 해결해나갈 수 있었다.

img01

img02 입력한 값들이 무사히 저장되었다.

innerHTML 대신 createElement

앞서 달력을 구현할때 innerHTML을 사용했다.
그러다 문득 createElement 후 appendChild 했던 강의 프로젝트 코드를 보다가 뭐가 다른지 찾아봤다.
innerHTML vs createElement

innerHTML은 실행할때마다 모든 요소를 다시 분석해서 재생성해야한다.
그래서 innerHTML로 요소를 추가했을때, 사전에 작성한 이벤트는 자동 적용되지 않는다.
이 문제는 전에 투표 기능을 만들면서 겪어봤던 문제같은데..
지금보니 그때 innerHTML을 썼기때문에 이벤트가 걸리지 않았던 것인가…!

2022.07.19 - 투표기능 만들기
이 프로젝트도 가계부 작업이 끝나면 디벨럽 해봐야겠다.

어쨌든 동적으로 요소를 생성할때는 createElement를 사용하는게 좋겠다.



2022.11.22

소비내역 리스트 스타일링

저장한 데이터를 넣기전에 더미 태그들을 만들어 스타일을 먼저 잡았다.

근데 여기서 예상치 못하게 한참 걸렸다.
이전까지는 정해놓은 width, height 값 안에 꽉 차는 UI만 들어가다가
이번에는 리스트가 아래로 쭉 펼쳐지며 스크롤링 되어야하고,
모바일과 데스크탑에서 봤을때 width, height의 기준을 다르게 해놨기 때문에 정리가 필요했다.
필요 없는 곳에 중복(?)으로 width, height값을 선언해놔서 살짝씩 틀여지는 부분들도 있었다.
후.. 간만에 매운맛 css 작업이었다.

img03 왼쪽은 PC, 오른쪽은 모바일 기준 화면



2022.11.23

전역변수 파일 분리

소비내역 페이지와 내역 추가 모달 등, js 파일을 분리해놓았는데 같은 DOM을 잡아와야하는 경우가 꽤 생겼다.
자바스크립트 전역변수 관리에 대해 검색해봤는데, scope에 관한 내용이나 상태관리에 대한 내용들이라
일단은 생각대로 variables.js 파일을 별도로 만들어 제일 먼저 HTML에 임포트 해봤다.

소비내역 리스트 동적 생성

이번에도 복잡할 것 같으니 작업 순서 먼저 정리하기.

  1. 태그 구조 분석
    img06
  2. ol에는 날짜를 확인할 수 있는 클래스가 필요하다
  3. 같은 날짜가 있다면 해당 ol에 내용 리스트만 추가
  4. 같은 날짜가 없다면 ol을 새로 생성하고, 날짜 타이틀을 추가하고, 내용 리스트를 추가
  5. list-item을 생성하는 함수와, ol을 생성하는 함수를 분리해야겠다

일단 조건문들은 나중에 잡고, 저장된 데이터로 list-item 출력하는 것 부터 진행했는데
앞서 고민한대로 appendChild를 사용하려니 각 태그마다 클래스나 내용을 별도로 추가해줘야해서.. 뭔가…

img04 이거 맞아??

img05 어쨌든 리스트는 출력했는데..



2022.11.24

생각해보니까 innerHTML과 appendChild를 적절히 섞어 쓰는게 좋을 것 같다.
button에만 클릭 이벤트가 필요하므로,
button 안에 들어가는 태그들은 템플릿으로 만들어서 innerHTML 해주는 식으로 코드를 수정했다.

img07

해결된 사소한 이슈들

  • 새로고침 할때마다 spend 데이터 새로고침되는 문제 있음
    페이지가 새로고침 되었을때 spends가 맨 처음과 같은 빈 배열로 시작하지 않도록 조건문을 추가하고
    로컬에 있는 데이터를 기반으로 리스트가 생성되어있을 수 있도록 generate 함수를 실행했다.
    img08

  • 돌발소비 체크용 별 버튼 기능 구현
    모달에서 별 체크를 하면, 리스트 구현 시 별 표시를 해줘야한다.
    템플릿을 미리 만들어 구현했기 때문에 별 아이콘을 넣어놓고 숨기는 방식으로 해결했다.
    나중에 리스트 삭제를 위해 추가한 id를 이용해 해당 리스트의 별 아이콘을 잡아와서
    저장해놓은 boolean값에 따라 display: none 속성을 추가했다.

  • 모달이 닫히고 다시 열렸을때 데이터 초기화
    input들은 value를 비워주고, select는 선택 시 색상을 바꿔주기때문에 되돌리는 코드를 추가했다.
    날짜는 다른날 선택값이 남아있지 않도록 현재 date를 다시 innerText 해줬다.



2022.11.26

이 외에도 며칠동안 소비내역 등록을 구현하기 위해 많은 고민이 필요했다.
그리고 이렇게 기본적인 동작은 구현 완료!

img09 동작을 녹화했는데 길어서 안올라감 ㅠㅠ

리스트가 가진 날짜 정보를 확인해서
등록된적이 있는 날짜면 리스트만 추가하고, 새로운 날짜면 새로운 ol과 타이틀이 추가되어야 했다.

아직 디테일하게 추가해야하는 기능들이 많다.

  • 날짜 기준 내림차순 정렬될 것 (최신순)
  • 소비내역 인풋 필수값 디자인 적용 및 기능 구현
  • 소비내역 내용들 최대글자수 체크
  • 소비 총 금액 summary 영역에 반영
  • 리스트 클릭 시 해당 내용의 모달 다시 띄우고 삭제기능 추가
  • 에산 추가 버튼 기능 구현



이번주 유난히 집중도 못하고 의도하는대로 안풀려서 괴로웠는데.. 운동도 좀 하면서 리프레시 해봐야겠다.
5주차는 남아있는 디테일 작업들을 진행할 계획이고,
이후 리액트로 이 프로젝트를 다시 만들면서 바닐라 버전 코드도 조금식 개선해 볼 생각이다.

Leave a comment

You may also enjoy