[1차 팀 프로젝트] 러쉬(LUSH) 회고

sumin·2022년 7월 3일

프로젝트 회고

친환경 핸드메이드 화장품 브랜드 lush을 모티브로 한 팀 프로젝트입니다. 기존의 사이트를 참고하여 모든 기능을 직접 구현하였고 프로젝트 기간과 인원을 고려해 구현할 부분들을 선별하여 일부의 기능만 구현하였습니다.

2022.12 현재 LUSH 사이트 리뉴얼하기 전 프로젝트입니다!

🧼LUSH 사이트 클론 코딩

✔ 개발 인원 및 기간

개발 기간 | 2022-06-20 ~ 2022-06-31
개발 인원 | 총 4명 - 정진우, 임상빈, 서수민, 손소희

✔ Github 레포지토리

Front-end-repo
Back-end-repo

✔ 프로젝트 사이트 영상

유튜브 사이트 시연 영상

✔ 기술 및 구현 기능

Front-end
HTML, SCSS, JAVASCRIPT, REACT, STYLED-COMPONENTS
Back-end
PRISMA, MYSQL, NODE.JS, POSTMAN, EXPRESS

내가 담당한 구현 기능 ❗❗
(다른 구현 기능은 깃 레포지토리 README 참고)

제품 리스트

상품 클릭 시 Top Banner 이미지 / 텍스트 변경
상품 리스트 추천순/인기순/낮은 가격순/높은 가격순 정렬 기능 구현
상품 서브 카테고리 리스트 구현
카테고리 및 제품 상세 페이지와 연동

Navigation bar

내비게이션 바에 mouse hover 시, 상품 카테고리 리스트와 my page(로그인, 회원가입) 툴팁 창 기능 구현
상품 리스트와 연동

리뷰 API

리뷰 작성/수정/삭제 API 구현

👩‍👩‍👦‍👦 5Team - Rush & Code

~~팀명을 보고 있으면 어디선가 무 과장이 튀어나올 것만 같다 ㅋㅋㅋㅋ~~
우리팀은 다른 팀과 다르게 4명이 프로젝트를 진행했어야 했다.
그래서 팀원들과 클론할 사이트를 고를 때에도 기본적인 레이아웃과 기능, 그리고 2주라는 마감 기한을 지킬 수 있는 웹사이트로 '러쉬(LUSH)'를 선택하게 되었다. 인원수가 적다는 점이 처음에는 좀 불안했지만 다들 빈자리가 느껴지지 않게 열심히 해주어서 무사히 프로젝트를 완료할 수 있었다!!👍👍👍

🔥 GitHub

각자 해야 할 기능들을 나누고 평화롭게 진행하고 있는데 Git이 나에게 시련을 주었다... 처음 깃허브를 배우고 사용했을 땐 내가 그래도 잘 이해하고 있다고 생각했는데 크나큰 착각이었다!! 기능 단위로 브랜치를 나누어 작업하고 있었기 때문에 다른 브랜치들로 이동할 일들이 많았는데 commit을 하지 않고 branch checkout을 하거나 git pull origin main을 그냥 git pull main을 해서 제대로 pull 받지 않은 상황에서 작업을 진행하는 등 이런 부분들이 쌓여 결국엔 코드의 1/3 정도를 날리게 되었다.🤦‍♀️ 처음엔 너무 당황스러웠지만 빨리 정신을 차려 다시 작업을 하였고 한 번 했던 작업이라 그런지 순조롭게 복구할 수 있었다... 이렇게 큰 사고를 친 후에는 실수 하지 않고 github를 사용하게 된 듯 하다. (아마도?ㅎㅎ)

브랜치 이동할 때는 commit 또는 stash를 사용하여 저장하도록 하자!
push 후에는 remote main을 pull 받고 나의 모든 branch에 merge 되었음을 확인하고 작업을 시작하자!

📝 기억에 남는 코드

기능 구현 하면서 기억에 남거나 새롭게 사용했던 코드들을 기록해 보았다.

(1) 상품 리스트

상품 리스트들을 map으로 구현하고 필터링과 정렬 기능을 적용하는 것이 주된 작업이었다.

Query Parameter

useLocation().search로 쿼리 스트링에 대한 정보를 받아와, 해당 정보를 통해 데이터를 요청하였다.

function useQuery() {
    return new URLSearchParams(useLocation().search);
  }

  let query = useQuery();
// DB에서 mainCategory, subCategory, sort를 받아옴
  let mainCategory = query.get('mainCategory');
  let subCategory = query.get('subCategory');
  let sort = query.get('sort');

조건부 렌더링

모든 컴포넌트에 한 번씩은 꼭 나왔던 조건부 렌더링들
불필요한 코드를 줄일 수 있어 좋았다.

<p className={css.banner_title}>
  {mainCategory && subCategory === null && 
  (<span>{mainCategory}</span>)}
  {mainCategory && subCategory && <span>{subCategory}</span>}
</p>

<ul className={css.select_filter_drop}
	style={{ display: appear ? 'block' : 'none' }} >

style은 객체 형태로

mainCategory가 바뀜에 따라 TopBanner의 이미지가 바뀌어야 하는데 img가 아닌 background url로 이미지를 주었기 때문에 style attribute를 변경해야 했다. JSX에서는 객체로 css를 전달해야 하고 key 값은 camelCase로 작성해야 한다는 점을 새로 알게 되었다.

const bathImage = {
    backgroundImage: `url(${'https://images.unsplash.com/이미지 주소'})`,
    backgroundRepeat: 'no-repeat',
  };
  const showerImage = {
    backgroundImage: `url(${'https://images.unsplash.com/이미지 주소'})`,
    backgroundRepeat: 'no-repeat',
    backgroundPositionY: 'center',
  };
  const bodyImage = {
    backgroundImage: `url(${'https://images.unsplash.com/이미지 주소'})`,
    backgroundRepeat: 'no-repeat',
  };

  return (
    <div className={css.product_top_banner}>
      <div
        className={css.product_top_banner_bg}
        style={
          (mainCategory === '배쓰' && bathImage) ||
          (mainCategory === '샤워' && showerImage) ||
          (mainCategory === '보디' && bodyImage)
        }
      >

onMouseEnter, onMouseLeave 이벤트

drop menu를 onMouseEnter, onMouseLeave 이벤트로 간단하게 구현할 수 있었다

<li className={css.nav_prd}
	onMouseEnter={() => {setHideMenu(true);}}
	onMouseLeave={() => {setHideMenu(false);}}
>

👋 프로젝트를 마무리하며..

처음에는 기대 반 걱정 반으로 프로젝트를 시작했다. 내가 잘 해낼 수 있을까... 팀에 피해를 주는 건 아닐까... 하는 생각이 들었었다. 하지만 역시 사람은 직접 경험해봐야 안다고 결론은 그냥 하면 된다! 어떤 식으로든 문제는 해결 되고 고민할 시간에 열심히 코드 한 줄 더 치는 게 나에게도 팀에게도 좋은 영향을 주는 것 같다.
소통을 열심히 했다고 생각하지만, 네이밍 컨밴션 등과 같이 디테일한 부분을 신경 쓰지 못했고 각자의 작업에 집중하느라 팀원들의 코드 리뷰를 제때 하지 못했던 점들이 아쉬웠었다. 하지만 후반으로 갈수록 미흡했던 부분들을 서로 보완해 나갈 수 있었고 많이 성장할 수 있던 시간이었다. 그리고 함께 코딩하는 즐거움을 알게 되었다😁
그리고 정말 정말 많은 도움을 받았던 우리 팀원들~!! 막히는 부분이 생길 때마다 함께 고민해주고 자기 일처럼 도와줘서 너무 감사했다🙏 2주라는 짧다면 짧고 길다면 긴 시간 동안 같은 팀이어서 좋았고 많은 것들을 배울 수 있었다. 다음에도 기회가 된다면 함께 프로젝트 해보고 싶은 좋은 팀원들!! 고마웠습니다 ~!! 최고~~👍👍👍