[React] 2차 프로젝트 회고록(!) feat 탈잉 클론코딩

Hyodduru ·2022년 4월 24일

Projects

목록 보기

6/7

안 끝날 것만 같은 2차 프로젝트가 끝이 났다. 시간 참 빠르다. 어느새 1,2차 프로젝트가 끝나고 다음주면 기업협업이다.

어찌되었건, 이번 2차 프로젝트를 하며 느꼈던 점, 배웠던 점 등 진솔하게 적어내보고자 한다.

✔️ 뿌잉 프로젝트 웹사이트 링크 :
http://bbooingbbooing.s3-website.ap-northeast-2.amazonaws.com/
✔️ 뿌잉 프로젝트 웹사이트 촬영 링크 : https://youtube.com/watch?v=KIk94--o11U&feature=share
✔️ 뿌잉 프로젝트 github repository :
https://github.com/hyodduru/31-2nd-bbooing-frontend.git

🗓 프로젝트 소개

프로젝트 진행 기간 : 4월 11일 ~ 4월 22일
프로젝트 주제 : 커머스 웹사이트 클론 코딩하기
클론 코딩한 웹사이트 : 탈잉 https://taling.me/
구성 : Front-end 4명(본희님, 정수님, 재혁님, 나) Back-end 2명(미류님, 강호님)

🖊 프로젝트 아키텍처

서비스 소개

탈잉 대신 뿌잉이라는 웹사이트로 이름 변경 👉 교육 서비스 플랫폼을 메인 서비스로 하는 것은 그대로 유지

메인 서비스

교육 서비스 플랫폼
다양한 카테고리 별 온라인, 오프라인 강의 서비스 제공

🧚‍♀️ 프로젝트 시작 때 우리의 목표 (구현사항)

카카오톡 소셜 로그인 ✔️

메인페이지, 제품 목록 페이지, 제품상세페이지, VOD페이지 ✔️

찜목록 (장바구니) ✔️

리뷰 (이미지까지 업로드)✔️

검색기능 ✔️

다중필터, 페이지네이션 ✔️

포인트 결제 기능 (아쉽게도 하지 못했다😢)

🤖 실제로 구현한 사항과 사용한 기술

1. 소셜 로그인 / 회원가입 (카카오톡)

SDK방식으로 카카오 API활용한 소셜 로그인 구현
로그인시 카카오 토큰/ 사용자 정보(프로필사진/닉네임) localStorage에 저장

2. nav 바 검색기능 구현

navigate, query string, useLocation().search 활용

3. 메인 페이지

리액트 슬릭 라이브러리를 활용한 슬라이더 구현
찜 기능 구현 (fetch - post 활용)

4. 강좌 리스트 페이지

쿼리 파라미터를 활용한 기능 구현
다중필터
페이지네이션
custom hook 활용 - useOutSideClick (필터 카테고리 바깥 dom을 클릭을 감지해주는 커스텀 훅) - 바깥 dom 클릭시 해당 필터 체크리스트가 보이지 않게끔 한다.

5. 위시리스트(찜)

좋아요 버튼 클릭시 데이터베이스로 해당 위시리스트 상품 전송. 페이지를 새로고침 했을 때도 좋아요 버튼 클릭 상태 유지
custom hook 활용 - useWishList (위시리스트 목록을 받아와 해당 값을 return하는 커스텀 훅) - 자주 쓰이는 함수 커스텀 훅으로 만들기
위시리스트 페이지에서는 데이터베이스로 전송했던 상품 목록들을 받아볼 수 있다. (fetch - get 활용)

5. 리뷰

상품 상세 페이지 내 해당 상품에 대한 리뷰 컴포넌트 구현
formData.append를 활용하여 이미지 업로드 기능 구현
리뷰 작성 및 삭제 기능 (fetch - post, delete)

6. VOD main

video 태그를 이용한 슬라이더와 프로필이미지 슬라이더 두개를 react-slick 라이브러리 asNavFor API 를 활용하여 연결된 하나의 슬라이더 구현

😎 내가 맡아서 한 부분(!)

나는 메인 페이지와 강좌 리스트 페이지 레이아웃 및 페이지네이션 다중필터 기능 구현, nav 바 검색기능 구현, 위시리스트(찜, 좋아요 기능)부분을 담당했다.

추가로 formData.append를 활용한 리뷰 내 이미지 업로드 기능 구현까지 해볼 수 있었다.

1. 메인 페이지

✔️ 메인 페이지에서 가장 기억에 남는 건 react slick 라이브러리를 활용하여 슬라이더 기능을 구현한 것이다.

관련 글은 따로 포스팅해두었다!

👉 react slick 슬라이드 기능 구현 포스팅

라이브러리의 편리함을 잘 알게해주었다.

추가로 좋아요 통신기능도 했는데 이부분은 1차 때도 했던 부분이라 자세히 적지는 않겠다..!

✔️ 1차때와 조금 달라진 점은 총 좋아요 개수를 보여주는 걸 추가해줬다는 것이다.
위에 좋아요가 클릭됬을 때 강의카드 하단 하트를 보면 바로 숫자가 업데이트가 되는 것을 볼 수 있다. 이는 state 끌어올리기를 활용하여 관리해주었다.

✔️ navigate를 활용하여 태그들을 클릭했을 시 해당 상세페이지로 이동할 수 있는 기능 또한 추가해주었다.

2. nav 검색기능 - query string

✔️ 이번 프로젝트에서는 1차 때 못해봤던 쿼리스트링 관련 부분한 기능 구현을 주로 해봤는데, 그 중 하나가 검색기능이다.

어느 페이지에서든 고정적으로 존재하는 nav바에서 검색할 경우 상세페이지로 이동하여 검색한 결과들에 대한 정보를 얻는다.

처음에는 nav바에서 전역으로 상태관리를 해줘야하는 건가 했는데 그럴필요 없이 navigate를 활용하여 상품리스트 페이지로 이동한 뒤, 거기서 useLocation().search를 활용하여 검색 값을 얻어 해당 정보를 데이터베이스로 요청을 해주면 되는 것이었다(!)

💻 관련코드

👉 Nav.js

const [term, setTerm] = useState('');
const searchTerm = e => {
    e.preventDefault();
    setTerm(e.target.value);
    navigate(`/lectures?title=${term}`);
    setTerm('');
  };
  
  return // 관련없는 코드 생략
<form name="search" onSubmit={searchTerm} />

navigate를 통해 lectures로 이동한 후, 해당 검색 정보 데이터베이스로 요청
👉 lectureList.js

const {search} = useLocation();

 const getCardListData = useCallback(async () => {
    const res = await fetch(
      `${BASE_URL}/main/search`
    );

    const data = await res.json();

    setCardList(data.result);
  }, [search]);
  
  useEffect(()=> getCardListData(), [getCardListData]);

3. 강좌리스트 페이지 - query string

✔️ 이부분에서도 쿼리스트링을 활용한 다중필터 기능 구현을 했다!
해당 기능구현에 대한 자세한 내용은 따로 포스팅 했다!
👉다중필터 기능 구현하기 포스팅

✔️ pagination 또한 구현했다. (12개씩 정보요청)

💻 관련코드

👉 lectureList.js

const LIMIT = 12;
const [pageNum, setPageNum] = useState({ limit: LIMIT, offset: 0 });
const { limit, offset } = pageNum;
  
const getCardListData = useCallback(async () => {
    const res = await fetch(
      `${BASE_URL}/main/search${search}&offset=${offset}&limit=${limit}`
    );

    const data = await res.json();

    setCardList(data.result);
  }, [search, offset, limit]);
  
  const updatePageNum = buttonIndex => {
    const offset = buttonIndex * LIMIT;
    setPageNum({ ...pageNum, limit: LIMIT + offset, offset: offset });
  };
  
  
  return // 관련없는 코드 생략
  
     {((limit === 24 && offset === 12) || cardList?.length === 12) && (
        <PageBtns>
          <PageBtn onClick={() => updatePageNum(0)}>1</PageBtn>
          <PageBtn onClick={() => updatePageNum(1)}>2</PageBtn>
        </PageBtns>
      )}

pagination을 위해 필요한 offset과 limit 값을 state로 관리를 해주고 해당 값이 변할 때마다 리렌더링이 일어날 수 있도록 했다.

또한 pagination 버튼은 요청해서 받아온 정보가 12개 일 때 (12개가 최대) 또는 두번째 페이지가 되었을 때 보이게끔 조건식을 걸어두었다.

✔️ 외부 dom 바깥을 감지해주는 useOutSideClick이라는 custom hook도 만들어 카테고리 부분 바깥을 눌렀을 때 체크리스트가 보이지 않게끔 기능 구현을 해주었다.
👉 useOutsideClick customhook 포스팅

4. 리뷰 이미지 업로드 기능

✔️ 저번 프로젝트에서 조금 업그레이드 된 기능이 있다면 리뷰에 이미지도 함께 upload할 수 있다는 점이었다.

formData.append()를 활용하여 기능구현을 해주었다.
이미지 업로드 되는 거 신세계,, 신기한 백엔드 세상,,

😎 프로젝트 회고

노션 페이지, 스탠드업 미팅으로 프로젝트 진행

우리 팀은 매일 스탠드업 미팅을 짧고 굵게 했고, 회의가 시작하기 전 각자의 어제 한 작업, blocker, 오늘 해야할 일을 미리 노션페이지에 기록했다. 각자 진행사항이 정확히 어떻게 진행되고 있는지 한눈에 알아보기 쉬웠다.

트렐로 또한 이용했는데 노션 페이지에서 이미 각자의 업무를 기록하고 있다보니 상대적으로 트렐로는 덜 신경쓰게 되고 잘 기록하지 않게 되었다.

나의 Blocker

👉 저번 프로젝트와 달리 이번에는 git rebase를 활용하여 커밋관리를 해주었는데, 생각보다 git rebase에 적응하는 것이 어려웠다. git rebase를 초반에 자주 해주지 않아서 커밋 하나하나마다 conflict가 나서 해결하느라 애먹었다.😢 그리고 squash를 통해 commit을 하나로 합쳐주는 작업을 할 때 commit을 다 합쳐버린다는 개념이 아직 익숙하지가 않아서 좀 무서웠던 기억이,, 😢 그래도 계속 같은 명령어, 같은 흐름으로 계속 연습해주면서 조금씩 조금씩 익숙해졌다.

👉 프로젝트 초반에 부딪힌 blocker인데, 'Styled Component'를 새롭게 배워 바로 적용을 해야했을 때이다. 그동안 css나 sass에 익숙해져있던 터라 style을 컴포넌트화한다는 게 익숙하지 않았고 설명을 봐도 도통 이해가 안갔다. 그래서 급하게 노마드코더 강의를 듣고, 공식문서 계속 읽어보면서 여러 예시들 만들다보니 초반에는 시간이 좀 걸렸지만 나중에 익숙해졌다. 이제는 바로 해당 스타일 컴포넌트를 태그로 사용하고, 바로 스타일 적용을 해줄 수 있으니 편리하게 느껴진다. 또한 className을 주는 대신에 props를 전달해주어 조건부렌더링도 가능하다(!)

좋았던 점 😁

👉 이번 프로젝트에서 쿼리스트링 관련한 기능 구현을 할 수 있어서 좋았다. 1차 때는 fetch를 활용한 통신 기능을 하는 업무가 대부분이었어서 query string, navigate, useLocation 이런 것들에 대한 이해가 완벽히 되지 않은 상태였는데, 이번에 쿼리스트링을 활용해서 검색기능, pagination, 다중필터 기능을 적용해보면서 조금 더 쿼리스트링에 대해 이해할 수 있었다(!)

👉 custom hook 사용 및 관심사의 분리에 따른 코드를 짜기 위해 정말 많은 고민을 했고, 계속해서 코드를 갈아엎으면서 더 좋은 코드에 대해 고민해볼 수 있었다.

👉 초반에는 블로커로 작용했지만 결과적으로 새로운 기술들 (Styled Component, git rebase 등등)을 배워나가며 적용시키는 과정들이 좋았다.

👉 프로젝트는 힘들지만 동시에 원하던 기능 구현을 완성했을 때, 팀원들 각자들의 작업을 하나로 합쳤을 때, 백엔드와의 통신에 성공했을 때 등 깊은 성취감을 주는 순간들이 많다. 이래서 프로젝트 계속 하나보다! 재밌어! 짜릿해!

아쉬웠던 점 🥲

👉 리덕스를 써먹어보지 못한 것,,,😢 리팩토링 작업할 때 꼭 써봐야겠다.

👉 다양한 api 이용해보지 못한 것, 1차 때와 비슷한 기능 구현에서 멈춘 것. 개인적으로 매우 아쉬운 부분이다. 사실 이것 저것 해보는 걸 좋아하고 새롭고 어려운 것도 다 해보는 걸 좋아하지만, 이번 웹사이트에서 api로 할 만한걸 마땅히 찾기 애매하기도 했고, 기업협업 준비하랴, 지금 기존에 해야할 기능 구현 하랴, 하고 싶은 것보다도 할 수 있는 것들에 초점을 맞춰 정신없이 몰아치듯 프로젝트를 마무리해버린 것 같아서 아쉬움이 크다. 내가 모든 걸 다 쏟아냈다 이런 느낌이 들지 못해서 아쉬워 아쉬워

👉 다음 사이드 프로젝트 때는 꼭! 반드시! 여기서 다 못한 다양한 기능 구현들 원없이 해볼 수 있었으면 좋겠다! 더하여 최적화 작업도! (아쉽게 못해본 거 정말 다 풀어낼거야... 😢)

🍯 이 글을 마치며

안 끝날 것만 같았던 2차 프로젝드가 끝이 나긴 나는구나 싶다. 새로운 기술 배우랴, 기업협업 준비하랴 프로젝트 계속 진행하랴 다들 맘고생, 몸고생했을 팀원들께 정말 수고했다고 말해주고 싶다. 각자 회고 미팅을 가질 때 앞으로의 개발자로서의 계획에 대해 이야기하는 시간을 가졌는데, 다들 현업에서 보면 얼마나 신기하고 기분이 이상할까 새삼 생각했다. 다들 진심으로 잘 되었으면 좋겠고, 계속 자주 보게 되었으면 좋겠다.

그리고 팀원들과의 회고를 통해 나 또한 앞으로 어떻게 개발자로서의 길을 걸어나갈 것인지, 과연 나는 어떤 개발자가 되고 싶은지 생각해보는 계기도 되었다.

정말 다른 건 모르겠고,
그냥 나는 새로운 걸 배우는 걸 두려워하지 않고, 계속해서 배우려고 하고, 주어진 프로젝트에 정말 최선을 다하는 개발자가 되고싶다.

뻔한 말 같지만 진심이다. 내게 주어진 기회를 대충 써버리고 싶지 않고, 어떤 프로젝트를 맡던 내가 갖고있는 에너지는 다 쏟아낼 정도로 열정적이고 싶다. 정말 잘하고 싶고, 또 함께하는 사람들과 재밌게 하고 싶다.

또한 사람들과 함께하는 것 자체에 감사할 줄 아는 개발자이고 싶다. 늘 느끼는 거지만 난 함께하는 것 자체를 사랑하고, 함께 같은 목표를 나아가는 그 느낌 자체가 정말 좋다. 다른 사람들도 나와 함께하는 것을 좋아할 수 있도록 더 좋은 사람이 되어야지-!

앞으로 더 여유있고 멋있는 내가 되기를,,,! ✨

Hyodduru

꾸준히 성장하기🦋 https://hyodduru.tistory.com/ 로 블로그 옮겼습니다

이전 포스트

장바구니 목록 수정기능 만드는법 (데이터베이스와 통신)

다음 포스트

4주 스타트업 인턴 회고록 - 실시간 채팅 웹 만들기

8개의 댓글

나는경서

2022년 4월 25일

진있다멋짜 효정님 ~!

1개의 답글

chp9419

2022년 4월 26일

글 잘보고 갑니다^^
뿌잉 일때부터가 탈잉교육서비스 모티브로 한게 보이네요
임팩트있습니다.
그 열정 유지해서 현업에서 보아요ㅎㅎ

1개의 답글

Kyle

2022년 5월 1일

벨로그 메인에 이건 위코더가 쓴 글이다 싶어서 들어왔는데 역시나 훌륭한 위코더분의 알찬 후기글이었네요 잘 보고 갑니다...!
기업협업 즐겁게 보내시구 한 달 뒤 수료의 기쁨 만끽하시길 바라겠습니다!

1개의 답글

박지훈

2022년 5월 1일

명예뿌잉(나혼자)은 대신 뿌듯해하고 갑니다 ㅠ

1개의 답글