23년 3월 6일

배운 것

오늘부터 입문주차에서 했던 것처럼 숙련주차 개인프로젝트를 시작하였다. 오늘은 회원가입 API와 로그인 API를 구현하였다.

시도 한 것

이번 개인 프로젝트는 기존에 입문주차때 구현했던 게시판 프로젝트를 확장해서 회원가입과 로그인 API를 추가적으로 구현을 하고 난 후, 로그인 하고 받은 토큰을 가졌을 때 본인 게시글과 댓글 모두 생성, 변경, 삭제를 할 수 있게 구현을 하는 것이였다. 다만 이거는 LV2 과제고, LV3 과제도 있는데 이거는 sequlize와 mysql을 이용해서 API를 작성하는 것인데, 다만 LV3은 선택이고 LV2는 필수이기에 우선 LV2 과제부터 해결하는데 우선 집중 하였다.
다만 입문주차때 구현했던 LV1 과제에서 상당히 복잡한 코드로 작성을 하였고, 다시 한번 더 API 구현하는 연습을 하기 위해서 아예 새로운 파일에다 다시 처음부터 만들기로 결정했다.

Directory Structure는 사진에 나와 있는 대로 정하였다. 입문주차랑 비교하면 상당히 많은 파일이 생겼는데 먼저 미들웨어 폴더가 새로 생긴 것을 알 수 있다. 이 미들웨어는 웹 서버에서 요청을 받을때 가끔 모든 요청에 대해 공통적인 처리를 하고싶은 경우가 생길 수 있는데 미들웨어를 통해 웹 서버의 요청/응답에 대해 공통적으로 관리가 가능하다. 그래서 나는 공통적으로 게시글이나 댓글을 생성, 수정, 삭제 하려고 했을때 그 토큰을 받은 사람만 이용 가능 하게 정의를 할 것이고, 만약 토큰이 없으면 로그인 후 이용 가능할 수 있다고 중간 역할로 정하였다. 쉽게 말하면 회원의 유무에 따라서 이용 가능한 서비스가 더 생긴다고 보면 된다.
다음은 routes폴더에 auth와 users가 새로 추가된 것을 볼 수 있다. auth는 로그인 API 구현할때 사용할 것이고, user는 회원가입 API 구현에서 사용 할 것이다. schemas 폴더에서도 user는 회원가입 한 사람들의 데이터 정의를 하기 위해서 만들었다.
나머지는 입문주차때 있었던 파일들이므로 해당 부분은 22일차때 적은 TIL을 보면 된다.

제일 먼저 회원가입 API를 구현하기 시작하였다. 물론 강의노트에서도 회원가입 API를 구현하는건 있었지만, 문제는 추가적인 조건이 다음과 같았다.

다른 것은 몰라도 닉네임 생성 조건이랑 닉네임과 같은 값이 포함된 비밀번호는 회원가입 못하게 하는 조건이 들어 있었다.
회원가입 API 자체 틀 정도는 강의노트를 보면서 했기 때문에 크게 어려운 건 없었는데 바로 저 조건들이 문제였다. 그래서 아침부터 오후 3시까지 정말로 구글링과 ChatGPT를 이용해서 겨우 구현을 하였다.

nickname: { // nickname 필드
    type: String,
    required: true,
    unique: true,
    trim: true, // 공백제거
    minlength: 3,
    match: /^[a-zA-Z0-9]+$/
  },
  password: { // password 필드
    type: String,
    required: true,
    minlength: 4,
  },

먼저 닉네임 대문자,소문자,숫자만 쓰게 하는 것은 정규 표현식을 이용하면 되었다. match에 있는 것이 바로 정규표현식으로 소문자,대문자,숫자만 적을 수 있게 조건을 세울 수 있다. minlength는 최소 글자 수 지정으로 해당 숫자 글자수 이상만 적을 수 있게 구현을 하였다. trim은 중요한건 아니지만 공백을 제거하는 함수이다. 닉네임을 스페이스눌러서 띄어서 쓸수도 있기 때문에 공백도 허용을 하지 않는 것이라고 보면 된다. 그래서 정규표현식 덕분에 해결을 할 수 있었다.
또 다른 것은 닉네임과 깉은 문자열이 포함된 비밀번호를 적으면 회원가입 못하게 하는 기능은 바로 includes 함수를 이용하면 되었다.

// 패스워드가 닉네임이랑 포함된게 있을때
        if (password.includes(nickname)) {
            res.status(412).json({ 
                "errorMessage": "패스워드에 닉네임이 포함되어 있습니다." 
            });
            return;
        }

이렇게 구현하면 예를들어 닉네임을 developer이라고 했을때 패스워드는 developer123 이런식으로 지정하면 회원가입 못하게 할 수 있다. 마지막으로 입문주차때 시도하지 않았던 try...catch문을 사용해서 예기치 못한 오류가 터지면 catch문으로 가지고 정상적으로 전달되면 try문으로 이동해서 코드를 실행 할 수 있게 구현을 하였다. 이 try...catch문은 이후에 구현할 곳에서도 거의 다 사용을 하였다.
그 외에는 기존 알고리즘 문제 푼것을 기억하면서 구현하니까 어려운건 없었다. 저 정규 표현식이랑 includes 함수를 사용하면서 새로운 개념을 알게 되었다.

그리고 1시간 정도 쉰 후 로그인 API를 구현하였다. 로그인 API는 비교적 수월하게 진행했는데 강의노트때 배웠던 SPA-MALL 프로젝트때 적었던 코드랑 거의 비슷해서 코드 복붙하고 일부만 수정 하면 되었다. 회원가입한 닉네임과 비밀번호가 일치하면 로그인이 되고 쿠키를 발행을 해서 토큰을 얻는다. 이 역할을 하는 것이 바로 미들웨어 파일에서 적은 auth-middleware을 통해서 구현을 하였다. jwt 개념을 바로 여기서 사용을 하였다. 이렇게 로그인 API도 구현을 하였다.

그렇게 저녁이 지나서 강의 특강 세션으로 Sequelize 개념과 구현하는 방법을 들었다. 토요일에 공부했던 것이였지만 여전히 이해되지는 못했고, 그래도 다시 한번 개념을 잡는데 복습할 시간을 준 것 같았다.

시간이 남아서 입문주차때 이미 한번 구현했던 게시글 등록 API, 게시글 조회 API 추가로 더 구현을 하였다. 게시글 등록 API는 입문주차때 구현 한번 해봤지만 저번과 다르게 토큰을 얻은 회원만 이용 할 수 있게 구현해야 하는 조건이 있었다. 이것은 다음과 같은 코드를 작성을 하면 되었다.

const authMiddleware = require("../middlewares/auth-middleware.js")

router.post('/posts', authMiddleware, async(req, res) => {...})

미들웨어에서 구현했던 토큰 검사를 한 후 토큰이 있으면 게시글 작성 기능을 이용 할 수 있게 하였다. 이것은 내일부터 구현할 게시글 수정, 삭제때도 마찬가지로 저렇게 미들웨어 기능을 추가해야 로그인한 회원들만 본인 것만 수정 할 수 있다. 또한 입문주차 당시에는 findOne문을 모르고 진행했었을 때라 배열 하나 더 선언해서 push문을 사용해서 구현했는데 이번에는 findOne문을 이용해서 더 간단하게 구현을 하였다. 그리고 입문주차때 미처 구현하지 못했던 작성날짜(createAt)랑 수정날짜(upeatedAt)도 Date 함수를 정의하고 작성하였다.

마지막으로 게시글 조회 API는 기존처럼 회원 없어도 조회 가능하기에 이전 입문주차때 코드랑 비슷하게 구현을 하였고, 그때 구현 못했던 게시글 생성 날짜 기준으로 내림차순 할 수 있게 구현을 하였다. 게시글 등록, 조회 API를 구현하니까 밤이 10시가 넘었고, TIL를 작성하고 하루를 마루리 했다.

해결

오늘 구현 한 것은 회원가입, 로그인, 게시글 생성, 조회 API 총 11가지 중 4가지를 구현을 마무리 하였다.

알게 된 점

오늘 해본 느낌으로는 확실히 입문주차에 비해서 구현 하는 것을 조금 더 능력이 올라간 느낌을 받았다. 입문주차때 이틀동안 진도 제대로 가지도 못해서 거의다 팀원분들과 기술매니저님의 조언을 받고 겨우 구현을 했었는데 오늘은 팀원들에게 도움을 받지 않고 스스로 구글링과 ChatGPT를 이용해서 구현을 하게 되었다. 다만 스스로 했어서 오늘 많은 것을 구현하지는 못했지만 그래도 로그인과 회원가입 구현은 성공해서 기뻤다. 추가적으로 약간의 시간이 남아서 게시글 일부 정도는 구현을 했었고 이전보다는 조금 더 실력이 는 것 같아서 좋은 것 같다.

앞으로 할 일

내일까지 한번 LV2 개인과제를 모두 마무리 하려고 노력은 해보긴 할텐데, 만약 안되더라도 게시글 API는 모두 구현 할 예정이다.