코드스테이츠와 함께 한지 벌써 반년은 훌쩍 넘었다.
6월말부터 시작했던 파트 프리코스를 시작해서 파트 이머시브까지 모든 과정이 끝나고
이제 first project 와 final project만이 남아 있는 상황이다.
처음 코드스테이츠를 시작했을 때는 if문도 for문도 몰라서 쩔쩔 맸는데,
이제는 nodejs를 활용해서 서버도 구축하고 mysql과 sequelize를 활용해 데이터베이스도 처리하고 있으니
엄청난 발전이라고 생각한다.
하지만 아직 많이 부족하고 project를 가기 위한 마지막 hiring assessments를 겪으면서 느꼈던 것들을
블로그에 남기려고 한다.
크게 server와 client를 구현해야하는데 먼저 server에 대해 얘기해보자.

server

server에서는 이미 config.js에 db에 관련된 코드가 다 작성되어 있어서 .env파일에 필요 정보만 입력하고 sequelize문으로 쉽게 데이터 베이스를 만들 수 있었다.
그리고 model은 파일이 이미 만들어져 있었는데 필요한 칼럼이 부족해서 코드를 직접 작성하려다가 sequelize문으로 하는 편이 좀 더 시간을 절약할 수 있을 것 같아서 기존의 model을 삭제하고 sequelize문으로 새로운 모델을 생성하여 running migrate로 table까진 쉽게 구현 하였다.
이번 ha에서는 https와 세션을 활용해야 하기 때문에 index.js부분을 수정을 많이 했어야했는데 key.fem과 cert.fem을 먼저 mkcert로 server에 파일을 받아주고 거기에 관련된 코드를 수정해주었다.
이부분에서는 아직 코드가 익숙하지 않아서 기존 session sprint에 있는 코드를 활용하였고!
cors설정과 session 설정도 잘 마무리할 수 있었다.
그리고 로그인,로그아웃,회원가입,회원정보에 관련된 코드를 작성하였는데 로그인과 로그아웃 그리고 회원정보 같은 경우는 이전 스프린트에서 학습했던 내용이였기에 쉽게 진행이 가능했지만,
회원가입 부분에서 요청 받은 email,password,mobile,username을 db에 넣어줘야하는데 그 부분에서 코드구현이 쉽지가 않아서 정말 많이 헤매다가 구글링 도중 findOrcreate라는 메소드를 알게되었고 이 메소드를 활용해서 다행히 쉽게 코드를 구현할 수 있었다.
findOrcreate 메소드에 대해 간단히 설명하자면 where과 defaults를 가지고 있는데 where 조건에
email을 넣어줘서 동일한 email이 존재하는지 여부를 먼저 확인한다.
email이 존재한다면 false라는 boolean값을 리턴하게 되고 존재하지 않으면 true를 리턴하게 되는데
존재하지 않는 email은 defaults값이 된다.
즉, 존재하지 않는다고 가정하면 defaults값은 email,password,mobile,username이 되는 셈이다.
그래서 defautls값을 가진 객체와 boolean값을 배열형태로 리턴한다.

  //findOrCreate - 특정 요소를 검색하거나, 존재하지 않으면 새로 생성
    //findOrCreate 메서드는 DB에 특정 요소가 존재하는지 검사합니다. 
    //만약 존재한다면 해당하는 인스턴스를 반환하고, 그렇지 않으면 새로 생성합니다.
    // 새로 생성하면 true, 생성하지 않으면 false 반환
      user.findOrCreate({where: {
        email: email,  
      }, 
       defaults: {
         username: username,
         password: password,
         mobile: mobile
       }
    })
    // findOrCreate => [user값, boolean] 배열형태 
    .then(([user, created]) => {
      // false 라면 409상태와 'email exists'
      // console.log(user)
      // false, email 존재한다면
      if (!created) {
        res.status(409).send('email exists');
      }
      // true, email 존재하지 않으면
        res.status(201).send(user);
    });
  },

좀 시간이 걸렸지만 그래도 server부분은 잘 마무리하였고 늦지 않게 client부분도 코드를 작성할 수 있었다.

client

client는 react를 사용 하는데 axios로 서버에 요청을 보내는 코드들을 작성하였다.
로그인 화면을 생각해보면 가입된 회원의 email과 password를 입력해서 로그인 버튼을 클릭하면
mypage화면으로 이동을 하는 과정인데 이를 구현 하기위해서 입력했던 email과 password가 비어 있지 않고 입력된다면 axios로 url과 입력한 email과 passowrd를 data로 보내 주는 코드를 작성하였다.
그리고 그걸 잘 받으면(then) app.js에 만들어져 있는 handleResponseSuccess를 활용해서 app.js에있는 state의 userinfo값을 변경시켜주어 server에 보내주도록 하였다.

// login.js 부분 
handleLogin = () => {
    // TODO : 서버에 로그인을 요청하고, props로 전달된 callback을 호출합니다.
    // TODO : 이메일 및 비밀번호를 입력하지 않았을 경우 에러를 표시해야 합니다.
    
    if(!this.state.email && !this.state.password) {
      return this.setState({errorMessage: '이메일과 비밀번호를 입력하세요'})
    } 
      axios.post('https://localhost:4000/signin', 
      {
        email: this.state.email,
        password: this.state.password
      })
      .then(() => this.props.handleResponseSuccess())
      .catch(err => err)
  };

//app.js 부분
 handleResponseSuccess() {
    // TODO: 이제 인증은 성공했습니다. 사용자 정보를 호출하고, 이에 성공하면 로그인 상태를 바꿉시다.
    axios.get('https://localhost:4000/user', {
      withCredentials: true
    })
    .then((res) => {
      console.log(res)
      this.setState({isLogin: true, userinfo:res.data});
      this.props.history.push("/mypage")
    })
    .catch(err => err)
  }

이런식으로 로그인 부분을 구현하였고 회원가입도 이와 비슷해서 쉽게 구현할 수 있었다.
마지막으로 mypage부분은 파일에 코드가 아무것도 없어서 살짝 당황...했지만!ㅋㅋㅋ
필요한 정보(email,username,mobile)를 div로 만들어 화면에 보이게해주고 로그아웃 버튼을
생성해서 app.js에 필요한 props를 mypage.js로 보내줌으로써 무사히 코드를 구현할 수 있었다.
마지막 로그인과 회원가입 그리고 로그아웃이 잘되는지 확인을 해보았는데 다행히 잘 작동되서 시간내에
ha를 마무리 할 수 있었다.

HA를 끝내고 느낀점

client server db 까지 전체적인 싸이클을 생각하면서 코드를 작성하였는데
아직까진 부족하다는 느낌이 정말 많이 들었다.
구글링과 기존에 배웠던 sprint코드를 참고하지 못했다면 ha를 끝낼 수 있었을지 의문이다..
예전에도 느끼고 있었지만 ha를 진행하면서 중요하게 생각된 부분은 전체적인 흐름을 잘 이해하는 것이다.
내가 쓴 코드가 client에 server에 그리고 db에 어떤 영향을 주는지 파악하는게 코드를 작성할때 생각할 수 있는 실마리를 주어 큰 힘이 되는 것 같다.
그리고 server에서는 console.log()를 활용해서 정보를 확인할때 터미널로 npm test명령어를 줘서 확인했는데 이건 코드스테이츠 측에서 확인하게 코드를 작성해 주신 것 같다...
그래서 project를 진행할때는 postman에 좀 더 공부해서 익숙해지도록 해야할 필요성을 느꼈다.
아직은 잘 사용을 못한다ㅠㅠ

마지막으로 프로젝트를 들어가면서 프론트엔드가 될지 백엔드가 될지 아직은 모르지만!
좋은 팀원들을 만나서 코드스테이츠와의 마지막 여정인 프로젝트도 잘 마무리하고 싶다.!!!