마지막 HA 진행과정 (세션기반인증 구현)

데이터베이스, 서버, 그리고 클라이언트를 연결하는 내용이었다.
세션을 이용한 인증 구현이다.

🌻 1. 세팅

1. server 폴더에 package.age 를 확인해보니 노드몬이 없어서 추가했다.

2. npm install

3. 스크립트 start 에 nodemon 명령어로 수정했다.

4. .env.example 를 확인하고 .env파일을 생성했다.

🌻 2. 데이터베이스

데이터베이스를 조건에 맞게 생성한 후에야 테스트를 실행할 수 있다는 주의사항이 있었다. 조건을 차근차근 확인하며 데이터베이스를 생성했다.

1. 데이터베이스 생성

2. migrations 폴더에 있는 파일과 models 폴더에 있는 파일에 스키마를 작성했다.

3. sequelize 공식문서를 확인하며 마이그레이션을 했다.

   이 과정에서 createdAt, updatedAt 필드는 필요없는 줄알고 뺐다가,
   에러가 나서 마이그레이션을 undo 하고 다시 마이그레이션을 했다.

4. mysql 에 들어가서 해당 테이블에 필드가 잘 들어가있는지 확인했다.

🌻 3. 서버

이제 테스트를 돌리면, 잘 작동한다.

1. index 파일에 헤더와 https 설정을 해줬다.

2. 인증서 파일도 복사해왔다. (cert.pem, key.pem)

3. controllers 파일에 index 파일에서 로그인, 로그아웃, 회원가입, 정보요청 요청을 받고 응답을 보내주게 했다.
   req.body를 콘솔로 확인해보니, 어떻게 처리해야 하는지 바로 감을 잡았다.

   데이터베이스 조회가 되지않았다.
   데이터베이스를 생성할 때 작성했던 파일들을 확인하고,
   require 을 잘못했다는 것을 알아냈다. (여기서 시간을 많이 소모했다.)
   나는 const { users } = require("../models"); 를 user로 변경했다.

4. 데이터베이스를 확인해보면 유저정보 1개가 들어가 있다. 덕분에 편하게 테스트를 진행할 수 있었다. 실전에서도 레코드를 채우고, 코드를 작성하는 게 더 도움이 되겠다는 생각을 했다.

🌻 4. 클라이언트

1. pages 폴더 Signup 파일을 먼저 구현했다. (회원가입)
   버튼을 누르면 회원가입창에서 작성한 정보들은 axios 를 통해 서버로 보내줬다.

2. Login 파일도 비슷하게 구현했다. 상위 컴포넌트에서 props 를 넘기는 작업이 필요했다.

3. Mypage 에서는 props 로 내려받은 유저정보를 뿌려줬다.

테스트 케이스를 보고
expect(wrapper.find("button.btn-logout").prop("onClick")).to.eql(handler);
버튼 className을button.btn-logout 으로 작성하니 테스트가 통과에 실패했다.
구글링을 통해 해결했는데, 나처럼 진행한 동기들이 많았을 것이다 ㅋㅋ

4. 작성한 컴포넌트들의 상위 컴포넌트인 App에서 상태를 업데이트 하고,
   이벤트 핸들러들을 연결시켰다.

여기까지 하니 모든 테스트케이스는 통과하였다.
하지만 마지막으로 해야할 일이 남았다.
웹 어플리케이션이 제대로 작동하는지 시연영상을 찍는 것이다.
추가로 코드도 어떤식으로 작성하는지 설명하는 내용을 담아야했다.

🌻 5. 웹 어플리케이션

1. 서버와 클라이언트를 실행시켜서 웹 화면을 확인했다.
   

사실 에러가 한번떠서 확인해보니 client 도 https 로 연결해야 했다.
확인해보니 스크립트 start 부분에 인증서 파일을 연결하는게 누락되어있었다.

2. 항목을 채우지 않고 로그인인 버튼을 눌렀을 때, 메세지가 뜨는지 확인했다.
   

3. 데이터베이스를 확인하고, 레코드를 이용해 로그인을 시도했다.
   

로그인을 해도 화면이 넘어가지 않았다. (충격..)
다시 코드를 싹 확인해서 힌트를 찾아냈다.

// 회원가입 성공 후 로그인 페이지 이동은 다음 코드를 이용하세요.
// this.props.history.push("/");

페이지 이동을 해야하는 부분에 위 내용을 활용해 코드를 다 추가해줬다.

페이지 이동에 성공했다. 게다가 유저정보도 깔끔하게 받아왔다.

4. 데이터베이스에서 2번 유저정보로 로그인을 하면, 크롬 비밀번호 에러메세지가 떴다.
   

해당 내용을 구글링해보니, 해당 팝업창이 뜨는 이유는 여러가지지만 비밀번호가 너무 허접할 때도 나타난다고 한다.
실제로 패스워드가 조금 긴 1번 계정으로 로그인 할 때는 해당 창이 뜨지 않았다.
(나는 혹시나 세션인증을 구현할때, 비밀번호 관련정보를 유출하게끔 구현한줄알고 반성의 시간을 가졌었다.)

5. 회원가입 창을 확인했다.

6. 항목을 대충 채우고 회원가입 버튼을 누르면 메세지가 뜨는 걸 확인했다.

7. 해당 항목을 잘채우고 회원가입 버튼을 누르면, 로그인 화면으로 잘 이동했다.
   데이터베이스에도 정보가 잘 추가되었다.

8. 이 과정을 설명하며 영상을 찍어서 제출까지 완료하였다.

🌻 6. 후기

솔직히 마지막 HA 재미있었다.
1차 마감이 당일 6시여서 에러가 뜰 때마다 시간압박에 스트레스를 받긴 했다.
하지만 탄탄하게 성장한 나의 문제해결능력은 수많은 에러들을 굴복시켰다.
에러가 하나씩 해결이 될 때마다 자신감이 붙어서, 더 끈질기게 도전할 수 있었다.
시연영상제출까지 끝내니 5시 30분이었다.
그 날은 더 이상의 에너지가 남아있지않아서 남은 하루동안 휴식을 취했다.

나름의 팁이라면,

1. 집요하게 console 을 확인했다.
   코드를 한번에 쭉 작성하는 게 아니라, 내가 어떤 데이터를 받아와야 하면, 관련 코드를 작성 후 실제로 잘 받아와졌는지 확인했다. 이 과정으로 내가 어디까지 제대로 구현했는지 진행도를 알 수 있었다.

2. 에러에 막히면 원인을 파악했다.
   해당 에러가 생긴 이유는 내가 그렇게 코드를 짰기 때문이다. 1번행동을 하다보면 어느 부분이 문제인지 바로 파악된다. 그 부분을 디버깅해주면 된다. (시간효율상 좋다)

3. 수많은 파일간의 관계성을 파악했다.
   내가 작성하는 부분은 나무이다. 항상 숲을 인식하려고 노력했다. 실제 앱이 작동하는 원리를 상상하면서 코드를 작성했다.

다음주부터 프로젝트를 진행한다.
두렵기도 하고 설레기도 하지만, 드디어 첫 실전이라고 생각하니 기대감이 더 크다.
좋은 팀원들을 만나서 최선의 결과를 내고싶다.
탄탄하게 세운 기초를 바탕으로 열심히 성장해서 나도 4차산업의 흐름에 기여하고싶다.