코드스테이츠 마지막 H.A 후기 - 꿈을 기록하는 Blog

👉 드디어 모든 시험이 끝났다!

말 그대로다! 이제 코드스테이츠에서 수강생들에게 해줄 테스트 과정은 모두 끝이 났다!

그동안의 H.A시험은 1~2시간 내외로 순삭을 시켜버렸었는데.. 아니 마지막 H.A 시험은 왜이리 어려웠던지 ㅠㅠ 하루 종일을 붙잡고 있다가 새벽에 겨우 구현까지 다 끝냈다… 정말 힘들었다.. 코드 작성은 일찍 끝냈지만 기능 구현을 시험해보는데 브라우저에서 자꾸 에러가 났고 원인을 찾는데 힘들었던 것 같았다.

시험을 다 통과하고 보니 오류들은 이유없이 나는 오류가 전혀 아니였고, 내 로직의 문제가 맞았다.

시험문제를 모두 해결하니 한결 마음이 놓였고, 앞으로 프로젝트에만 신경을 쏟을 수 있어서 기분이 좋았다.

express-session 기반 인증 구현

이번 시험은 완벽히 session 기반으로 인증 구현을 하는 것이었고, 인증의 기본인 로그인과 로그아웃, 회원가입 유저 정보 요청 등등의 기능들을 구현해내는 것이었다.

오류를 해결하는 과정이 정말 힘들었지만, 돌이켜 생각해보면 정말 재미있는 순간들이었다! 고민과 사투 끝에 오류를 무찔렀을 때의 그 성취감은… 하.. 어디에 비할바 없이 최고였다.

나는 서버, 클라이언트에서 각각 난관이 한 번씩 있었는데, 먼저 서버에서는 Signup API 구현(회원가입 로직) 에서 난관이 있었다.

회원가입을 하는 것이기에 username, email, password, mobile 등 회원의 모든 정보가 필요했다. 그렇기 때문에 하나라도 적지 않으면 422코드를 보내야 했다.

모두 적었을 경우, 기존 회원인지 판단을 해야하며 기존회원이 아니라면 새로운 회원의 정보를 저장해야 한다. 그렇지 않을 경우(기존 회원인 경우) 409코드를 보내야 한다.

요청 받은 바디(req.body)에 먼저 회원 정보가 하나라도 작성했는지 안했는지를 판단했어야 했는데.. 바보같이 데이터베이스에서 findOne으로 불러와서 찾고 있었다. 즉, 로직 순서가 잘못 되었던 것이었다.

// 잘못된 코드
const userInfo = await user.findOne({
      where: {
        username: req.body.username,
        password: req.body.password,
        email: req.body.email,
        mobile: req.body.mobile,
      },
    })

if (!req.body.username || !req.body.email || !req.body.password || !req.body.mobile) {
      res.status(422).send("insufficient parameters supplied");
    }

if (!userInfo) {
  return res.status(201).send({ 유저정보 })
}



// 수정한 코드
if (!req.body.username || !req.body.email || !req.body.password || !req.body.mobile) {
  res.status(422).send("insufficient parameters supplied");
}

const userInfo = await user.findOne({
where: {
    username: req.body.username,
    password: req.body.password,
    email: req.body.email,
    mobile: req.body.mobile,
  },
})

// 새로 가입하는 유저일 경우 데이터 저장 공간 생성
if (!userInfo) {
  await user.create({
    username: req.body.username,
    password: req.body.password,
    email: req.body.email,
    mobile: req.body.mobile,
  })
  const createdUser = await user.findOne({
    where: {
      username: req.body.username,
    }
  });
// 새로 저장한 데이터는 dataValues에 들어간다.
res.status(201).json({
  username: createdUser.dataValues.username,
  email: createdUser.dataValues.email,
  id: createdUser.dataValues.id,
  mobile: createdUser.dataValues.mobile,
})
} else {
  //....
}

다른 문제들은 다 쉬웠고 이 부분만 잘 수정해주니 서버는 끝이 났다.

클라이언트는 사실 돌이켜 생각해보면… 너무 기본이 부족했다는 생각이 들었다. 클라이언트 만큼은 자신이 있었는데 이런 자신감이 오히려 독이 되었던 것 같다.

// login.js
// 생략...

handleLogin = () => {

    // 로그인 페이지에서 하나라도 작성하지 않았을 경우
    if (!this.state.email || !this.state.password) {
      this.setState({
        errorMessage: '이메일과 비밀번호를 입력하세요'
      })
      return;
    }

    axios.post('https://localhost:4000/signin', {
      email: this.state.email,
      password: this.state.password,
    }, { withCredentials: true })
    .then(() => {
      this.props.handleResponseSuccess()
      this.props.history.push("/mypage");
    })
  };

// app.js
// 생략...

  handleResponseSuccess() {
    axios.get("https://localhost:4000/user", {
      withCredentials: true,
    })
    .then((res) => {
      this.setState({
        isLogin: true,
        userinfo: res.data
      })
    });
  }

위의 코드처럼 res.data(브라우저 콘솔에서 찍히는 정보)를 넣었어야 했는데, 나는 자꾸 엉뚱한 res.data.userinfo를 넣고 있었던 것이었다…ㅠㅠ 그래서 계속 로그인 요청에서 오류가 발생했었다.

사실 이외에도 수 많은 에러를 만났지만, 그 부분들은 손쉽게 해결이 되어서 인상 깊은 에러들만 정리 해보았다.

🙌 느낀점

이렇게 코드스테이츠의 모든 테스트들을 무사히 통과를 하였고, 이제 내일 스프린트 (배포 실습)만 하면 모든 수업 과정이 끝이 난다!!!

이제 대망의 프로젝트 기간이 남아있다. 사실 이번 H.A를 통해 나의 실력을 객관적으로 판단할 수 있는 계기가 되어서 좋은 기억으로 남는다. 내가 잘했다는 뜻이 아니다. 정말 많이 부족하다는 것을 깨달았다.

기본기가 너무 많이 부족했고, 에러를 만났을 때 에러를 분석하는 능력이 많이 부족했다. 로직을 생각하는 부분도 많이 잘못되었다.

프로젝트를 시작하기 전에 4일의 솔로 스터디 기간이 주어지는데, 그때 바짝 공부해야겠다. 내가 그동안 욕심에 앞서 이것저것 강의를 보면서 많이 따라하는 것을 연습했는데, 그래서 그런지 기본기가 충분하지 않다는 것을 느꼈다.

프로젝트가 당장 다음주이지만, 어쩔 수 없다. 기본기부터 다시 하자.

👊 내일의 TIW(today I Will)

AWS Deploy

← Previous Post Next Post →