📚 프로젝트를 진행하며 배운점
- 모달을 만들면서 세부적인 모달 스타일에 대해서 어떻게 설정해야 할지 여러 유명한 UI 라이브러리들을 찾아보며 다양한 방법으로 모달을 만들 수 있다는 점과,
FocusTrap과TapIndex을 적용해볼 수 있었습니다
FocusTrap, react-feather이라는npm library를react component에 알맞게 재사용한 것을 다시npm library로 올린 것을 사용하며 이런 식으로 오픈소스 기여할 수도 있겠다라는 생각이 들었습니다
- 프로젝트 시작하기 전에 기본적인 컨벤션을 맞추면 더 좋았을 것 같았습니다
(Ex. function declaration ↔ arrow function)
- 생각보다
eslint-airbnb조건을 전부 맞추며 구현하기 어려웠던 것 같습니다
- 공통 컴포넌트(Ex.
Text등)을 구현할 땐 기본 스타일을 먼저 적절히 만들어야 바로 사용할 수 있고, 자주 사용하는 스타일 속성들을props로 바로 적용할 수 있게 만들어야 재사용이 잘 된다는 점을 배웠습니다
- PR 작성시 브랜치 확인을 조심히 해야하는 걸 배웠습니다
💦 프로젝트를 진행하며 어려웠던 점
- 포스트 목록을 불러왔을 때 전역 스토어에 모두 저장하여 상세 페이지 보기 했을 때마다 조회할지, 아니면 매번 특정 포스트 불러오는 API를 호출할지 고민이 되고 있습니다
- 모달
height를 가변적으로 지정하게 되면 뷰 포트가 작아졌을 때 비정상적으로 보이게 되어서, 모달height는 뷰 포트를 넘어가도 되도록 하고, 모달 자체를 스크롤 할 수 있게 변경하여 수정했습니다
- 페이지 레이아웃 구현할 시
Grid를 구현하여 적용할지, 공통margin변수를 선언하여 사용할지 고민 - flex를 사용할 경우 글 목록이 여러 개 있을 때 첫째 줄(글이 한 줄에 가득 차 있을 경우)은 justify-content로 간격을 조절할 수 있지만 글이 가득 차 있지 않을 경우 빈 공간만큼 나머지 글들이 나누어 가지는 문제점
- Label을 사용할 때
htmlFor로 연결을 해 줘야 하는데dom ID를 생성해야 되서dom마다id를 생성하는 것이 올바른 방법인 것인지 잘 모르겠습니다. (현재는htmlFor연결은 하지 않았습니다.)
- Git branch를 스태시 & 체크 아웃을 꼭 진행해야 하는 경우가 있고, 체크 아웃 없이 브랜치 변경이 가능한 경우도 있는데 조건이 어떤 것인지 잘 모르겠습니다.
- 이미지 비율을 유지해야 하는데 가로가 더 긴 이미지와 세로가 더 긴 이미지를 각각 어떻게 설정해줄지와
min, max-width, height를 어떻게 제한할지 고민입니다
- Git branch가 머지된 이후에도 해당 브랜치에 가서 작업할 일이 생기면 브랜치로 가서 pull하고 다시 작업을 해도 되는지 궁금합니다. 아니면 새롭게 이슈를 파서 새로운 브랜치에서 작업을 하는지 궁금합니다.