🌟1차 프로젝트 - Beats🌟

Wecode 8기를 시작한지 6주차에 1차 프로젝트를 2주간 진행하였다.
프로젝트 팀은 4명의 개발자 Front-End 3명, Back-End 1명 으로 구성하여 협업하였다.

소개

• 프로젝트 기간 : 2020.5.25 ~ 2020.6.5 (2주)
• 프로젝트 팀 이름 : 4Beats
• 팀 구성 : FrontEnd 3명, BackEnd 1명
• 프로젝트 클론 사이트 : https://www.beatsbydre.com/
• 유투브 링크 : https://youtu.be/SYwS8Oii69w
• Github 링크 : https://github.com/Gogyungho/4-Beats-frontend

프로젝트 목표

• beatsbydre.com 사이트의 interface 와 동일하게 화면 구현하기
• 실제 사이트에 없는 회원가입/로그인, Cart, 마이페이, 결제내역 기능 추가하기
• Back-End API를 통해 데이터를 GET / POST / DELETE 하기
• trello를 사용해 협업하며 매일 아침 Stand Up 미팅과, 스프린스 스크럼 미팅 진행하기

사용된 기술

• Front-End : ReactJs, Sass
• Back-End :Django, MySQL(Back-End Repository)

담당한 부분

로그인, 회원가입, 제품의 상세 페이지, 그리고 Support페이지
우선, Beats(https://www.beatsbydre.com)에는 로그인, 회원가입 페이지가 없었다. 그래서 다른 웹 사이트의 로그인 회원가입를 차용해 Beats 홈페이지에 어울리게 다시 디자인을 하였다.
로그인, 회원가입은 Modal로 구성하였다.

• 실제 Beats 홈페이지 메인 화면을 보면 이렇게 구성되어있다.
  

• 오른쪽 상단에 로그인 버튼을 넣은 우리 프로젝트 메인화면 부분이다.
  

• 여기서 로그인 버튼을 누르면 Modal로 만들어진 Login 화면이 나온다.
  

• "@" 를 포함한 Email주소와 8자 이상의 Password를 입력하면 버튼이 활성화가 된다.
  

• 회원가입을 하려면 Login 버튼 아래 Sign Up 버튼을 누르면된다.
  

• SignUp 창 또한 버튼이 활성화가 된다. 우선, 모든 입력창이 채워져하고, Email과 Password는 정규식을 사용해서 Email은 @와 .이 반드시 들어가야 하고, password는 8~20자사이 영문과 숫자로 구성되어야 한다.
  

• 회원가입이 완료가 되면 메인화면의 Login 버튼은 SignUp 때 입력했던 username으로 바뀐다.

• 두번째로 맡은 부분은 Support 페이지 이다. 페이지의 자세한 구성은 위에 유투브 링크로 들어가서 볼 수 있다. (0:41)
  

• 세번째로 맡은 부분은 제품의 상세 페이지이다. Beats의 제품 중 Pill 스피커의 상세 페이지를 담당하였다. 이 또한 페이지의 자세한 구성은 유투브 링크로 들어가서 볼 수 있다. (1:35)
  

잘한점

• 우선 프로젝트를 무사히 마쳤다는 것이다. 프로젝트 첫날 우리가 목표했던 페이지와 기능들을 잘 구현하였고, 완성도 높은 결과물을 만들었다.
• 매일 아침 진행되는 StanUp Meeting으로 팀원들 간에 충분한 커뮤니케이션이 이뤄지면서 전체적인 진행 사항들을 매번 확인할 수 있었고, 서로 구현해야 할 기능들을 적절하게 나눠서 프로젝트 후반부에는 Conflict를 최소화 할 수 있었다.
• 로그인 회원가입을 Modal로 effect 까지 추가하여 구현하였다.
• BackEnd팀원과 통신을 통해 데이터가 제대로 전달이 되는지 테스트 함으로써 작업의 흐름을 이해할수 있었다. 그리고 내가 넣고자 하는 기능을 잘 조율해서 구현할 수 있었다.
• 이제 git이 익숙해 졌다.
• 프로젝트 deadline을 하루 반 남기고, 내가 맡은 제품 상세 페이지를 밤새면서 작업하였다. 꼭 해보고싶었던 Sticky부분을 실제 홈페이지와 똑같이 구현하였고, 앞서 Support 페이지에서 완벽하게 구현 못한 기능을 했다는 점에서 개인적으로 잘했다고 칭찬..해 주고싶다..

아쉬운점

• 코딩을 겨우 한달 배우고 나서, 6주차에 바로 프로젝트를 진행하게 되면서 프로젝트 초반에 갈피를 못잡고 헤맨부분이 가장 아쉽다. 로그인 회원가입 페이지를 구상하는데, Beats에는 없는 기능이라 다른 웹 페이지의 로그인 회원가입 디자인과 기능을 가져와 리디자인 해야했다. 그리고 처음 들어보는 Modal로 작업해야 했기 때문에 해당 기능을 공부하고, 익히는데 시간이 많이 소요되었다. 결국 Modal로 로그인 회원가입 페이지 UI잡고 로직짜는데 4일이 걸렸다..(이것도 결국 나중에 또 수정을 했지만..) 이 부분이 너무 아쉽다. 협업 프로젝트가 처음이라 어려운 문제에 직면했을때 멘탈이 나가서 혼자 끙끙 앓았는데, 팀원들에게 도움을 청하고, 멘토님에게 상담을 받은 후 다시 멘탈을 잡고 완성시킬수 있었다. 이때 크게 배운 점은 팀원들과 협업을 하면서 이뤄지는 커뮤니케이션은 단순히 기능적인 부분만 하는게 아니라 점이다. 부족한 나를 많이 배려해주고, 서로에게 항상 좋은 말을 많이 해준 팀원들에게 감사할 뿐이다.
• 꼭 해보고 싶었던 기능들을 해보지 못한 점이 아쉽다. map함수와 filter함수를 해보고 싶었다. 클론코딩 프로젝트 하면서 필수적으로 들어가는 부분이다. 하지만 프로젝트 직전에 map함수와 filter함수 세션을 한번 듣고 제대로 공부할 시간없이 프로젝트가 진행되면서 나에게는 아직도 미지의 영역이다. 2차 프로젝트에서는 반드시 map함수와 filter함수를 맡아서 하리라..

기록하고 싶은 코드

1. SignUp.js

FetchRegister = () => {
    fetch(`${API}/register`, {
      method: "POST",

      body: JSON.stringify({
        email: this.state.email,
        password: this.state.password,
        first_name: this.state.first_name,
        last_name: this.state.last_name,
      }),
    }).then((res) => {
      if (res.ok) {
        localStorage.setItem("Authorization", res.Authorization);
        alert("WELCOME TO THE BEATS");
        this.props.switch();
      }
    });
  };

  handleClickEvent = () => {
    const { email, password, password_re, first_name, last_name } = this.state;

    if (
      email &&
      password &&
      password_re &&
      password === password_re &&
      first_name &&
      last_name
    ) {
      this.FetchRegister();
    }
  };

• fetch함수를 함수화 시켜서 호출했다.
• Config를 사용해서 API의 공통된 부분을 변수화 시키고, endpoint는 fetch함수에서 직접 작성해 주었다.

const SpeakerImg = {
  0: {
    src: `${Config.ProductsPillColor}/white_thqrt_retina_1800x1800_V2.png`,
  },
  1: {
    src: `${Config.ProductsPillColor}/black_thqrt_retina_1800x1800_V2.png`,
  },
  2: {
    src: `${Config.ProductsPillColor}/_0001_rgb_ML4Q2-RGB-thrqtrlft_V2.png`,
  },
};

class ProductsDetailPage2 extends React.Component {
  state = {
    isActive: 0,
    view: 0,
  };

  ImgSelect = (number) => {
    this.setState({ view: number });
  };


......
  <div className="ColorList">
                    <div className="WhiteWrap">
                      <div className="White">
                        <div
                          className="WhiteBox"
                          onClick={() => this.ImgSelect(0)}
                        />
                      </div>
                      <div className="TextWhite">White</div>
                    </div>
                    <div className="BlackWrap">
                      <div className="Black">
                        <div
                          className="BlackBox"
                          onClick={() => this.ImgSelect(1)}
                        />
                      </div>
                      <div className="TextBlack">Black</div>
                    </div>
                    <div className="RedWrap">
                      <div className="Red">
                        <div
                          className="RedBox"
                          onClick={() => this.ImgSelect(2)}
                        />
                      </div>
                      <div className="TextRed">Red</div>
                    </div>
                  </div>

색상 버튼을 클릭하면 해당 사진이 나타나는 코딩이다. state값 view를 0으로 주고, 이게 default값 0(white)이 된다. 1(black), 2(red)가 되는것이다. 이또한 중복되는 주소를 Config에 변수화시키고, endpoint는 직접 작성해준것을 볼수 있다.

느낀점

프로젝트를 마무리하고 전반적으로 느낀점은 별거 아니라고 생각했던게 사실 가장 중요하다는 것이다. 코딩을 하고, 기능 구현하는게 더 중요하다고 생각했다. 하지만 프로젝트 초반부터 멘탈이 나갈정도로 힘든 상태에 직면하고, 더 이상 어떻게 코딩을 짜야할지 막막한 상태에서 무엇을 해야할지 몰랐을때 해결해준건 커뮤니케이션이었다. 같은 팀원들에게 도움을 요청하고, 멘토님과 대화를 나누었다. 그리고 거짓말처럼 해결되었다. 프로젝트 시작할때 커뮤니케이션이 왜 중요하다고 했는지 제대로 느꼈다. 혼자 끙끙 앓는다고 해결되는건 없다..
그리고.. 적절한 스트레스는 나를 성장시킨다... 적절하지 않은 스트레스 였지만..