개발 기간 : 2021.04.19 ~ 2021.04.30

2주동안 프론트 3명이 모여 (지금은 사라진 서비스인) 배민찬 사이트 클론 프로젝트를 진행했다. 개인적으로는 백엔드 작업의 큰 흐름(API 설계, DB..? 이런거)을 파악해보고 싶었는데 화면 구현하는 것은 주어진 mockAPI로도 충분히 가능하기도 했고, 프론트 쪽 하다보니 백엔드에 크게 신경을 못써서 express 설치하고 OAuth만 구현해보았다. 리액트로 프로젝트를 한 지 어언 한 달이 되었지만 아직도 리액트를 잘 모르겠어서 복습할 겸 글을 남겨본다. 🤓📝

주요 기능

1. Tab UI
2. Carousel
3. Modal
4. GitHub 로그인

0. 컴포넌트 트리

아델라가 너무 잘 그려줬다!!! 대박 🤭

1. Tab UI

1-1. Tab button 구현

Tab Section에는 activeTab이라는 상태가 하나 존재한다. Styled Component인 Tab button에 onClick을 등록하여 setActiveTab으로 상태를 바꿔주도록 했다. 상태가 바뀌면 Tab Section 전체가 리렌더링되는데, Tab Button에 activated라는 boolean 타입의 prop을 넘겨줘서 activated true/false로 나눠서 스타일을 다르게 주었다.

1-2. Tab Content 구현 (하늘색 큰 박스 영역)

커스텀 훅 useFetch를 이용해서 데이터를 받아온다. useFetch 내부에는 products라는 상태가 있는데, API에서 상품들의 정보를 저장하는 배열이다. Tab Button에서 클릭된 버튼의 인덱스가 저장되어 있는 상태값인 activeTab을 이용해서 클릭된 탭에 해당하는 Card Component들을 렌더링한다.

버튼을 클릭할 때마다 fetch 요청을 보내는 방식은 아니고, 필요한 데이터를 최초에 모두 받아놓은 뒤 골라서 렌더링해주는 방식이다.

2. Carousel

캐로셀 부분은 제대로 이해하지 못하여.. 내 힘으로 구현해보고 내용을 추가해야겠다.
처음에는 아델라의 캐로셀을 적용했다가, 제니가 npm에 올려준 범용적인 캐로셀으로 바꾼 상태이다. 전체 상품이 4의 배수가 아니면 마지막에 1~3개씩 움직이는 것도 구현이 되었는데, 현재 들어 있는 데이터가 8개여서 화면 녹화에는 담지 못했다.

3. Modal

Modal은 처음에 MainPage 컴포넌트 아래에 뒀었는데, Portal이라는 것이 있다는 걸 리뷰어님이 알려주셔서 Portal로 바꿨다. 그런데 그 후에 보낸 PR에서 크롱이 이런 방법이 꼭 필요할까요? 라고 하셔서.. 뭐가 맞는 건지 아직 잘 모르겠다. ㅎㅎㅎ 모달이 딱 하나만 떠야할 때 Portal을 사용하는 건가..? 지금은 상품마다 상세페이지 모달이 필요한 상황이라.. 🤔

모달을 두 가지 방법으로 구현해본 것은 이 게시물에 정리해두었다.

3-1. 상품 썸네일

3-2. 상품 정보

3-3. 캐로셀

제니의 캐로셀을 재사용했다. 화살표 버튼이 메인 페이지의 캐로셀과 살짝 다른 위치에 있는데, 제니가 이걸 고려해서 버튼 위치도 조절 가능하도록 라이브러리를 만들었다. 나도 꼭 스스로 구현해봐야지.

3-4. 버그

3-4-1. 모달 창의 배경이 점점 어두워지는 문제

상품을 클릭할 때마다 새로운 Background와 새로운 Modal이 떠서 겹쳐지기 때문에 생긴 문제이다. 이것까지 고려를 못했다. ㅋㅋㅋㅋㅋ 만약 상품을 3개 눌렀다면 X를 3번 눌러야 모든 모달이 꺼진다. 지금은 Card 컴포넌트가 모달 background랑 모달 창을 렌더링하도록 되어있는데, 모달은 하나만 있고 클릭된 카드에 따라 내용만 바꿔주도록 구조를 살짝 바꿔야 할 듯!

3-4-2. 해상도에 따른 문제

노트북에서는 잘 나오는데, 모니터 물려서 보면 모달 창 밑에 빈 공간이 있다. 기계마다 화면이 다 잘 나오도록 맞추는 게 참 어려운 듯.. (추후 스크린샷 첨부 예정)

다음 프로젝트 때 해보고 싶은 것

1. Jira 또는 Notion으로 협업하기 (그냥 깃허브 기능을 쓸까..?)
   • issue 자동 close 등등 기능을 좀 더 활용해보자.
   • 자동화 살짝 시도해보기
2. 절대경로 설정하기
3. 브랜치 관리 더 깔끔하게.. dev에 머지할 때