1차 프로젝트를 되돌아 보며

2020/10/19 ~ 2020/10/30

1. 프로젝트 소개

위코드 1차 프로젝트가 끝났다. 나는 stayfolio의 클론을 하게 되었다. stayfolio는 숙박 예약업소로 숙박 예약 기능이 핵심인 사이트였다. 처음 stayfolio를 선택한 이유 중 하나가 스타일이 깔끔하면서도 평범한 상품을 파는 페이지가 아닌 다른 기능을 하는 사이트를 만들어 보고 싶은 욕심에 선택하게 되었는데 좋은 선택이었다고 생각한다.

2. 처음 내 목표

• CRA 초기세팅 및 완벽히 익히기
• 팀 convention 꼼꼼하게 세우고 철저히 지키기
• 팀으로 할 때 적정 수준의 업무 분담을 어떻게 하는게 좋은지 파악하기

3. 사용 스택

React, JavaScript, HTML, sass, CRA, npm, git, prettier, ESLint, trello

4. 나의 역할

1주차 splint : Navbar 및 footer
2주차 splint : Navbar 검색기능 및 검색페이지 구현, resevation page의 정보 입력란 구현
-> 검색기능 및 검색페이지 구현은 결국 완성하지 못 함.
그 외 README.md 작성

5. 기억하고 싶은 코드

1) 2종류의 추가 옵션(조식/픽업) 선택 및 1종류 추가옵션 선택 시 총합가격 변화 코드

: 추가옵션 선택으로 조식/픽업이 있는데 조식은 선택 시 1인당 5000원이 계산되고 픽업은 무료이다.
조식/픽업 선택 여부는 boolean type으로 받고 조식 즉, optionBreakfast가 true일 때 사람 수에 따라 조식 비용 계산을 하는 함수를 작성했다.

(1) 처음 작성한 코드

  handleOption = (event) => {
    const { name } = event.target;
    this.setState({ [name]: !this.state[name] }, () => {
      const { optionBreakfast, adult, child, infant } = this.state;
      const breakFastCost = optionBreakfast
        ? 5000 * (adult + child + infant)
        : 0;
      this.setState({ optionTotal: breakFastCost });
    });
  };

처음 작성한 코드라고 되어 있지만 정확히는 2번째 작성한 코드이다. 처음에는 input value만 받게 했다가 계산하는 식을 넣어야 해서 다시 작성한 코드이다. 맨 처음에는 옵션의 추가 여부를 알기위해 If문을 작성했지만 동기의 도움을 받아 다시 수정된 코드이다.
input radio를 처음 사용하다 보니 radio가 여러 선택지 중 하나만 선택 할 수 있다는 특성을 처음 알게되어 동기가 this.setState({ [name]: !this.state[name] }으로 식을 작성해주었다. 초기값은 false 이기 때문에 조식/픽업의 input을 클릭 시 반대 값으로 변경되도록 수정되었다.
그리고 (adult + child + infant)는 인원 수 계산을 위해 state에 있는 키값을 이용한 계산을 위해 넣었다. 하지만 인원 선택시 타입이 숫자가 되도록 했는데 component를 분리했더니 계속 오류가 나서 진짜 숫자타입이 나오는게 맞는지 확인 과정을 거칠 필요가 있었다.

(2) 다시 수정한 코드

  handleOptionPrice = (name) => {
    const { adult, child, infant } = this.state;
    this.setState(
      { [name]: !this.state[name] },
      () => {
        const { optionBreakfast } = this.state;
        const breakFastCost = optionBreakfast
          ? 5000 * (Number(adult) + Number(child) + Number(infant))
          : 0;
        this.setState({ optionTotal: breakFastCost });
      },
      () => typeof this.state.optionBreakfast
    );
  };

위의 코드와 거의 흡사하지만 (Number(adult) + Number(child) + Number(infant))로 바뀌었다. 정확하게는 모르겠지만 component로 분리하고 부모에서 다시 값을 받을 때 string으로 오는 걸 확인해서 string을 number로 변경하도록 수정했다.

이 코드가 기억에 남는 이유는 원래 input의 value를 state에 저장하는 함수와 인원에 맞게 가격이 추가되는 함수를 따로 작성했다가 합치는 과정에서 꽤 많이 헤맸어서 기억에 남았다.
사실 대부분의 코드가 동기가 없었으면 혼자서는 작성하기 힘들었을 코드가 많았다. 아직 순서대로 생각하는게 나에게는 좀 어려운 생각의 방식이라 적응하는데 시간이 걸릴 것같지만 이렇게 쓴 코드들을 보면서 다시 스스로 생각하는 시간을 좀 더 투자해야겠다고 생각한다.

2) componentDidUpdate 사용하기

  componentDidUpdate(prevPros, prevState) {
    const { checkInDate, checkOutDate, adult, child, infant } = this.state;
    if (
      prevState.checkInDate !== checkInDate ||
      prevState.checkOutDate !== checkOutDate
    ) {
      this.getPrice(checkInDate, checkOutDate);
    }

    if (
      prevState.optionTotal !== this.state.optionTotal ||
      prevState.price !== this.state.price
    ) {
      this.getTotal();
    }

    if (
      prevState.optionBreakfast !== this.state.optionBreakfast ||
      prevState.adult + prevState.child + prevState.infant !==
        adult + child + infant
    ) {
      this.handleOptionPrice();
    }
  }

코드 자체는 정신없이 긴 코드에 불과할지 모르겠지만 기억에 남는 코드인 이유는 내가 처음으로 componentDidUpdate를 사용한 코드이기 때문이다. 위의 코드와 마찬가지로 우리팀의 PM님에게 큰 도움을 받았다. 이번 프로젝트에 PM님 덕분에 순서대로 생각하는 방법?을 살짝 느끼게 된것같아서 너무 감사하다.
react의 lifecycle 순서가 constructor -> render -> componentDidMount -> event 등으로 state가 이전 state와 현재의 state가 다를 때 변경되어야 한다면 componentDidUpdate를 이용해야한 다는 것을 알았다.

3) 함수 내에서 state 변화 시 바로 componentDidUpdate가 실행된다.

그리고 이 코드는 아니지만 이번에 알게 된 것중 하나는 어떤 event가 실행되고 setState로 state 변경 시 바로 componentDidUpdate가 실행된다는 것을 알았다. 이후 함수가 끝난다는 걸 알았는데 해당 함수를 저장 없이 바로 수정해서 코드를 들고오지 못 하는 것이 아쉽다.

6. 협업에 대하여

협업이란 정말 어려운 부분이다. 이번에 다시 한 번 느꼈다. 이번 팀은 전반적인 성향이 비슷한 사람끼리 모여서 처음부터 큰 걱정을 안고 시작하지는 않았지만 그럼에도 끝나 갈 때쯤은 걱정과 근심이 사라지지 않았다.
다른 사람을 배려한다는 건 나에게 너무 어려운 일인것같다. 난 단순하게 내가 하기 싫은건 남도 하기 싫다라는 기준을 가지고 행동하지만 과연 그게 맞을까하는 생각을 많이 한다. 왜냐하면 반대로 내가 괜찮은건 남도 괜찮을 것이라고 생각하고 행동하기 때문이다.
난 계획은 지켜야 하지만 언제든지 변경 될 수 있는 부분이라고 생각하는 편이지만 누군가에게는 한 번 정하면 반드시 지켜야 하는 것일 수도 있다고 생각한다. 이번에 첫 팀 프로젝트를하면서 예정되어 있던 내 일말고도 추가 기능을 발견해 검색 결과 페이지를 만든다고 중간에 많은 시간을 빼앗겼다. 하지만 결국 완성하지 못하고 필수 구현 페이지로 넘어갔다. 과연 계획을 철저하게 지킨다는 것은 무엇이고 유연하게 결정한다는 게 무엇인지 고민하게 되었다.

7. 반성

이번에 내가 navigation을 만들면서 간과한 부분이 너무 많아서 정말 수많은 수정을 하고도 제대로 맞지 않았고 검색기능도 결국에 해결하지 못 했다. 그러고 2주차 splint로 넘어갔는데 결국 검색기능을 해결하지 못하고 검색결과 화면 제작을 완성하지 못 하고 예약 화면 구현로 넘어가게되었다. 자괴감이 든다는 건 이럴 때 쓰는 말이 아닐가 싶었다.
물론 검색 기능, 검색 기능을 보여주는 화면 모두 1차 splint에 예정되어 있지 않다가 갑자기 구현 시작한 부분이었지만 내가 하기로 한 부분을 완성 못 했다는 건 팀의 계획을 지키지 못 한 것이기 때문에 굉장히 잘 못한 부분이라고 생각한다.
또한 처음부터 꼼꼼하게 알아보고 계획하지 않아 시간의 대부분을 뺏겼기에 이에 대해서도 반성이 필요한 부분이라고 생각한다.
마지막으로 중간중간 힘들 때 주변사람들에게 힘들다는 소리를 많이 하고 다닌 것에 반성한다. 그 이야기가 다른 사람의 의욕을 약간이나마 꺾지 않았지 않나하는 생각이 들어 다음부터는 좀 더 좋은 이야기를 많이 하도록 노력해야겠다.

8. 칭찬

프로젝트 시작할 때 CRA 초기 세팅을 익히는 것이 목표였는데 이번에 하게되어서 굉장히 기뻤다. 또한 계획을 세우고 모두 실행하는 부분은 실패해서 반성하기도 하지만 이를 통해 어떤식으로 일에 접근해야하는지 감을 잡을 수 있게 된 것은 매우 기쁜일이다.

9. 2차 프로젝트 목표

1차 프로젝트 목표에 있던 체크리스트를 보니 익히지 않은게 아직 많았다.

• axios를 사용해 백앤드에 api 호출하기
• 포스트맨을 사용해 api 호출 및 응답하기
• query string이나 path로 동적 라우팅 구현하기
• 자식컴포넌트에서 부모컴포넌트에 어떻게 데이터를 넘겨야 하는지
• 옮바른 질문하기
• 문제해결 능력
• redux
• AWS 사용하기
  위와 같은 것들을 2차때 꼭 해보고 싶다.

10. 더 하고 싶은 말

프로젝트를 하면서 특별히 재밌는지 모르고 했다. 딱히 재밌다고 느끼면서 한 것도 아니고 그냥 하니까 했는데 후기를 쓰면서 생각하니 재밌던 것같기도 하다. 벌써 추억이 미화되는지는 모르겠다😂
하지만 이렇게 후기를 쓰다보니 앞으로 언제 또 이렇게 화기애애하게 프로젝트에만 열중할 수 있을까 싶어 1차때가 너무 아쉽게 느껴졌다. 내가 더 열심히 할 수 있지 않았을까?하는 생각이 계속 드는 걸 보면 내가 많이 아쉬운게 아닌가 싶다. 2차때는 더 성실하고 열심히 하도록 해야겠다.

project gitgub : https://github.com/wecode-bootcamp-korea/13-stayWefolio-frontend
youtube: https://youtu.be/qz6dKgsI0Ds?t=70