포켓몬 도감 사이트) KPT 회고✍️

1. Project - 포켓몬 도감 사이트😼

01. 완성 사이트 엿보기

포켓몬 사이트 바로가기

• Home
  

• Dex
  

• Detail
  

• Card
  

• Toast
  

2. Project KPT Review🗒️

01. 개인 회고

• KEEP : 만족하는 부분

- 도전 기능(RTK 리팩토링, 디테일 페이지 버튼 구현 등)을 모두 구현해냈다.
- 애니메이션 등 다양한 CSS 기능과 styled-components 라이브러리를 시도해보았다.
- 트러블슈팅과 README를 열심히 작성하였다.

• PROBLEM : 문제가 발생한 부분

[기능부분]
- 애니메이션 구현시 약간 어색하게 작동했다. (카드 전체가 회전되지 않고, 내부만 회전됨)
- "포켓몬 수"에서 하드코딩된 부분이 있었다.

[기타]
- 새로운 문법, 특히 RTK 리팩토링을 적용하기 전에 지레 겁을 먹고 할 일을 미뤘다.

• TRY : 개선방안

[기능부분]
- CSS 애니메이션에 대한 학습을 필히 해보자!
- 하드코딩을 줄이기 위해 constants 등을 활용해보자!

[기타]
- 뭐든 처음이다. 너무 겁먹지 말고, "막상 해보니 별거 아니네!" 마인드를 잊지 말자!

02. 튜터님의 피드백

• React 17버전 이상부터는 컴포넌트 모듈에 React를 import 하지 않아도 된다. 즉, 불필요한 코드이므로 제거하자!
• Redux의 리듀서에서는 상태를 변경하는 로직만 있는 것이 좋다. (선호도 차이 O)
• 유효성 검사는 이벤트가 발생하는 UI에서 작성되는 것이 가독성 측면에서 좋다. (선호도 차이 O)
• 스타일드 컴포넌트를 따로 관리하고, 메인 컬러와 포인트 컬러를 정한 것은 좋다.
• DashBoard 컴포넌트와 dexListSlice에서 최대 포켓몬의 수를 매직 넘버로 사용하고 있다. 해당 숫자에 maxPokemon 또는 MAX_POKEMON과 같이 이름을 지어주고, 여러 곳에서 사용이 된다면 export 시켜서 여러 모듈에서 공유하는 것이 좋다.

*매직넘버란? : 정확한 뜻을 밝히지 않고 소스 코드 안에 직접 숫자 값을 넣는 것.

• PokemonList 컴포넌트에서 MOCK_DATA에 대한 이름을 지어주기 위해 변수에 할당을 해주었는데, MOCK_DATA는 export default로 내보냈기 때문에, import 할 때 바로 pokemonList로 불러와도 된다.
  (export default로 내보낸 것은 import할 때 이름을 변경할 수 있다!)