원티드 프리온보딩 프론트엔드 05.24, 05.25 (팀 과제) TIL

적절한 커밋 룰을 만들어서 평생 지키자.

팀 과제를 할 때, 강윤님의 커밋 방식이 깔끔해보여서 나도 지금 커밋 메세지 룰을 정하고 스스로 지키기로 했다.

MOD: ADD: FIX: DEL: REFACTOR: FEATURE: MERGE:

수정, 추가, 수리(에러핸들링), 삭제, 리팩토링, 기능 구현, 머지로 이루어져있는데, 이렇게 머릿말을 크게 달아놓으니 커밋메세지를 보기 간편했다!

리덕스로 관리하는 전역 상태 읽는 법

const statusCategory = useAppSelector(getStatusOption)

useAppSelector를 사용해야 한다. (나는 그것도 모르고 getStatusOption을 계속해서 콘솔에 쳤다.

공통 컴포넌트 (GNB,사이드바)를 루트태그에 넣어서 렌더링하자

이렇게 하면 모든 컴포넌트가 Header과 Siderbar 컴포넌트를 볼 수 있다.

재사용될 컴포넌트를 만들 때, 해당 컴포넌트는 데이터만 받아서 렌더링할 수 있는 상태여야 한다.

수정한 카드 컴포넌튼데, 수정하기 전에는 CardList라는 상위페이지 내에서 똑같은 형식의 JSX 문법을 만들고 JSX문 안에서 데이터를 받아서 맵을 돌려줬다.

그렇게 하니 컴포넌트가 엄청 지저분했는데, 팀장님의 권유로 카드를 따로 컴포넌트로 빼게 되었다.

결과적으론 카드 템플릿을 만들어놓고, 상위 태그에서 맵 함수를 돌려 해당 템플릿에 데이터만 꽂아주는 형식으로, 매우 간단하고 깔끔하게 만족했다.

앞으로도 꼭 생각하자. 공용 컴포넌트를 만들 때, 공용 컴포넌트 JSX는 로직과 무결하게 짜자!

Flex는 이제 그만, Grid를 공부해보자

나는 CSS flex 속성으로 카드를 관리했는데, 여백도 생기고 반응형에 문제가 있어 어려움이 있었다. 강윤님이 리팩토링 도중 플렉스를 그리드로 바꿔주었는데, 굉장히 깔끔하고 여백또한 찾아 볼 수 없었다. 반응형에서도 훨씬 나은 점!

레파지토리를 다시 열어 공부해봐야겠다.

데이터 가공 함수를 담는 폴더를 만들자

이번 폴더 구조를 보면 services라는 폴더가 있는데, 팀장님이 말하길 이 폴더는 데이터 가공을 위해 존재하는 폴더라고 한다.(나는 그것도 모르고 필요한, 분리하고싶은 모든 함수를 집어넣었다.)

이렇게 데이터를 가공해서 보내주니 렌더링되는 컴포넌트가 짧아져 좋았고, 직관적으로 변했다. 혼자 개발을 할 때도 유용하게 쓰고싶다.

Props의 난

아니 맵함수를 썼으면.. advertisementCardType이 그대로 props로 전달되는게 아닌가..? 왜 타입 오류가 나지?

결론은 props를 destructuring해주고, 해당 props이름 : advertisementCardType으로 해결했다. 나에겐 정말 난제였다.... 까먹지 말자!

else if.. 하...

이 두개의 차이, 뭔지 정확히 알 수 있을까? 나는 후자의 방법으로 계속해서 데이터를 페칭해오려고 했는데. 이상하게 전체보기 와 종료는 잘 왔지만, 진행중 을 눌렀을 때 전체보기가 계속해서 페칭되는 이상한 상황이 발생했다.

사람살려

진짜 한시간정도 넋놓고 이게 도대체 무슨 일인지 생각했다. 아니 오타도 전혀 없고.......... if문도 잘 썼고....... else로 예외처리도 해줬는데

왜 도대체 데이터가 안와?(오타도 없었다.)

else if 를 써야, if문의 조건에 맞지 않을 때 그 다음 조건을 테스트한다고 한다.... 나처럼 깔끔하게 쓴답시고 if문을 남발하는 자가 없길 빈다..