Nike Project 회고록

1. 프로젝트 소개

팀명 : Naweki
내용 : Nike 사이트 클론
인원 : 5명 (프론트 : 3명 / 백엔드 : 2명)
기간 : 2주 (9.14 ~ 9.25)
코드 : https://github.com/wecode-bootcamp-korea/12-Naweki-frontend

2. 사용된 기술

Front-end : JavaScript, React, Sass
Back-end : aqerytool, selenium, python, django, bcrypt, jwt, mysql

3. 담당 역할 및 부분

• 로그인 페이지 (api 요청-post, 토큰저장, 유지, 삭제)
• 회원가입 페이지 (정규표현식 사용)
• nav 바 구성 (mock-data 활용한 Commponents map)

4. 협업하면서 느낀점

이전에는 개인 프로젝트를 하면서 협업의 경험이 없었다. "Back-end와 Front-end의 협업은 어떤 방식으로어떻게 이루어 질까?" 라는 생각만 가지고 있었을 뿐이었다. 하지만 이번에 프로젝트를 진행하면서 "소통" 이라는 것이 정말 중요하다는 생각을 하였다. 두 분야에 대해 잘 안다면 좋겠지만 그럴 수 없는 상황에서 Front-end에서 구현하고 싶은 것과, Back-end에서 구현하고 싶은것을 얘기하고 둘 다 이해했다고 생각했지만 막상 진행하다보면 서로 생각했던 것이 달랐다. 이러한 에러사항을 줄이기 위해서는 스탠딩미팅을 매일 진행하는 것으로 보완된다고 생각한다. 현재 상황과 앞으로의 계획에 대한 커뮤니케이션이 중요하다.

5. 잘한점

nav 바에 데이터를 받아오지 않기로 정하고 시작하였기 때문에 어렵지 않게 mock-data를 만들어 구성하였다. 하지만 간과했던것이 있었다. 그냥 만드는 것이 아니라 백엔드에서 데이터를 받게 되면 언제든지 데이터를 뽑아서 바로 사용할 수 있어야 한다는 것 이었다. 처음에 데이터를 만들어 구성한것이 구조가 전체적으로 잘못 구성되었기때문에 전체적인 수정에 들어갔다. 나이키 nav바에는 메인 카테고리가 4개가 있고, 또 각 카테고리별로 4~6개의 카테고리가 있고, 그 하위에 데이터가 있었다. 메인에서 Map을 4번, 그 Map안에서 6번 돌아간다. 이번에 데이터 구조를 잘못 짜게되서 전체적으로 여러번 수정하게되면서 Mock Data를 그냥 구성하는게 아니라 우선 순위에 맞게 잘 짜는법을 배웠고 각 카테고리별로 Map을 돌리는 것에 대해서도 많은것을 배웠다.

6. 아쉬운 점

Back-end와 처음에 크롤링 범위를 잡을 때, 애초에 nav바는 Front-end에서 Mock-data를 만들어 진행하기로 했기 때문에 내가 담당했던 모듈에서 백엔드와의 통신할 것은 Signup, Signin 밖에 없었다. 그렇기 때문에 주변에서 백엔드와의 통신으로 많은 데이터를 주고 받고, 여러가지 통신하는 그 희열에 맛을 보지 못하였던것 같다. 2차 프로젝트에서는 상품 리스트나 상품 상세페이지 쪽을 구현해서 그 희열에 맛을 꼭 한번 느껴보고 싶다!

7. 기록하고 싶은 코드

5개의 name 속성만 받아와서 여러가지 상태를 관리한다는 것이 신기했다. 사실 이 코드가 좋은 코드인지, 좋지 않은 코드인지는 잘 구분이 가지 않는다. 하지만 나 스스로가 어떻게 하면 코드를 줄이고 함수 하나로 이름이 다른 여러가지 상태를 관리할 수 있을까 라는 생각을 하다보니 이렇게 구성하게 되었다. 처음엔 변수가 아닌 문자열 형식으로 계속 들어가서 개선을 하려했지만 잘 안되었다. 하지만 심도 깊은? 구글링으로 인해 해결 방법을 찾아고 나의 함수에 적용할 수 있었다. 생각대로 구현이 됬다는 것 자체가 너무 뿌듯했다.

 state = {
    userEmailErrorStatus: false,
    userPasswordErrorStatus: false,
    userRePasswordErrorStatus: false,
    userNameErrorStatus: false,
    userPhoneErrorStatus: false,
    userEmailErrorMsg: false,
    userPasswordErrorMsg: false,
    userRePasswordErrorMsg: false,
    userNameErrorMsg: false,
    userPhoneErrorMsg: false,
     };

signUpInput = (e) => {
    const { name, value } = e.target;

    this.setState(
      {
        [name]: value,
      },
      () => {
        this.errMsgStatus(name, value);
      }
    );
  };

 errMsgStatus = (inputError, inputValue) => {
    const basicError = inputValue.length;

    if (!basicError) {
      this.setState({
        [`${inputError}ErrorStatus`]: true,
        [`${inputError}ErrorMsg`]: false,
      });
    } 
  }
};