Jessie

I am growing 🌱



이번주 주간 목표

이번주는 소비내역을 저장하는 화면까지 계획했던 디자인 구현을 완료해보자.
그리고나서 생각한 기능들을 덧붙여 쭉 진행할지,
리액트로 다시 만들어서 제품을 디벨럽 시킬지 고민해야겠다.
데이터가 로컬이 아니고 제대로 저장되려면 어찌해야하는지도 고민해야하고..



2022.11.14

new Date()객체 활용

globals.js 파일에 날짜 정보 관련 변수들을 정의했다.

img01

시작일 option의 범위를 현재 월 정보에 맞게 호출

30일까지인 달, 31일까지 혹은 28일까지 있는 달 들이 있으니 시작일 option을 현재 월 정보에 맞추려고 하다가
option의 성격 자체가 각 월보다는 일괄적인 정보로서 역할해야한다는 생각이 들어서 수정하지 않기로 했다.

option은 1일 ~ 30일로 고정하되,
소비내역 화면으로 넘어왔을때 현재 월에 맞는 한달의 범위를 잡아주는 조건문이 필요하겠다.
예를들어 시작일이 1일이라면, 2월 1일 ~ 2월 28일 로 표기하고 다음달엔 3월 1일 ~ 3월 31로 표기해줘야한다.

지정한 시작일 기준 한달간의 범위 잡아 표시

시작일을 1일로 설정한 경우, 마지막 날짜가 해당 월의 마지막 일자가 될 수 있도록 조건문을 추가했다.

img02

Date 객체에는 자동고침 기능이 있는데, 범위를 벗어나는 값을 설정하려고하면 자동으로 값이 수정된다.

let date = new Date(2022, 0, 0) 에서
0일은 존재하지 않기 때문에, 전달의 마지막 날짜인 2021년 12월 31일을 출력한다.

let date = new Date(2022, 0, 32) 를 입력한다면
32일도 존재하지 않으므로 다음달의 첫 날인 2022년 2월 1일을 출력한다.

Date객체와 날짜
JS 달력 만들기



2022.11.16

로컬에 데이터가 있다면 spend 페이지 렌더링

데이터 저장, 화면에 출력, 화면전환 과정의 코드를 두개의 함수로 분리했다.

setBudgetData 입력한 데이터를 저장하고, generateSpendSummary를 실행한다.
generateSpendSummary spend-summary에 저장한 데이터를 넣고 화면을 전환한다.

img03 이제 저장된 데이터가 있으면 바로 spend 화면이 보여진다.

소비내역 추가 모달 및 리스트 스타일링

소비내역을 추가할 수 있는 모달을 마크업하고 스타일링 했다.
역시나.. 여기서도 추가 이슈들이 우르르 더 생겼다.

  • 캘린더를 불러와야하고
  • 처리된 줄 알았던 금액에 콤마 더해주는 함수가 전체적으로 적용될 수 있게 해야하고
  • 아이콘 폰트 업데이트
  • 각종 버튼 처리도 해주고
  • 추가 데이터들도 저장해줘야한다.



2022.11.17

아이콘 폰트 업데이트

추가로 디자인하는 화면들이 생기면서 아이콘 폰트 업데이트가 필요했다.
과정은 복잡할 것이 없는데, 엉뚱한 곳에서 헤매느라 시간을 썼다.
뭐든 import 할 때는 경로를 잘 확인하자….

소비내역 추가 모달 구현

소비내역을 추가하는 모달을 스일링하고, 필요한 부분에는 데이터를 반영시켰다.
input, select, button 등 기본 스타일을 클래스로 만들어놔서 css 작업은 금방 했다.

날짜를 불러오는 input은 type='date' 로도 해결할 수 있으나,
완전히 내가 원하는대로 커스텀 하기 위해 button으로 구성해 오늘 날짜를 출력하고
아이콘을 누르면 캘린더 모달을 띄워 원하는 날짜를 선택할 수 있도록 할 계획이다.
언젠가 시도해봐야지 했던 grid 도 달력을 만들면서 사용해봐야겠다.

img04



2022.11.19

달력 모달 구현

달력을 만들면서 해결해야하는 이슈들이 많아 시간이 꽤 걸렸다.

  1. overlay, z-index
    모달 구현을 위해 overlay div를 만들고 z-index.scss 파일을 생성해 z-index를 별도 관리할 수 있도록 정리했다.

  2. display: grid
    grid를 처음 사용해봤는데, 앞으로 아주 유용하게 쓸 수 있을 것 같다.
    flex가 가로 혹은 세로의 1차원 레이아웃을 구현한다면, grid는 가로세로를 한번에 정의해 2차원적 레이아웃 구현이 가능하다.

    드림코딩 - CSS grid 완전 정리
    1분코딩 - 이번에야말로 CSS Grid를 익혀보자

  3. 달력 렌더링
    달력을 렌더링하는 함수를 만들고, 주말에는 다른 컬러가 적용될 수 있도록 조건문을 달았다.
    반복문으로 각 날짜div를 추가하는데, i날의 getDay()가 0(일요일) 혹은 6(토요일)인 것에 클래스를 추가했다.

  4. 이전달, 다음달 렌더링
    setMonth()라는 메소드를 이용해 월 정보를 바꿔서 달력렌더링 함수에 인자로 넘겨줬다.
    그려면 달력렌더링 함수는 바뀐 월 정보를 받아 렌더링 하게된다.

  5. 오늘 날짜 표시
    요일 표시와 같은 방법으로 i값이 오늘날짜와 같다면 today 클래스를 추가해줬다.
    그런데 이전, 다음달로 이동했을때도 오늘 일자에 today 컬러 표시가 되는 문제가 있었다.
    처음에는 월 이동 함수에 today 클레스를 제어하는 방식으로 해결하려고 했으나,
    애초에 today 클래스를 부여할때, month가 진짜 오늘 날짜의 month값과 같은지 확인하는 조건문을 추가하니 해결!

  6. 원하는 날짜 선택
    event.target을 잡아 selected 클래스를 추가해 스타일링 했다.
    모든 날짜div를 잡아놓고 날짜선택 함수를 실행할때 selected 클래스를 제거해줘야 중복 표시가 안되는 이슈도 있었다.
    전체적으로 변수의 위치를 전역에 둘지, 함수 안에 둘지 정하는 것도 중요한 부분이었다.

  7. 선택한 날짜 값 반영
    selected의 기본값은 오늘 날짜이고, 그 외 내가 다른 날짜를 선택했다면
    selected를 가진 div의 값을 가져와 소비내역 input에 반영하도록 했다.

  8. 모달 닫기
    선택완료 버튼을 누르거나, 모달 밖을 눌렀을때 모달이 닫히는 기능을 구현했다.
    여기서 내가 선택한 날짜 데이터를 가져와 input에 표시해줘야하는데,
    그 데이터를 어떻게 저장해서 가지고 올지 한참 고민했다.

    오늘 이외의 날짜로 selected를 바꾸거나, 다른 달로 변경할때마다 변수의 값을 바꾼다음
    달력 모달을 닫을때 바뀐 데이터를 다시 innerText 해주는 방식으로 해결했다.

    바닐라로 프로젝트를 만들면서..
    화면을 조작해야하는 상황들이 많아질수록 리액트의 장점이 생각난다.
    그렇지 바닐라로는 데이터나 상태값이 달라질때마다 렌더링을 새로 시켜줘야하지…
    어쨌든 달력하나 만들어놓고 너무 재밌고 뿌듯하고 기쁘다 😘

img05



2022.11.20

모든 money-input에 콤마 추가

전에 intro-setting 할때 만들었던 toCurrency 함수를
money-input 클래스를 가지고 있는 모든 요소에게 적용시키기 위해,
querySelectorAll 로 모든 요소를 잡아오고 forEach 메소드를 이용해 이벤트를 붙였다.

img06

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

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



매번 부딪히는 문제들이 막연하고 답답하다가도 결국 조금씩 해결해 나가는게 재밌다.
어느새 프로젝트를 시작한지 3주가 되었고, 다음주에는 기본 기능 구현을 마무리 해보는게 목표!

Leave a comment

You may also enjoy