🍎 서버 환경 관련 Ot & Swagger 간단 활용 (umc 정리)

🍎 프롤로그

UMC의 데모데이를 하게 되면 실제로 서버에서 노션으로 된 API 문서를 만들어서 줄 수도 있고, 보통은 스웨거라는 문서 등을 제공해서 이걸 활용해서 프로젝트를 참여한다. 그래서 그 스웨거 문서를 보고 프론트 개발자들은 서버가 어떠한 API 응답을 주는지 어떤한 body나 header에 어떤 것들을 담아서 요청을 보내야 하는지에 대한 것 등을 보면서 프론트 개발자들이 실제로 API 완료 이전에 개발을 하면서 꼭 서버가 다 개발이 돼야 프론트가 개발을 할 수 있는게 아니라 그것을 활용해서 목 서버 이런 것 등을 활용해서 가상 서버 환경을 구축해서 개발을 진행할 수 있다. 이를 통해 백엔드와 프론트엔드의 속도 차이가 많이 나지 않게 할 수 있다는 것을 보여주기 위한 강의이다.

-> swagger를 이용해서 프로젝트를 하기 위한 서버 환경 관련 얘기를 한다.

 

🍎 서버 환경 구축

자체 서버 관련해서는 umc 워크북을 참고해서 연결을 했다. 이 부분에 대해서는 생략하도록 한다. -> 관련 깃허브 클론하고, 임시 서버 환경을 구축했다. (Nest.js)

• 윈도우 같은 경우는 무조건 한글 파일 경로로 폴더를 다운로드 받으면 아마도 충돌이 날 것이다. 그래서 무조건 영어로 명명된 폴더에 이 백엔드 파일을 다운 받아야 한다. 
• 리눅스 계열에 맥은 딱히 상관없을 것이다. 
• 환경변수 파일 같은 경우는 따로 처리를 해줘야 한다. (워크북 내용 복사.)
• 참고로, Google Auth 같은 경우는 소셜 로그인을 하는데 소셜 로그인을 다루는데 어려운 사람이 있어서 그런 소셜 로그인을 할 수 있는 서버를 만들어 놓았다고 한다. -> 5, 6주차 쯤에 다뤄질 내용 일 수도.
• http://localhost:8000/docs 들어가면 아마 제대로 실행되는 것을 볼 수 있다. ($ pnpm run start:dev를 해주고..)
• 스웨거를 들어갔으면, 어떻게 활용을 해야 하냐면 Authorize가 있다. 이게 뭐냐면 기본적으로 Bearer Token이라는 것을 활용을 한다.

• 위 사진을 봤을 때, 어떤 것은 자물쇠가 채워져있는 곳이 있을 것이다. 이것이 뭐냐면 토큰이 필요한 경우에 자물쇠가 걸려있다고 생각하면 되겠다. 
• 스웨거를 보는 가장 중요한 점은 일단 스키마를 먼저 보는 것이다. 스키마를 보면 별표가 있는 부분이 있는데 이 별표 값은 필수 값이라는 것을 의미한다. body에 꼭 써야 하는 것들. 스키마에 타입이 나와있다. 타입에 맞게 try it 한 다음 내용을 적고 excute를 하면 정상적으로 뜰 것이다. 
• 로그인을 예로 들면 201 성공이 뜰 것인데, 여기서 액세스 토큰이 이제 유저를 인증할 수 있는 것이 되고, 이를 복사해서 Authozise에 담아주면 된다.

• 이렇게 하면 이제 프로텍티드 같은 로그인이 필요한 요청에 대해서는 성공적으로 처리되는 것을 볼 수 있을 것이다. 

 

🍎 서버 활용하기

이런 서버를 활용해서 뭔가 화면에 보여주기 위해서는 어떤 것을 해야 할까? 당연히 로그인을 하고 인증이랑 관련된 것 등을 해야 할 것이다. 

이전에는 훅을 만들어 봤으니까 post 요청도 해보려고 한다. -> 로그인 유효성 검사도 할 것이다. 

• 2가지 방법으로 할 것이다.
  • 1. useForm이라는 커스텀 훅 -> 만드는 이유는 폭넓은 훅 사용을 위해서
  • 2. signup은 라이브러리를 써서. -> 리액트 훅 폼이나 조드(zod)를 활용해서 validation 검증(유효성 검증)을 많이 하니까 라이브러리를 활용하면 훨씬 쉬워진다.