📌 프로젝트 개요
-
팀명 : weClass200
-
목표 : 새로운 stack인 Styled-components 사용
-
기간: 2022.05.09(월) ~ 2022.05.20(금) (2주)
-
팀원: Front-End 4명, Back-End 2명
구현한 페이지
- Main
- 상품 리스트
- 상품 상세
- SNS 로그인
- 마이 페이지
- 결제 페이지
📌 내가 맡은 부분
1. 상품 상세 페이지
✨ 리뷰 추가 및 삭제
- 등록 버튼 클릭 시 Modal이 닫히면서 리뷰 목록에 텍스트와 이미지가 추가됨
- 이미지 등록은 local에서만 구현
- Modal 구성 :
Rating,Image,Text - Modal, Rating 구현 시 MUI 라이브러리 사용
✨ 찜하기 버튼
- JWT를 사용하여 버튼 클릭 시 user DB에 저장되어 찜 기능이 있는 모든 페이지에 연동됨
- 토글 형식으로 버튼 클릭 시 색칠, count 증감
✨ 탭 메뉴 스크롤 이동
- 탭 메뉴 클릭 시 해당 part로 스크롤 이동
- react-scroll 라이브러리 사용
<TabMenus>
{TAB_MENU.map(menu => {
return (
<Link key={menu.id} to={String(menu.id)} spy={true} smooth={true}>
<TabMenu onClick={handleTabClick} ref={tabMenu}>
{menu.title}
</TabMenu>
</Link>
);
})}
</TabMenus>2. 결제 페이지
- 이전 페이지인
상품 상세 페이지의 데이터를 활용한 레이아웃 구성 결제하기버튼 클릭 시 user의수강 중인 강의목록에 상품 등록
📌 기억에 남는 코드
1. 특정 데이터를 제외하고 맵 돌리고 싶을 때? filter를 사용한다
{TAB_MENU.filter(section => section.id !== 0).map(section => {
return (
<ContentBox key={section.id}>
<Title name={section.id}>
{section.id === 1 ? "클래스를 소개합니다." : section.title}
</Title>
</ContentBox>
);
})}2. 이미지 첨부
const handleImgInput = e => {
setFileImg(URL.createObjectURL(e.target.files[0]));
};
<ImgPreview
display={fileImg ? "block" : "none"}
color="gray"
src={fileImg ? fileImg : null}
alt="img"
/>
<ReviewImgInput
id="image"
onChange={handleImgInput}
type="file"
accept="image/*"
/>📌 느낀점
1. 잘한 점
- 라이브러리 처음 사용해보고 커스텀 변경도 해봤다.
- 매일 회고했다.
2. 아쉬운 점
- 데이터가 null일 경우의 오류를 생각하지 못했다.
- div 지옥에 빠져 500-700줄에 달한다.
- 컴포넌트화 실패! 처음부터 어떤 걸 컴포넌트화 하면 좋을지 생각해야겠다.
3. 2주 전보다 발전한 점
✨ 개발
-
통신
- 통신을 많이 해봤다.
- 통신 진행 전, 후로 서버와 어떤 내용을 공유해야하는 지 배웠다.
- GET, POST, PATCH의 차이와 언제 사용해야하는지 고민해보았다.
- fetch 함수를 사용할 때 공식처럼 사용하던
.then()함수를 뜯어서 활용할 수 있게 되었다. - 데이터가 들어오지 않았을 경우도 생각해야됨을 배움(옵셔널 체이닝)
-
Styled-components
- Styled-components를 사용할 수 있게 되었다.
- 구글, 유투브만 있다면 새로운 기술(?) 습득을 크게 두려워할 필요가 없겠구나!를 배움
-
기타
- 라이브러리 공식 문서를 읽고 사용하고, 커스텀할 수 있게 되었다.
✨ 협업
- Git (rebase와 conflict)
- 처음으로 rebase를 사용해보고 적응해나가는 과정이었다.
- conflict가 발생하는 상황에 대해 자세히 알게 되었고, 당황하지 않고 해결해나가는 방법도 배웠다.
📌 마무리
- Styled-components, 라이브러리, rebase, 데이터 통신 등 처음 해보는 것 투성이었던 2차 프로젝트! 이번 프로젝트의 가장 큰 수확은 새로운 것을 습득하고 사용하는 데 있어서 두려움이 줄었다는 것 아닐까!
- 그리고 git은 여전히 어렵다.
