프리온보딩 2번째 과제(상품 등록 페이지) 회고
Facts (사실, 객관)
- 과제를 구현하는데 필요한 기능과 조건이 맞아 100% 구현하지 못했다.
- 기존에 학습한 redux를 활용하지 못하고 useContext를 이용한 상태 관리를 하였다.
Feelings (느낌, 주관)
- 설 연휴가 겹쳐 생각보다 정리를 늦게 하였다.
- 이번 과제는 구현할 기능이 많아 오래걸렸는데 기존에 알고 있던 지식을 활용하지 못해서 아쉬웠다.
Findings (배운 점)
🧇 Object.entreies, Object.keys ,Object.values
벨로그 정리 링크
리액트 특성상 객체 타입을 다루는 경우가 많은 거 같다.
기존에 알고 있는 함수를 잘 활용하지 못하여 이번 기회에 정리해 보았다.
🧇 useContext, redux와 차이점
- 결론적으로 보면 Context API와 Redux는 사용법과 그 구조에 조금 차이가 있을 뿐 전역 상태를 관리한다는 점에서는 유사합니다. 애초에 Redux가 Context API를 기반으로 만들어진 것이기 때문이기도 합니다.
- 단순 전역 상태 관리만 있어도 된다면 Context API, 디버깅이나 로깅 등의 상태 관리 외의 기능이나 미들웨어가 필요하다면 Redux를 사용하는 것이 좋다고 여겨집니다.
기존에 학습한 redux 대신 팀원들과 협업할 수 있는 useContext로 프로젝트를 진행하였다.
둘 다 전역 상태로 상태관리한다는 공통점이 있지만 사용 방법에서 차이가 있었으며 Redux를 채용 조건으로 하는 회사가 많아짐에 따라 학습이 더 필요해 보였다.
🧇 Portal을 활용한 Modal 창 만들기
- ReactDOM에서 제공하는 Portal은 컴포넌트를 렌더링 할 때, 부모 컴포넌트의 DOM 외부에 존재하는 DOM 노드에 렌더링 할 수 있게 해준다.
이번 프로젝트에는 hook으로 modal을 처리하는 방법을 배웠다.
코드참고
src > components > base > Modal
🧇 Throttle, Debounce
벨로그 정리 주소
정의한 데이터 베이스에 filter와 키워드를 활용하여 검색 기능을 구현하였다.
구현한 throttled를 useEffect로 한 번 더 감싸주지 않으면 에러가 발생한다.
Affirmation(자기 선언)
- 팀과 열정적으로 프로젝트를 진행하면서 뒤처지지 않게 노력하고 있다.
- 팀원이 도움을 요청했을때 도움이 될 수 있게 노력하자!
