(2차 프로젝트) Harry Potter 후기

🤘🏻 프로젝트 소개

2차때 진행하게 된 프로젝트는 영화 해리포터의 작가 J.K. 롤링이 만든 해리포터 공식 웹사이트 클론이다. 해리포터 관련 퀴즈와 기숙사 배정을 할 수 있는 페이지가 있어서 간접적으로 영화속 마법 세계를 체험해 볼 수 있다! 이번에도 백엔드 2명 프론트엔드 3명 총 5명이 한 팀으로 프로젝트를 진행했다.
https://www.wizardingworld.com/

🖥 사용된 기술

• React
• Styled-Component
  1차 때는 Sass를 사용한 반면 이번에는 실무에서 많이 사용한다는 styled-component 스타일링 방식을 사용했다.
  이번에 내가 맡은 부분은 로그인&회원가입(구글로그인 포함), sorting(기숙사 배정 페이지), passport 이렇게 세 가지!

1. 로그인 페이지

2. sorting 페이지

선택지를 다 선택하면 그리핀도르, 슬리데린, 후플푸프, 래번클로 중에서 한 곳의 기숙사를 배정받게 되고 배정받은 기숙사에 맞춰 passport 페이지의 배경이 바뀌게 된다!

3. passport 페이지(기숙서 배정 전과 후)

🔎 회고

• 잘한점

1. 라이브러리 사용하지 않고 이미지 슬라이더를 구현한 것
   대부분 1차 프로젝트때는 라이브러리를 사용하지만 2차 프로젝트때는 라이브러리 사용을 지양한다는 멘토님의 말씀에 따라 라이브러리없이 이미지 슬라이더를 구현했다. 사실 1차때에도 라이브러리를 사용한 적이 없어서 한번 써보고 싶었지만 다른 동기분들도 라이브러리없이 슬라이더를 구현해서 도움을 받아서 구현할 수 있었다. 처음에 슬라이더에 대한 감이 전혀 없었지만 구글링과 유튜브를 보면서 감을 잡았고 모르는 부분은 동기분들께 물어가며 구현할 수 있었다.

2. 가지치기로 프로젝트의 완성도를 높인 것
   백엔드분이 홈페이지 조사를 너무 잘 해주셔서 전체적인 구성을 빠르게 파악할 수 있었고 모든 페이지를 다 만드는 것 보다 기본이 되는 부분(메인페이지, 로그인&회원가입, 헤더&네이게이션바)와 대표적인 페이지 3가지로 추려서 구현하기로 했다. 그래서 백과 프론트 서로가 작업한 부분에 대해서 100% 적용시킬 수 있었고 여유롭게 프로젝트를 마무리할 수 있었다.

3. 효율적인 코드를 구현하고자 노력한 것
   다른 팀들은 타입스크립트, 리덕스 등을 공부해서 프로젝트에 사용했지만 우리팀은 굳이 리덕스를 사용할 필요도 없었고 아직은 새로운 언어를 사용하기에는 리액트도 부족하다고 생각했다. 그대신에 조금더 효율적인 코드를 작성하려고 노력했다. 일단은 내가 생각한 대로 코드를 짠 다음에 멘토님들께 리뷰를 받아가며 수정하며 리팩토링했고 코드리뷰 때 리뷰받은 부분도 바로바로 수정하면서 깔끔한 코드를 짜기위해 노력했다.

4. 프론트끼리 협업
   1차 프로젝트때는 여러가지 이유로 프론트끼리 서로의 코드나 진행과정을 제대로 공유할 기회가 많이 없었다. 이번 프로젝트때는 프론트끼리 모르는 부분은 질문하면서 서로의 코드를 볼 수 있는 기회가 많았다. 그래서 프론트 두 분이 구현한 무한스크롤이나 동적라우팅 같은 부분의 코드도 내가 직접 구현하지는 않았지만 어떤 방식으로 구현했는지 알 수 있었다.

• 아쉬운점

1. 구글 소셜로그인
   구글 소셜로그인은 라이브러리를 사용해서 구현했다. 그러다보니 버튼을 꾸미는데 한계가 있어서 라이브러리를 사용하지 않고 다시 만들까 생각했지만 이미 로그인&회원가입을 구현하는데 일주일이란 시간을 보냈기 때문에 다시 구현하는데 무리가 있어서 하지는 못했다. 만약 다음에 다른 소셜로그인을 구현할 일이 있다면 꼭 라이브러리를 사용하지 않고 구현해보고 싶다.

2. 내가 맡은 부분 제대로 파악
   기숙사 배정 페이지는 한번 선택해서 배정받게 되면 다시 선택할 수 없었기 때문에 프로젝트 시작하고 일주일이 지났을 때까지 구성을 제대로 파악하지 못했다. 하루만에 페이지를 보고 급하게 구현하려고 했더니 백엔드한테 받을 데이터도 백에서 먼저 물어봐서 확인후에 요청하게 됐다.. 어떤 이유에서라도 맡은 페이지 구성은 제대로 파악하고 미리미리 백과 이야기를 해서 진행할 필요성을 느꼈다.

📝 기록하고 싶은 코드

  render() {
    const obj = {
      1: <StepOne goNext={this.goNext} />,
      2: <StepTwo goNext={this.goNext} />,
      3: <StepThree goNext={this.goNext} handleFetch={this.handleFetch} />,
      4: <Finish />
    };

    const { step } = this.state;

    return (
      <SignUpComponent>
        <Header hide={step}>
          {step !== 1 && <ArrowIcon onClick={this.goBack} />}
          <Step>
            <Number>01</Number>
            <ProgressBar>
              <Line step={step}></Line>
            </ProgressBar>
            <Number>03</Number>
          </Step>
          <CloseIcon onClick={this.goToMain} />
        </Header>
        {/* 회원가입 단계별 컴포넌트  */}
        {obj[step]}
      </SignUpComponent>
    );
  }

회원가입과 sorting 페이지에서 url을 이동하지 않고 세 가지 부분을 보여줬어야 했는데 각각을 컴포넌트로 만들고 객체와 state로 관리했더니 한 페이지에 다 작성하는 것 보다 직관적이고 깔끔하게 코드를 구현할 수 있었다.