1차 프로젝트 회고록 - 29CM 웹사이트 클로닝

1차 프로젝트가 끝났고 화끈하게 뒷풀이도 했습니다. 짧다면 짧은 2주지만 시간에 비례하지 않게 저에게 많은 경험을 남겨준 1차 프로젝트를 마무리하며 회고록을 남겨보려고 합니다.

프로젝트 소개

국내외 패션, 라이프 스타일을 한눈에 볼 수 있는 유명 온라인 편집샵 29CM 웹사이트를 클론하는 프로젝트 입니다.

• 개발 기간 : 2020.07.20. - 2020.07.31. (약 2주)
• 개발 인원 : 프론트엔드 3명(김경배, 윤지영, 임현지), 백엔드 2명(김병준, 이민호)
• Front-end Github
• Back-end Github

✔️ 데모 영상

✔️ 사용된 기술

Front-End

• JavaScript(ES6)
• React.js (CRA, Class형 componenet사용)
• Sass
• Git/Github

React Library

• React-router-dom
• React-slick

협업툴

• slack, Trello

Back-End

• Python
• Django
• MySQL
• Git/Github

✔️ 내가 맡은 역할/부분

저는 프로젝트에서 29CM만의 자체 브랜드 홍보 SNS페이지인 29TV와 상품 및 컨텐츠의 찜목록 페이지인 My Heart를 맡았습니다. 인스타그램 클론 코딩에서 구현했던 Modal 기능의 심화된 버전을 구현할 수 있었고 My Heart페이지와 공통 컴포넌트를 사용하면서 State관리를 효율적으로 하는 방법에 대해 탐구해볼 수 있었습니다.

• 프로젝트 초기 세팅
• 29TV 피드 클릭 시 자세히 볼 수 있는 Modal창 출력
• 모달창 내부 공유 버튼 클릭 시 공유하기 Modal창 출력(이중 모달창)
• Feed Modal창에서 이전/이후 데이터 출력 및 Heart 아이콘 상태 연동
• Heart 아이콘 클릭 시 백엔드 서버로 좋아요 누른 Post id와 User token 전송하여 데이터 저장 후 My Heart페이지에서 보여줌
• Active Tab을 사용하여 라우팅 없이 출력 화면 전환

✔️ 잘한점, 아쉬운 점, 해결 그리고 개선 방법

잘한점👏

• 이중 모달창을 문제없이 구현
• 실제 사이트에서는 연동되지않은 피드와 모달창의 하트 아이콘 State를 동시에 관리
• 데이터 관리와 컴포넌트 재사용에 초점을 맞추어서 리액트 기본 개념을 탄탄하게 익힘
• 백엔드 API 데이터 처리를 원활하게 함

아쉬운 점🧐

• 장바구니 기능 구현을 경험해보지 못함 (동기들의 코드를 살펴보며 로직을 이해하고 기회가 된다면 3차때 해보고 싶습니다.)
• 29TV사이트에서는 피드 모달창에서 영상이 출력되는데 기간상 한계에 부딪혀 사진으로 대체한 점
• Pagenation이나 query string 기능을 사용해보지 못함

해결/개선 방법

• 경험해보지 못한 기능들은 동기들로부터 간접 경험을 할 수 있었고 100% 체득하진 못했지만 어느정도 살펴볼 수 있었습니다. 이를 기반으로 나중에 꼭 혼자 해봐야겠다고 다짐을 해봅니다..🤓

• 공식문서를 꼼꼼히 봐야겠다고 생각했습니다. 어떤 기능에 대해 서치할 때 마음이 앞서 이것 저것 겉핥기식으로 훑어보는 경우가 잦았는데, 결과적으로는 공식문서를 꼼꼼히 살펴보면 군더더기 없는 정보를 얻을 수 있었습니다. 물론 다른 훌륭한 분들의 여러 블로그를 참고하여 보면 좋지만 필터링이 약한 저에게는 공식문서를 가까이 해야할 필요성이 있음을 느꼈습니다.

• 1차 프로젝트는 여태까지 배운 개념을 탄탄하게 적용하고 새로운 기술을 익히며 학습 방향에 대해 계획을 잡아나가는 것이 목표였습니다. 종종 마음과 욕심이 앞서기도 했지만 혼자 공부하는 것이 아니라 함께 무언가를 만들어 나간다는 것이 저에게는 큰 경험이 되었습니다. 타인과의 소통을 기반으로 프로젝트를 진행하면서 협업에서 중요한 여러 요소들( Trello를 적극적으로 활용하기, 스크럼 방식으로 진행하기, 컨벤션 지키기 등 )의 필요성을 느낄 수 있었습니다. 2차때는 스스로 잘했던 부분을 가져가되 1차 프로젝트에서 느꼈던 아쉬운 부분이나 여러 감상을 잊지않고 더욱 성장하는 시간이 될 수 있도록 노력하고자 합니다.

✔️ 기록하고 싶은 코드/함수/로직

• 이중 모달창에 대해서는 1주차때 미리 정리해두었습니다.

이중 모달창 기능 구현은 여기서 확인!

• 프로젝트 중간에 진행했던 세션에서 배운 내용을 바로 적용하기도 했고 따로 블로그로도 정리해두었습니다.

Active Tab 기능 구현은 여기서 확인!

• 프로젝트를 진행하면서 컴포넌트간의 state관리 개념이 헷갈리기도 했고 고민도 많이했던 부분이라서 중간에 따로 두번에 걸쳐 작성하였습니다.

State 끌어올리기는 여기서 확인!

부모/자식 컴포넌트의 State관리는 여기서 확인!

그밖에 기억하고 싶은 코드로는 props 타입을 지정하여 타입에 따라 같은 컴포넌트에 다른 데이터를 fetch하는 함수입니다.

29TV와 My Heart페이지에서 TV카테고리 부분은 같은 컴포넌트를 공유하고 있습니다. 때문에 컴포넌트를 재사용 할 수 있는데 문제는 두 페이지에서 보내는 데이터가 다르다는 점이였습니다. 이를 해결하기 위해 공통된 컴포넌트에서 받아와야하는 두 데이터 fetch를 함수로 정하여서 componenetDidMount에서 조건문을 이용하였습니다. 다시 데이터가 불려지는 순서를 순차적으로 살펴보면

1. 29TV가 라우팅 되는 부분에서 타입을 "total"로 설정

         <Route
            exact
            path="/TwentyNineTV"
            render={() => <TwentyNineTV type="total" />}
          />

2. 재사용하는 컴포넌트에서 다른 데이터를 호출하는 함수 설정

//29TV
  getTwentyNineTVData = () => {
    fetch(`${API_URL}/media/recommend`, {
      method: "GET",
      headers: {
        Authorization: localStorage.getItem("token"),
      },
    })
      .then((res) => res.json())
      .then((res) => {
        this.setState({
          data: res.data,
        });
      });
  };

//MyHeart
  getMyHeartData = () => {
    fetch(`${API_URL}/mypage/heart/post`, {
      method: "GET",
      headers: {
        Authorization: localStorage.getItem("token"),
      },
    })
      .then((res) => res.json())
      .then((res) =>
        this.setState({
          data: res.my_heart_list,
        })
      );
  };

3. componenentDidMount에서 조건문을 이용하여 데이터 호출

  componentDidMount = () => {
    this.props.type === "total"
      ? this.getTwentyNineTVData()
      : this.getMyHeartData();
  };

결과적으로 라우팅 될 때 타입에 따라서 해당하는 데이터를 호출하게 되므로 동일한 컴포넌트에 다른 데이터를 입력해 사용할 수 있다.

거의 마지막에 고생했던 부분인데 생각보다 로직이 간단했고 제가 너무 문제를 복잡하게 생각한다는 것을 깨달았습니다...종택님의 도움으로 해결할 수 있었고 무한한 감사의 인사를 드립니다...🙏

느낀점

중간중간 간략하게 언급했던 느낀점을 글을 마무리하며 다시 한 번 정리하고자 합니다.
블로그로 정리하는 회고록으로는 이 글이 두번째입니다.

회고록을 쓰는 두번째의 소감으로는...스스로 새삼스럽기도 하면서 너무나 빠르게 지나간 순간들과 제가 겪은 경험, 배움에 대해서 곱씹어 보게 되는 시간이 참 중요하다는 것을 느낍니다.

뜬금 없지만 '남는건 사진이다', '먹는게 남는거다'와 같이 항상 뭔가를 남겨야지 득이 되는 것 같은 말들이 떠오릅니다. 그리고 그 말들이 정말 맞는 것 같습니다. 과거에 저는 뭔가를 기록하는 일에서 점점 멀어져서 많은 나날들을 스치듯 잊으며 지나쳤고 그게 현대인의 삶이고 나도 적응했구나 하며 당연하게 지내왔습니다. 목적이 있는 기록일지라도 지금 저는 점점 과거의 저와 다른 사람이 되어가고있고 변해가는 제 모습이 마음에 듭니다.ㅎㅎ..

1차 프로젝트를 하면서 코딩 뿐만이 아니라 정말 많은 것에 대해서 배웠습니다.
그리고 그 경험 가운데에는 동기들과 멘토님들이 있었습니다. 혼자서는 배울 수 없다는 것을 다시금 느끼며...2차 때는 더 나은 사람이 되도록 노력하겠습니다🥰