TWIL #13 | React로 상태 관리 & 뽀모도로 타이머 제작!

 

📝 TWIL(This Week I Learned) 작성 가이드
1) 이번 주 한 일, 느낀 점, 배운 점을 작성한다. (3Fs, 1~2번에 해당)
2) 앞으로 개선할 점 등 어떻게 하겠다는 실천계획을 구체적으로 작성한다. (Future Action Plan, 3번에 해당)
3) 다음 TIL을 작성할 때 FAP가 제대로 지켜졌는지 피드백을 작성한다. (4번에 해당)

- 참고: 5Fs, 뒤돌아보다

---

1. Facts (사실, 객관)

- React useStore로 상태 관리를 구현하였다.
- 매일 TIL로 React에 개념 정리를 하였다.
- 퀘스트 과제로 뽀모도로 타이머를 만들었다.

2. Feelings (느낌, 주관) & Findings (배운 점)

1) 상태 관리 이제 좀 알 거 같기도...
예전에 React 배울 적에 상태 관리로 Context API와 Redux에 대해서 공부했었는데, 그때 당시까지만 해도 너무 어렵게만 느껴졌었다. 당연히 상태 관리가 필요하지만 그냥 props만 평생 쓰고 살면 안 되나요.. 했던 마음뿐이었는데 useStore라는 개념으로 차근차근 만들어보니까 전반적인 흐름이 이해 가는 것이다! 이번 주의 엄청난 수확!🌾

11/13 TIL | Flux 패턴이란?

11/16 TIL | React 상태 관리 라이브러리 useStore-ts! 마이크로스토어로 가는 길🚶🏻‍♀️

 

2) 매일 React 개념 정리
확실히 나는 프론트 vs 백 하면 프론트이구나.. 싶을 정도로 이번 주 TIL은 너무나도 즐겁게 작성하였다. 작성하면서 그냥 대충 알고 넘어갔었던 부분들도 다시 정리하게 되는 계기가 되었고, 더 많은 토픽이 생겨 사실 엄청난 공부량이 생겼지만!! 그래도 Deep dive할 생각에 더 설레~ 모아놓고 보니 꽤 그럴듯해 보인다!

11/14 TIL | React Virtual DOM의 재조정(Reconsiliation)

11/15 TIL | React의 Virtual DOM은 과연 빠른가?

11/16 TIL | React 상태 관리 라이브러리 useStore-ts! 마이크로스토어로 가는 길🚶🏻‍♀️

11/17 TIL | React 성능 최적화 1탄. React.memo & React.PureComponent

11/18 TIL | React 성능 최적화 2탄. 참조형 타입 & 얕은 비교

 

3) 뽀모도로 타이머를 만들다.
이번 주 퀘스트 과제는 뽀모도로 타이머를 만들었다(과제 안내에서는 저작권 때문인지 뽀그로 타이머라고 안내되어 있음). 기본적으로 '작업 모드', '공유 시간', '쉬는 시간'이 있으면 해당 모드마다 타이머가 끝날 때마다 노래가 나오고, 체크를 해야 다음 모드로 넘어가는 방식이다.  안내로 주셨던 UI 디자인은 사실 이게 아닌데 사실 로직이 중요하지, 디자인까지는 똑같이 할 필요 없다 생각 들어 한번 이렇게 꾸며보았다.

시간이 종료되었음을 알려주는 노래는 사심을 넣어 NCT 노래들로! 나름 모드 별 무드에 맞춰서 선곡하였다..!ㅋㅋㅋ

- 작업 시간 끝나면: NCT U - Sweet Dream
- 공유 시간 끝나면: NCT 127 - 윤슬 (Gold Dust)
- 쉬는 시간 끝나면: NCT Dream - Fire Alarm

뽀모도로 타이머 데모 영상

그리고 상단의 '시간 세팅' 버튼을 클릭하면 시간을 모드 별로 시간을 세팅할 수 있다.

추가로 나만의 기능을 하나 더 추가해야 해서 나는 랜덤 명언 API 사용해 오늘의 명언을 랜덤으로 불러오는 기능을 만들었다.

'다른 명언 보기' 버튼을 클릭하면 새로운 명언을 불러온다. 사실 한국어로 된 랜덤 명언 API는 없어서 내가 목데이터로 data.json을 따로 만들어 fetch 받는 형식으로 하려고 했으나 무슨 이유에서인지 계속 public에 선언된 data.json이 반환되지 않는 것이다;; 우선 과제 제출을 위해서 영어 랜덤 명언 API를 사용했지만, 이 부분은 무슨 이유 때문이었는지 한번 확인하려고 한다! 다시 해봤는데도 안되면 메가 오버플로우에 올려보는 것으로..!

3. Future Action Plan (미래의 행동 계획)

우선 저번 주간 회고에서 세웠던 액션 플랜은 작업에만 집중하는 것이었는데, 달성하였다. 이번 주는 full 집중할 수 있었던 한 주! 다만 아쉬운 점은 이번 과제도 테스트 커버리지를 100% 챙기지 못했다..😅

차마 hooks와 stores까지는.... 다 챙기기 너무 힘들었달까.... 대신 컴포넌트 테스트 커버리지 테스트를 모두 챙겼다! 그래도 내 포폴 만들 때는 진짜 모든 파일은 100프로 챙기는 것으로!!!!!!!

- 포트폴리오 테스트 커버리지 100% 챙기기

- 14주차 강의 충실히 인출하기

4. Feedback (피드백)

(다음 주에 채워질 예정 💬)

---

드디어 내일은 14주차.. 공식적으로 강의 스케줄은 마지막인데! 그래서인지 풀스택 강의로 14시간짜리.. 역대급 분량에 해당한다고 한다.. (선배 기수들의 TIL 보고 앎;;) 그래서 13주차 과제를 어떻게든 금요일 안에 끝내야 토요일부터는 바로 다음 주차 강의에 충실할 수 있기 때문에 열심히 달렸다. 이번 한 주도 고생 많았다~ 근데 더 고생하자 보니야~!~!!💪

+) 🍀 Epilogue

과제로 올렸던 PR이 거의 몇 주째 merge하지 않아 엄청 많이 쌓여 있었는데, 나는 그냥 점심 먹고 노래 들으면서 하나하나 merge 해줬었다. 근데 옆자리 똑쟁이 쥬쥬가 자동화 스크립트를 만들어서 공유해줬다! 시간 절약하고 완전 굿인 것~~ 나도 이렇게 자동화할 수 있는 것들에는 자동화해보려는 시도를 해야겠다!!