[Weekly I learned] 4월 3주차

yeon·2023년 4월 22일

☑️ 이번 주 정리

1. 프리온보딩 인턴십 지원 과제 리팩토링, 제출

기능 구현이 완료된 지원 과제에 전반적인 UI 조정과 코드 리팩토링을 한 후 수요일에 제출했다.

API, 중복되는 Styled-components 관련 코드는 따로 빼고, 가독성을 위해 컴포넌트를 분리했는데 props drilling이 우려되어서 충분히 컴포넌트 분리를 하지 못했다. Recoil이나 Redux로 상태 관리를 하고 싶었지만, 과제 조건이 npm start만 입력하면 작동되도록 구현하는 거라서, 따로 상태 관리 라이브러리를 사용하지 못해서 아쉬움이 남는다. context API를 사용하는 방법도 있었지만, 제출 기한 관계상 무리가 있어서 포기했다. 추후에 context API를 공부해서 리팩토링해야겠다.

2. React To Do List - Redux 리팩토링

지난 주에 구현했던 React To Do List 리팩토링을 진행했다.

Redux를 사용해서 상태관리를 한 덕분에 props drilling 걱정 없이 컴포넌트를 더 세세하게 분리할 수 있었다. 그리고 그동안 Recoil로 상태 관리를 하느라 Redux 사용법을 잊고 있었는데, 이번에 정리하면서 다시 복기하는 기회가 되어서 좋았다! Redux가 사용하기 까다로운 만큼 어려운 개념을 정복했다는 기분이 들어서 너무 뿌듯했다 ^^v

프로젝트에서 종종 사용하는 button과 modal, input, select 컴포넌트를 조건별로 구현하는 연습을 했다.

props를 활용한 조건부 Styled-components를 연습할 수 있었고, select의 경우 option 태그에 따로 CSS를 입힐 수 없다고 해서 Custom select를 만들어서 구현했다. 이 과정에서 CSS 코드 가독성이 떨어져서 좀 더 깔끔한 코드를 짜려면 어떻게 해야할까 고민을 많이 하게 되었다.

그리고 부모 컴포넌트에 overflow:hidden이 적용됐을 때, 적용되는 자식 컴포넌트와 적용되지 않는 자식 컴포넌트를 따로 구현했는데 꽤 시간을 오래 잡아먹어서.. CSS에 대해 꾸준히 공부할 필요성을 느꼈다.

☑️ 반성

기능 구현을 할 때 시간 할애가 많이 돼서 블로깅이 좀 밀렸다.. 새로운 지식을 배운 즉시 블로깅해야겠다. 각 잡고 완벽하게 블로깅을 해야 한다는 강박을 버리고 대충이라도 빠르게 배운 점을 적어놔야겠다. 새로 배운 기능이 정상적으로 작동하더라도 그걸 기록하고 충분히 이해하지 않으면, 그 기술을 알고 있다고 할 수 없다.