[TOY] 가계부 만들기 7주차 : 다시 리팩토링 & 마무리
이번주 주간 목표
이번엔 조금 더 유의미한 리팩토링 하기.
함수를 하나의 목적에 맞게 모듈화하고 재사용성을 높여보자.
정리가되면 남아있는 기능을 호로록 진행할 수 있지 않을까 😂진도가 늘어져서 걱정이긴한데,
좀 더 좋은 코드에 대한 고민도 의미가 있겠지 하며 한 주 더..
2022.12.14
두번째 리팩토링
며칠동안 아파서 아무것도 할 수가 없었다.
진짜… 공부도 마음만으론 할 수 없다 ㅠ 체력이 제일 중요!
깨끗한 함수란 무엇인가?
마침 클린코딩과 관련해서 영상들이 많이 보여서 틈틈이 봤다.
클린코드 책도 구매했다. 공부할게 줄줄이 대기중 ㅎㅎ
함수 이름부터 정리하기
이제 코드들이 마구 얽혀있어서 정리가 쉽지 않다.
그래서 일단 필요한 함수의 이름부터 정의해 쭉 적었다.
함수가 해야하는 역할을 대략적으로 적어놓고, 연결되어야 하는 함수들을 연결시켰다.
하나의 함수가 하는 일을 명확히하면서 정리하니 저번보다 좀 더 유의미한 리팩터링이 되는 것 같다.
필요한 역할을 정의하고 네이밍부터 신경쓰면 함수 내용을 자연스럽게 정리할 수 있다.
2022.12.15 ~ 17
드디어 두번째 리팩토링 완료!
두개의 js파일에 애매하게 나뉘어 있던 것을 한 파일로 가져와서 쭉 정리했는데,
다 서로 얽혀있는 함수들이다보니 파일을 어떻게 분리해서 정리할 수 있을지가 또 고민이다.
일단은 한개의 함수가 가지는 목적을 명확히하고 정리하니 막힌 기능 구현도 자연스럽게 해결됐다.
개발하면서 가장 어려운 부분이 좋은 네이밍을 하는 것이라 하던데
이제 진짜 그 의미를 알 것 같다.
딱 적절한 이름을 잘 찾아내면 코드 구현이 훨씬 자연스럽고 쉬워지는 경험을 하고 있다.
예산 추가 버튼 기능 구현
로컬에 저장하는 데이터 객체에 section 속성을 추가하고 spend와 budget값을 가지도록 했다.
list에도 budget 클래스를 추가해 동작이 구분될 수 있도록 했다.
예산 리스트는 다른 소비내역 리스트와 섞여서 들어가지만 텍스트가 파란색으로 잡혀야한다.
이 부분때문에 카테고리, 타이틀, 금액을 각각 잡아서 스타일 클래스를 추가하려 했으나
리스트를 생성하는 함수에서 template로 만들어 innerHTML하는 부분이라
각 세부 요소를 잡아오기가 애매했다.
그래서 blueTemplate를 만들어 조건에 따라 innerHTML되도록했는데..
이 방법이 괜찮은건지 아직 판단은 안된다 ㅎ
리스트 수정 및 삭제 기능 구현
여기서 삭제 기능이라 해도 로컬에 저장한 데이터를 삭제하는 개념은 아니다.
나는 리스트의 세부항목 정보들을 객체에 담고, 그 객체(리스트)를 array에 넣어 저장했기때문에
결국은 저장된 array 데이터에서 타겟 인덱스에 해당하는 정보만 교체 혹은 삭제하는 것이 된다.
target list의 index를 잡아와서, 해당 index 자료를 업데이트하거나 삭제하겠다는 생각으로 접근했다.
list를 클릭해서 수정 모달을 열때 index는 잡아올 수 있는데,
그 외에 변하면 안되는 id값은 어떻게 잡아올 것 인지.. totalSpend값과 budget값은 어떻게 수정하게 할 것인지..
이거 시간 좀 걸릴거같은 느낌이 든다. 역시 그냥 넘어갈 수 있는게 없네 😊
헷갈릴때는 필요한 동작을 쭉 나열해서 적어보자.
리스트 삭제하기
- 특정 리스트를 클릭할때 해당 데이터의 인덱스 값을 잡아온다.
- 잡아온 인덱스 값을 전역변수에 저장해서 활용해보자.
- ‘삭제하기’ 버튼을 누르면 spendListData 배열에서 해당 인덱스를 splice 시키자.
- 변경된 spendListData를 로컬에 저장하고, 리스트를 리렌더한다.
- 삭제한 리스트의 section을 구분해서 totalSpend 혹은 budget값에서 빼고 로컬에 저장한다.
필요한 기능의 동작 순서를 먼저 정리하면 써야하는 코드가 명확해진다.
리스트를 삭제하는 것이기 때문에
합계 금액을 계산하는데 사용했던 calcTotalMoney의 이름을 plusTotalMoney로 바꾸고,
minusTotalMoney를 추가로 만들었다.
코드는 플러스 마이너스만 다르고 완전히 똑같은데.. 이런경우에도 함수를 목적에 따라 분리하는게 맞는거.. 겠지??그리고 바닐라 자바스크립트 프로젝트를 하면서 가장 많이 느끼는 불편한 부분은
상태값이 변경되었을때 자동으로 리렌더 해주지 않는 것..
리스트를 삭제하고 반영할때, 리스트 전체 영역을 비워주고 다시 렌더링 시켜야했다.
리스트 수정하기
- ‘저장하기’ 버튼을 통해 submit 함수가 실행될때 버튼에 modify 클래스가 있으면 modifySpendList를 실행한다.
- 잡아온 인덱스값의 데이터에서 id값은 가져오고, 나머지는 현재 input에 입력된 값을 객체에 담는다.
- spendListData[index] 내용을 새로운 객체의 내용으로 할당한다.
- 변경된 spendListData를 로컬에 저장하고, 리스트를 리렌더한다.
- 바뀐 리스트의 section을 구분해서 totalSpend 혹은 budget값에서 빼거나 더하고 로컬에 저장한다.
입력한 값과, 새로 입력한 값을 비교해서
새 값이 크면 plus함수를 실행하고, 새 값이 작으면 minus함수를 실행하도록 했다.
자료 타입 교통정리
지금 금액들어가는 부분에 toLocaleString('kr-KO')를 사용하면서 데이터 타입이 string으로 바뀌고있다.
또 로컬에 저장하기때문에 number값도 string으로 타입이 변경된다.
근데 이 타입이 어디에는 문자로, 어디에는 숫자로 필요하기 때문에 교통정리가 필요했다.
파라미터를 이용해 3가지 경우의 수에 필요한 코드를 알아서 붙여주는 함수를 만들어봤다.
1
2
3
4
5
6
7
8
9
function moneyValueType(value, func, key) {
if (func == "set") {
return localStorage.setItem(key, value.replaceAll(",", ""));
} else if (func == "get") {
return parseInt(localStorage.getItem(key));
} else if (func == "innerText") {
return value.toLocaleString("ko-KR");
}
}
근데 이건.. 막상 적용시켜보니 코드의 의도를 더 헷갈리게 만들었다.
localStorage.setItem('totalSpend', 0)
이라고 쓰면 totalSpend 이름으로 0값을 저장하는구나 알 수 있지만
moneyValueType(0, 'set', 'totalSpend')
이렇게 함수를 활용하면 함수를 다시 뜯어봐야 무슨 기능을 하는지 알 수 있는 것 같다.
또 key나 value 파라미터값이 필요하지 않은 경우도 있어서 오히려 어려워졌다..
그래서 일정하게 잡아놓은 money 값 타입의 기준을 read me 문서에 정리해서 적어보았다.
그래서 결국 소비 혹은 추가예산 리스트를 추가하고, 수정하고, 삭제하는 기능 모두 구현 완료!
리스트 추가하기
리스트 수정하기
리스트 삭제하기
테스트 하는 것 외에 다양한 사용 패턴이 있을 수 있고
그에 따른 예상하지 못한 버그들이 마구 발견될 것이기 때문에,
나도 실제 사용자가 되어 어플을 써보고 주변사람들에게도 써봐달라고 해서 제보를 받아야겠다.
(언젠가 꼭 백엔드 기능 붙여 제대로 사용할 수 있게 만들고 싶다…)
2022.12.18
GNB 메뉴 구현
GNB는 메뉴 패널만 띄우고 준비중 페이지까지만 띄워보는 것으로..
진짜 기능들은 react로 다시 만들면서 구현해봐야겠다.
setting 아이콘 버튼 기능 구현
아이콘 클릭 시 setting 페이지가 다시 열리고 초기 셋팅값을 바꿀 수 있게 하려고 한다.
지금은 예산추가 기능을 이용해 리스트를 만들면서 초기 budget 설정값이 변형되었는데,
innitial budget data를 별도로 저장해두어야 할 것 같아서
설정한 예산 데이터는 budget으로,
이번달 가용금액으로 등록하는 리스트 (추가예산) 금액은 totalIncome으로 분리했다.
이래서 기획이 확실하지 않으면 고생이다 ㅠㅠ
기획을 정말 대략적으로 잡고 시작한거라 개념적인 부분이 바뀔때마다 전체적으로 갈아엎느라 고생..
전 회사에서 밑도끝도 없이 갈아엎히는 기획에 고생했던 시간들이 생각나네..
페이지가 점점 일정한 동작 순서없이 유기적으로 연결되면서 함수 위치가 꼬인다.
여기저기서 다 필요한 함수는 global.js 파일로 분리해두긴 하는데, 이것도 영 명쾌하진 않다.
리액트로 재구성해보면 이런 문제점들은 다 해결되겠지?
실무에서 바닐라 자바스크립트를 사용할 일이 있다면 어떻게 이런 문제들을 해결할까??
어쨌든 setting값 수정 기능 구현 완료!
기본 기능 구현을 완료했다.
드디어 처음에 계획한 기본 기능을 모두 구현했다.
그동안 강의의 굴레에 빠져있다가 처음으로 혼자 만들어본 프로젝트여서 의미가 크다.
주변 지인들에게 이래저래 사용해보고 오류가 있으면 제보해달라고 부탁했다.
개선해야할 부분들이 많고 새로 발견하는 버그들도 넘쳐나겠지만
난 이 프로젝트를 잘 발전시켜서 야무지게 써먹고자하는 열쩡이 있기 때문에
지속적으로 애정을 쏟아볼 계획이다.
이제 수정해야하는 내용들은 투두리스트에 차곡차곡 쌓이는중 ㅎㅎ
일단 목표만큼 마무리했음에 기뻐하자!
Leave a comment