On a couch
Todolist 만들기 본문
기간
오전 10시 ~ 오후 8시 정도
결과물
레포 : https://github.com/sol-namoo/colorful-todolist
배포 : https://sol-namoo.github.io/colorful-todolist/
디자인
레퍼런스 : https://pomofocus.io/app
피그마 작업 : https://www.figma.com/file/mPPEM8nsPQyThD45Fc2373/%EA%B0%9C%EC%9D%B8%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8---todolist?node-id=1%3A3
과정 + 참고자료
State 설계
* 삼항연산자 중첩 사용법
https://jong-hui.github.io/devlog/2020/08/12/(JavaScript)-nested-ternaries-operation/
* tab에서 선택된 메뉴에만 스타일 적용하기
메뉴들을 array에 담은 뒤 map을 돌려서 isActive 속성값을 동적으로 생성
* localstorage에서 받아와야 하는 데이터가 3종류이고, 이걸 데이터를 받아 쓰는 방식으로
(1) 그때그때 받아서 하나의 state에 저장해서 쓰기
(2) 각각의 데이터를 각각의 state 에 저장해 두었다가 돌려가며 쓰기 (커스텀훅 만듦)
두 가지를 떠올렸다
하나를 시도해보다가 나머지가 나은 거 같아서 다른 방식으로 수정하고, 나중에는 코드에 두 가지가 섞여서 뒤죽박죽이 됐다..
(2)를 사용하면 내려보내야 할 props가 3개 늘어나는 꼴이라, 결국 다 정리하고 (1)방식을 사용했다.
* tab별 리스트를 저장하는 것과 같은 방식으로 checked 리스트를 저장했다.
그냥 각 item에 isChecked를 설정했더니 탭을 이동하면 체크 여부가 초기화되더라고.. ㅇ<-<
* 도저히..! 수정할 때 input창에 초기값이 왜 안 들어가는지 모르겠다..!
새로 만드는 것이 아니라 이미 작성된 task가 있고 그걸 수정할 때에는 task를 props로 내려주려고 했는데, 도저히 원하는대로 작동하질 않는다.
const [input, setInput] = useState(task)
console.log(input) //-> task
//중략
<input
input={input} // input창에 아무 값도 들어가 있지 않음
onChange={handleInputChange}
placeholder='What are you working on?'
></input>
Styled componbent 사용
* export할 function 밖에서 정의해야 한다
* Styled component 잘 사용하기
https://insindema.tistory.com/49
* Styled component의 GlobalStyle에도 props를 내려줄 수 있을까?
=> 가능!
=> 내려준 것 사용할 때 ${ props => ( ) } 로 소괄호 사용하기. 대괄호 아님!
Localstorage 사용
* 로컬스토리지와 세션스토리지 사용법
https://www.daleseo.com/js-web-storage/
* react에서 웹스토리지 사용하기
(적용하는 과정에서 무한루프로 오류가 났는데 어떻게 해결됐는지 모르겠다. 화살표함수로 한 번 감싸줘서 그런가?)
https://www.daleseo.com/react-hooks-use-web-storage/
UseEffect는 중요하다
tab 상태는 바뀌는데 그 상태값을 사용하는 컴포넌트들에 변화가 없어서 useEffect로 렌더 후 변경을 반영하도록 설정해 주었다.
github pages로 배포
이왕이면 actions를 통해서 ci/cd 실습이 더해지면 좋겠다
회고
- todo list를 쓸 때마다 내가 원하는 기준대로 분리해서 보고 싶은 생각이 있었는데 그걸 내가 직접 만들게 될 줄은 몰랐다 ㅎㅎㅎ
- 포모도로 사이트 쓸 때마다 내 입맛에 맞게 '딱 요만큼'만 바꿔보고 싶다는 생각이 있었는데 결국 시작하게 되어 기분이 좋다!
- styled component 사용이 항상 어려웠는데 이번 기회에 general style 설정법, 필요에 따른 style 설정과 상속을 연습해 볼 수 있었다.
- localstorage에서 정보를 읽어오는 함수를 구현하는 데 이렇게 했다가 저렇게 했다가 하니 바꿀 때마나 오류가 났다. 일단은 어떻게든 기능을 구현한 다음에 리팩토링하는 순서로 가는 게 오히려 시간이 덜 걸릴 수도 있을 것 같다.
- 만들면서 새로운 component로 분리해야 하는 상황이 오거나 props가 늘어날 때마다 '이게 맞나' 동공지진이 오고 멘탈이 흔들렸다. 특히 수정 기능 추가할 때.. 혹여나 어디 잘못 건드려서 망할까봐 계속 긴장하면서 로직을 따라가려고 했다.
- 분명히 코딩 공부 초반에 바닐라로 비슷한 앱 만드는 강의를 들었었는데 이게 이렇게 어려운 기능이었나 싶고.. 만들다가 문득 생각나서 예전에 메모해 놓은 것 봤었는데 역시나 '이미 배운 거였군. 이해를 못해서 머리에 안 남아 있을 뿐'을 다시 느꼈다.
- 하루 안내 끝내겠다고 어떻게든 앉아 있었더니 엉덩이뼈가 너무 아프다 ㅋㅋㅋ 지난번 개인 프로젝트 때는 너무 욕심을 많이 내서 반도 만들지 못해 의기소침해졌는데 이번에 도전할 때는 시간 내에 필요한 것만 검색해서 만들 수 있을 정도가 됐다. 나름 뿌듯!
더 해볼 것
* json-server 활용해 fetch 통신으로 데이터 받아오기
https://urclass.codestates.com/content/d6cff4fe-e2f2-4355-ab50-2933a05cb4c9?playlist=2377
- 단순히 데이터를 받아오는 작업만 필요할 때, json 더미데이터를 만들어 두면 혼자서도 간편하게 http 통신을 연습할 수 있어서 좋은 것 같다. 같은 기능을 json-server로 만들었다면 아마 좀 더 간단했을지도 모르겠다
* 레퍼런스 사이트의 원래 기능인 타이머도 추가하면 좋을 듯. 원하는 시간으로 루틴을 만들어서 반복할 수 있고 중지와 시작이 자유롭게 해야겠다. 자전거 인터벌 돌려야지.
* 할 일을 모두 완성하면 폭죽 터지는 애니메이션 넣고 싶은데.. canvas 복습이 필요하겠다.
'혼자 발버둥 > 개인 결과물' 카테고리의 다른 글
| 식당 웹사이트 리뉴얼 프로젝트 (22.05.04~) (0) | 2022.05.14 |
|---|---|
| 기초 02 링크 스크랩북, 주문 페이지 (0) | 2022.01.19 |
| 기초 01 식당 홈페이지 (0) | 2022.01.19 |
