[앗차피디아] 1차 프로젝트 회고

OROSY·2021년 9월 13일
WeCodeproject앗차피디아왓챠피디아회고록
4

Project

목록 보기
2/3
post-thumbnail

🎬 앗차피디아 프로젝트 회고

👉 앗차피디아 Demo 유튜브 이동

프론트엔드 GitHub Repository
백엔드 GitHub Repository

1. 프로젝트 소개

1.1 앗차피디아 API 서비스 🔖

  • 영화 추천 서비스인 왓챠피디아를 클론한 프로젝트입니다.
  • 앗차피디아에 등록된 영화들의 상세정보를 제공합니다.
  • 앗차피디아 회원이 시청한 영화의 평점 및 리뷰 댓글을 등록 및 제공합니다.

1.2 팀원 소개 🙋‍♂️

  • Front-End : 김영호, 김영현, 김태수
  • Back-End : 성우진, 손명희, 이무현

1.3 작업 기간 📅

2021.08.30(월) ~ 2021.09.10(금)

2. 적용 기술

2.1 Front-End ⏩

  • JavaScript (ES6)
  • React.js
  • React-Router
  • Scss
  • AWS EC2

2.2 백엔드 ⏪

  • Python, Django web framework
  • Bcrypt
  • JWT
  • MySQL
  • AWS EC2, RDS

2.3 협업 툴 🛠

2.4 개발 방법론 🕶

  • Agile 방법론

3. 주요 구현 사항

직접 구현한 기능은 ✅, 팀원이 구현한 기능은 ✔️로 표시했습니다.

3.1 회원가입, 로그인

✅ JWT 토큰을 이용한 회원가입, 로그인, 로그아웃 기능
✅ 로그아웃 시 저장된 토큰 삭제하여 메인페이지로 이동
✅ 유효성 검사 로직에 따른 레이아웃 및 모달창 구현
✅ this.props.children과 컴포넌트 재사용을 통한 레이아웃 구현

3.2 내비게이션 바

✔️ 인기검색어가 포함되어 있는 검색 기능
✅ 로그인, 로그아웃 시 내비게이션 바 레이아웃 변경
✅ filter, map 메소드를 통한 연관 검색어 기능

3.3 메인 페이지

✔️ 국가, 장르, 별점 순으로 필터링된 데이터를 통해 레이아웃 구현(캐러셀)
✔️ 동적 라우팅을 통한 상세 페이지 이동
✔️ 조건부 렌더링을 통해 별점 4.0 이상인 영화에 앗차픽 로고 구현

3.4 상세 페이지

✔️ 모달창을 이용한 코멘트 남기기를 클릭하여 fetch로 서버에 넘기고 불러내 새로고침 시 코멘트에 추가
✔️ onMouseEnter, onClick 등의 기능에 따른 별점 기능 구현
✔️ 유튜브 영상 ID를 통한 URL 연결

3.5 마이 프로필

✔️ 로그인한 회원이 마이 프로필 클릭 시, 별점 평가한 영화 개수 구현
✔️ 사용자가 별점 평가를 진행한 목록을 map 메소드를 통해 구현하여 포스터, 타이틀, 본인의 별점 확인 가능

4. 기억하고 싶은 코드

4.1 연관 검색어 기능 🧑‍💻

<div className="related-movie">
  {filteredMovies.length !== movies.length &&
    filteredMovies.map(movie => {
      return <p className="pTag">{movie.movie_name}</p>;
    })}
</div>

4.2 this.props.children 🧑‍💻

// 부모 컴포넌트
<div className="form">
  <FormLayout>
    <h2 className="title">{title}</h2>
    // ... 중략
  </FormLayout>
</div>
// 자식 컴포넌트
<div className="container">
  <header className="logo">
    <img
      src="/images/AtchaPedia_Logo_Big.png"
      alt="atcha"
      className="logo"
    />
  </header>
  {this.props.children}
</div>

4.3 JWT 토큰을 이용한 로그인 기능 🧑‍💻

handleLogin = () => {
  fetch(`${USERS_LIST}/login`, {
    method: 'POST',
    body: JSON.stringify({
      email: this.props.email,
      password: this.props.password,
    }),
  })
    .then(response => response.json())
    .then(response => {
      if (response.auth_token) {
        localStorage.setItem('login-token', response.auth_token);
        localStorage.setItem('username', response.user_name);
        alert(`${response.user_name}님 환영합니다.`);
      } else if (response.message === '존재하지 않는 아이디입니다!') {
        alert('존재하지 않는 아이디입니다.');
      } else {
        alert('비밀번호가 일치하지 않습니다.');
      }
    });
};

4.4 객체를 활용한 컴포넌트 재사용 🧑‍💻

{modalOpen && (
  <Modal open={modalOpen} close={closeModal}>
    <Form
      type={modalOpen}
      title={modalOpen === 'login' ? '로그인' : '회원가입'}
      inputData={
        modalOpen === 'login' ? inputData.slice(1, 3) : inputData
      }
      openModal={openModal}
    />
  </Modal>
)}
// ... 중략

const inputData = [
  {
    type: 'name',
    text: '이름',
  },
  {
    type: 'email',
    text: '이메일',
  },
  {
    type: 'password',
    text: '비밀번호',
  },
];

5. 프로젝트 후기


드디어 2주간의 프로젝트가 끝났습니다. 지금까지는 프론트엔드끼리의 프로젝트, 백엔드와는 로그인, 회원가입만을 진행하며 아주 간단한 통신을 진행했습니다. 이번에는 클론 프로젝트이지만, 실제로 프론트와 백이 만나 AWS를 통해 배포를 완료한 웹 서비스를 구현할 수 있던 기회였습니다.

어쩌다보니 이전에 코드카타 혹은 프로젝트를 진행했었던 팀원들이 있어서 초반부터 어색한 느낌이 많이 없었습니다. PM인 우진님을 주축으로 6명이서 끊임없는 소통과 협업으로 제 스스로 굉장히 만족할만한 프로젝트가 되었습니다. 6명의 모든 인원이 본인이 맡은 기능들을 책임감 있게 해내는 모습을 보면서 서로에게 영감과 자극을 주었던 것 같습니다.

영은 코치님이 이야기하셨던 마지막에 헤어짐이 아쉬울 팀이 되는 것을 목표로 단순한 프로젝트 결과뿐만 아니라 소통, 협업의 면에서 다들 달려와줬던 것 같아 팀원 모두에게 너무 감사할 따름입니다.

모두에게 큰 감사함을 전하며, 이 아쉬움은 추후에 리팩토링을 진행하며 해소할 수 있으리라 믿습니다. 🙏

5.1 잘한 점 👏

🤗 팀 분위기를 밝게 가져갈 수 있도록 내성적인 팀원에게 먼저 다가가 말을 건넸습니다. 작은 농담에도 크게 웃으며, 진지한 프로젝트 과정 속 유연함을 더할 수 있도록 노력하였습니다.

🤗 프로젝트 5일차, 금요일에 멘토님께서 더욱 좋은 코드를 위해 this.props.children과 컴포넌트 재사용에 관한 코드 리팩토링을 제안하셨습니다. 처음에는 완전히 코드를 뒤엎는 과정이라 약 하루 간의 오랜 고민을 갖고 주말부터 실제로 적용해보기 시작했습니다. 결과적으로, 저 스스로도 만족할만한 코드를 작성했고 성장의 발판이 될 수 있는 계기가 된 것 같습니다.

🤗 1차 프로젝트 발표 시에 직접 키노트를 작성하며, 직접 웹 서비스를 시연하며 프론트엔드에서 구현한 기능에 대해 발표하였습니다. 정해진 시간 내에 개발자로서 프레젠테이션은 어떠한 과정으로 진행되어야하고 무엇을 강조하여 청중을 설득해야하는지에 대해 생각할 수 있는 계기가 되었습니다.

5.2 아쉬운 점 🤦‍♂️

🤔 담당했던 Navbar, 로그인, 회원가입 등이 실제로 메인페이지나 상세페이지에 비해 보여지는 화면을 구현하는 기능이 아니었기 때문에 스스로를 비교하며 의구심을 가진 시간이 많았습니다. 결국, 비교해야하는 것은 이전의 저와 현재의 저라는 것을 깨닫고 난 후, 당장 내 앞에 주어진 업무에 집중해야한다는 점을 배우게 되었습니다.

🤔 백엔드와의 소통에 있어서 처음이었기 때문에 로그인, 회원가입을 진행하며 단순히 구현과 기능에만 집중했습니다. 결국, Merge를 완료하고 실제로 테스트를 진행했을 때, 백에서 구현한 예외처리가 프론트에서는 진행되지 않았던 점을 발견하게 되었습니다. 발견 후, 수정은 바로 완료하였으나 이러한 이유 등으로 프론트와 백의 긴밀한 소통이 매우 중요하다는 점을 느끼게 된 계기가 되었습니다.

profile
OROSY
Life is a matter of a direction not a speed.
이전 포스트

[앗차피디아] 1차 클론 프로젝트 개요

다음 포스트

[FILLING] 2차 프로젝트 회고

0개의 댓글