Dony :)

FE로 성장 중 🌱

아~~~~주 오랜만에 쓰는 회고록..

TIL 🧐

  • Context API
  • useReducer
  • eslint Airbnb

주절주절

이번 주, 다음 주는 오랜만에 다시 개인 프로젝트 기간이다.
지난 주 리액트 첫 플젝을 럼카와 함께 했는데 이번 주에 혼자하려고 하니 좀 막막했다..
럼카가 혼자했던 부분을 방학이 지나고 나니 다 잊어버린거 같다 🥲
eslint 문법이 빡빡해서 에러가 뜨는 이유도 검색하고, 리액트 문법도 아직 모르는게 많다 보니 함께 검색하느라 시간이 더 걸린거 같았다 ^_ㅠ
eslint 꺼버릴까 고민도 계속 했지만 아직 리액트를 잘 모를 때 습관을 잘 들여놔야할 거 같아서 꾹 참고 했다.
이번 주는 기능도 쉽진 않았지만 상태 관리에 고민을 더 많이 했던거 같다.
props drilling 을 없애기 위해 Context 사용했는데 Context를 제일 최상단에 보내게 되면 하위의 모든 컴포넌트들이 사용할 수 있고, 그로 인해 재렌더되는 컴포넌틀이 많아지기 때문에 최대한 사용하는 컴포넌트들 안에서 제일 상단에 올리려고 고민을 많이 했다.
조원들을 보니 하나의 Provider로 모아 사용하는 방식으로 하신 분들이 많았다.
깔끔하고 관리하기 편해보이는 방식이라 어느 방식이 나을지 몰라 PR에 여쭤보았다.
현재 4개 Context를 사용하고 있는데, App이랑 VendingMachine 두 개의 파일에서 2개씩 나눠 사용하고 있는데 위의 방식을 섞어 두 개를 묶는 방식도 고민이다.

eslint에서 Context에 value로 사용하기 위해 useState를 구조분해할당하여 객체로 묶어 넘겨주니 렌더될 때마다 새로운 객체를 생성하기 때문에 useMemo를 사용해서 넘겨주라고 되어있었다.
useMemo를 사용하면 메모리에 저장되기 때문에 굳이 그렇게 해야할까 싶어서 구조분해할당을 하지 않고 통째로 넘겨주고 사용하는 곳에서 구조분해하여 사용하였는데 크롱이 헷갈릴 수 있고 어색한 문법이다고 해서 고민해봐야할 거 같다.
리액트가 아직 손에 익지 않아서 그런지 수욜까지 딱히 재밌지가 않아서 힘이 안났는데 구현이 조금씩 되면서 재밌어진거 같다.
빨리 리액트랑 더 친해지고 싶다 🧐

아쉬워요 🙁

이번에도 PR을 제 시간에 내지 못해 크롱에 또 걸려버렸다 😅
그래도 예전보다는 일찍 내고 있으니 다음 번에는 꼭 제 시간에 내도록 노력해야지..ㅎㅎ..
시작하기 전에 설계랑 정리를 하긴 하지만 좀 더 꼼꼼히 해보고 싶어 이번에 시간을 많이 썼더니 기능을 많이 못한거 같다.
항상 기능을 다 못했어서 이번엔 다하고 싶은데.. 손을 좀 더 빨리 움직였으면 좋겠다.
손 빠른 사람들이 정말 너무 부럽다 ㅠ_ㅠ
빨리 하고 저녁엔 좀 쉬어보고 싶다 😭

잘했어요 🙂

우선, 정말 eslint 꺼버리고 싶은 맘이 굴뚝같았지만 끝까지 참은 점!!
그리고, 항상 README랑 정리에 공을 들이지 않았는데 이번에 해야할 일들을 task로 적어놓고 하나씩 체크하며 하니
어디를 더 해야겠구나 순서가 정리되서 너무 좋았다.
플젝 끝나기 전에 README 정리도 꼭 해야겠다!
이번 주에 조원분들이 다 넘 좋아서 리뷰 시간에 얘기도 많이 하고 좋았다 완전 ㅎㅎ
다음 주도 이번 주랑 같은 조로 하는거 같던데 더 많이 토론했으면 좋겠다 ㅎㅎ

참고