[Goody,Kyle] 캐러셀 구현 중...

[hayoung123]

구현

• 캐러셀
• 리뷰기반 리팩토링

추가로 진행해야 될 사항

• 캐러셀 라이브러리화???
• 상세페이지 모달
• 헤더 탭
• 백엔드 부분

---

금주 회고

kyle

라이브러리로 만들려고 하다 보니 어느 부분까지 제가 묶어서? 만들어야 될지 고민이 많이 되는 것 같습니다. 다른 라이브러리를 참고하려고 보는데 쉽지 않네요...ㅎㅎ 백엔드 부분도 공부해보고 싶어서 다음주에는 백엔드에 집중해볼 것 같습니다.

goody

리액트 컴포넌트를 개발하면서, 함수의 추상화를 염두에 두지 않고 개발했다는 점이 아쉽고 고민이 됩니다.

[snowjang24]

안녕하세요, 리뷰를 맡은 스노우 입니다 ☃️

커스텀 훅의 사용, 유틸의 분리 등 로직 분리를 의도적으로 계속 노력하는 모습이 너무 보기 좋습니다!

로직 분리가 잘 되어 있어 코드를 전체적으로 읽는데 편했으며, 컴포넌트 나누기도 잘 되어 있어 앞으로의 프로젝트 진행이 기대가 되는군요!

리뷰된 부분에 대해 고려해보시고 학습이 더 필요한 부분은 찾아보며 공부하시면 앞으로 더 좋은 코드를 작성하실 것 같아 기대가 됩니다 😄

카로셀의 경우 라이브러리로 만든다면, 어느정도까지의 자유도를 줄지를 고민해보는 것도 좋을 것 같습니다. 또한, 파라메터 이름과 메서드 이름에 대해서도 고민을 해보면 좋을 것 같습니다. 마지막으로, Carousel 에서 리액트의 children을 활용하여 Container과 Item을 따로 분리하여 만드는 방법에 대해서도 한 번 고민해보면 좋은 라이브러리가 될 것 같습니다

현재 @hayoung123 의 커밋만 보이는 것 같은데, @junzero741 풀리퀘를날리지 않은걸까요 ?

저희가 페어프로그래밍으로 진행을해서 이번 PR에는 제 커밋만 남았습니다!
저희도 라이브러리로 만들 때 어느까지의 자유도를 줘야될지 어떻게 주어야될지가 많이 고민이 되네요...
알려주신 라이브러리를 보면서 공부해보겠습니다!

[snowjang24]

폰트 로드 방법 및 최적화에 대해 한번 공부해보면 좋을 것 같습니다.
preload와 font-display: swap; 와 같이 웹 폰트를 불러 오거나, 로컬 폰트를 로드하는 다양하고 적절한 방법에 대해 공부해보시기를 권장드립니다.

• 웹 폰트 사용과 최적화의 최근 동향
• Ensure text remains visible during webfont load

[junzero741]

폰트를 로드해오는 방식이 조금 하드하다고 생각하고 있었는데, 좋은 방법들이 많네요!!
추천해주셔서 감사합니다. 꼭 공부해보겠습니다!

[snowjang24]

커스텀 훅 분리가 인상적이네요 👀

[junzero741]

kyle 이 완전 리액트 고수입니다..짱짱..

[snowjang24]

파싱 함수를, sort 함수의 compareFunction처럼 파싱하는 함수를 넘겨주는 방식은 어떨까요 ? 한 눈에 어떤 기능을 하고, 커스텀훅에서 왜 이러한 인자를 받는지 쉽게 이해할 수 있을 것 같습니다.

지금도 잘 짜셨지만, 이러한 방향으로도 한 번 생각해보시면 좋을 것 같습니다!

let numbers = [4, 2, 5, 1, 3];
const compareFunction =(a, b) => {
  return a - b;
};
numbers.sort(compareFunction);

[junzero741]

추천해주신 방법대로 하면 파싱 함수의 재사용성도 높아지고, 코드도 더 보기 깔끔해질 것 같습니다.
다음 프로젝트부터는 꼭 시도해보겠습니다! 감사합니다.

[snowjang24]

이런경우 width를 지정해야하고 다양한 기기에서의 활용이 불편할 것 같습니다.
반응형을 고려하여 짜보는 건 어떨까요 ?

아래와 같은 유명한 라이브러리에서 영감을 얻는 것도 좋은 방법일 것 같습니다. 코드를 참고하지 않고도, 완성된 카로셀을 개발자도구로 관찰하며 공부하는 것도 도움이 될 것 같습니다!
react-slick

[junzero741]

리뷰 주신 부분 반영하여 width 인자로 받지 않아도 되는 카로셀을 만들었습니다.
오픈소스 코드를 읽어보는 연습도 게을리하지 않아야겠네요.
감사합니다!!

[snowjang24]

이렇게 케이스별 중간 처리 없이 값만 리턴하는 경우
함수보다는 객체를 사용하면 좀 더 로직이 깔끔하고 한눈에 보일 것 같습니다.

const ImageSize = {
  lg: '384px',
  md: '308px'
}

width={ImageSize.lg}

[junzero741]

말씀해주신 부분대로 수정해서 반영했습니다!
훨씬 보기 좋은 코드가 된 것 같아요.
감사합니다.

[junzero741]

@snowjang24
코드 리뷰를 엄청 꼼꼼하게 해주셨는데,
프로젝트 진행하느라 너무 정신이 없어서 이제야 리플을 답니다.. ㅜㅜ
리뷰 너무 감사드립니다!!