Assignment Overview
제시된 기획서에 따라 어드민 페이지를 기획.
구체적인 기능들은
- 라이브러리를 활용한 dateTimePicker 커스터마이징
- 라디오 버튼과 관련한 상태값 관리 및 상태값 토글 기능
- 이미지 업로드 시 파일명 노출
- 등등...
세션 정리
- .gitignore 관리가 더 잘 되어야 함.
- vscode 관련 세팅파일(.vscode), .env, eslintcache, node_modules 등 잘 들어있는 지 확인.
- styling 방식에는 여러가지가 있음.
- Sass, CSS in JS(Styled Component), CSS module, Tailwind CSS 등...
- 이 것들의 장단점들을 잘 알고 있어야함.
- 그 중에서 제일 잘 활용하고 있는 styled component인 CSS in JS의 장단점을 잘 알고 있어야함.
- commit message에 대한 convention을 다시 잘 숙지하고 작업해야함.
- README에 배포 링크 올라갔다면 시연 영상 굳이 안 올려도됨.
- 프로젝트 과정 가운데 미흡했던 내용보다는 성장한 내용, 배운 내용을 적는 것이 유리.
- module을 import할 때 계속 상대경로 사용했는데, 그럼 좀 지저분해 보일 수 있음.
- import 주소를 (src 폴더를 기준으로) 절대경로로 변경하여 적용해보기.
- 주니어 때는 같은 플젝를 다른 폴더로 clone 받아서 하나는 작업용(push용)으로, 하나는 주석용으로 관리하는 것도 좋은 방법임.
- 주석용으로 관리하는 폴더에서는 git을 끊고 시니어 개발자 혹은 사수분들이 작성한 코드가 어떤 의미이고 어떤 이유로 작성되었는지를 한줄한줄 주석달면서 해석하는 것도 좋은 방법임.
React 성능 최적화
- React 성능 최적화 라고 쓰고 리렌더링을 줄이는 방법 이라고 읽어도 무방함.
- React에서는 state와 props에서 변화가 있을 때마다 페이지를 리렌더함.
- 그러므로 React 성능 최적화는 곧
state와 props 관리라고 할 수 있음. - 어플리케이션이 필요로 하는
가장 최소한의 state를 찾고 나머지는 필요에 따라 계산되도록. - useState의 함정 - 과도하게 사용하지 않기
- state나 props로 충분히 계산해서 도출될 수 있는 값을 state로 굳이 만들지 말고, useEffect 오남용 X.
- 리액트로 사고하기
- 새로운 함수나 객체를 생성할 때는
단일 책임 원칙을 지켜야함. - 함수의 인자는 2개 이하가 이상적. 많을 때는 객체로 관리하는 것을 추천.
- 함수형으로 작성하는 하나의 컴포넌트 또한 하나의 함수이며, 이는 하나의 일을 하는 것이 이상적.
- 새로운 함수나 객체를 생성할 때는
- state, props 관리와 더불어
클린 코드를 작성하는 것또한 협업과 성능을 최적화하는 방법임. - 컴포넌트 내 변수 위치
1. import 순서도 경로(or연관)에 따라 묶어주자 ex) 멀리 있는 것 부터 차례대로
2. propType
3. 컴포넌트 정의
4. Styled Component
5. 간단한 상수 설정 (웬만하면 외부로)
6. 해당 컴포넌트에서만 사용할 함수 (2번 이상 사용하면 공통/컴포넌트 utils로)배운 점
material-ui 활용.
이번 과제에선 datePicker, dateRangePicker, dateTimePicker 등의 기간을 설정하거나 날짜를 지정하는 컴포넌트를 사용하는 미션들이 여럿 있었다.
이런 상황에서는 항상 react-datepicker 만 사용해봤는데 이번 과제에서 MUI를 처음 사용해봤다.
MUI는 단순히 시간, 달력 컴포넌트를 위한 라이브러리가 아니었고 방대한 양의 UI 컴포넌트를 제공하는 라이브러리였다.
그래서 자료 또한 많아서 커스터마이징하는 작업이 어렵지 않을 줄 알았는데 이번 과제에서 제일 시간이 많이 걸린 부분이 될 줄이야...
처음에는 default 사용법만을 보고 주먹구구식으로 커스터마이징을 하려고 노력했는데 쉽지 않았다.
stackoverflow에도 찾아보고 youtube을 포함한 여러 플랫폼에서 서칭을 해보았지만
내가 원하는 기능을 상세히 다룬 내용은 없어서 props를 일일이 써보면서 찾아보는 과정이 쉽지 않았다.
그러면서 든 생각이
그러니까 커스터마이징이지 ! 라는 생각이었고 앞서 언급한 "내가 원하는 기능을 상세히 다룬 내용은 없어서" 라는 말이 너무 당연한 말이었다.
다시 처음부터 시작하자는 생각으로 MUI 공식문서부터 보기 시작했고
역시 이번에도 돌고 돌아 공식문서 라는 말이 틀리질 않는 순간이었다.
공식문서를 보며 나에게 필요한 기능들은 이것, 이것 이니까 props를 이런 식으로 작성해보자
라는 마인드로 공식문서를 보며 커스터마이징한 결과 원하는 dateTimePicker를 만들어볼 수 있었다.
배울 점
버튼 커스터마이징
그동안 input 태그 에 대해 공부를 잘 안 해본 것이 잘 들어나는 과제였다고 생각한다.
input 태그 별로 중복 선택 여부와 커스터마이징의 여부를 깊게 공부해보지 못했는데
이번 과제에서 라디오 버튼을 커스터마이징할 때 어려움을 많이 겪었다.
다른 팀원은 빠른 시간안에 버튼을 커스터마이징하여 다른 팀원이 활용할 수 있도록 컴포넌트화까지 진행하였는데
비슷한 기능을 흉내내지도 못하고 어려움을 많이 겪었고 결국은 100% 원하는 모습을 구현해내지 못했다.
이번 기회에 input 태그와 버튼 커스터마이징을 조금 더 공부해봐야겠다고 생각했다.
