[2024-2 Node.js 스터디] 류상우 #5주차

익스프레스로 SNS 서비스 만들기

 

프로젝트 구조 갖추기

• 기능
  • 회원 정보: 아이디/나이/성별 정보를 조회할 수 있고, 작성한 글과 댓글을 볼 수 있다.
  • 게시글: 제목과 본문 그리고 작성자를 확인할 수 있다. 또한 multer를 사용해 본문에 이미지를 추가할 수 있다.
  • 댓글: 각 게시글 별로 댓글을 남긴다. 댓글 작성자를 확인할 수 있다.
• 기술 스택
  • 프론트엔드: React
  • 백엔드: express
  • 데이터베이스: MySQL
• API 명세서

기능	HTTP 메서드	API Path	Request	Response
회원 가입	POST	/register	회원 정보
회원 탈퇴	DELETE	/users/{userId}	UID
회원 정보 수정	PATCH	/users/{userId}	UID, 수정할 정보
회원 정보 조회	GET	/users/{userId}	UID	회원 정보
전체 회원 조회	GET	/users		전체 회원 정보
게시글 작성	POST	/addpost	UID, 게시글 내용
게시글 삭제	DELETE	/posts/{postId}	게시글 ID
게시글 리스트 조회	GET	/posts		게시글 리스트
게시글 조회	GET	/posts/{postId}	게시글 ID	게시글 내용, 댓글
댓글 작성	POST	/addcomments	게시글 ID, 내용
댓글 삭제	DELETE	/comment/{commentId}	댓글 ID

• 프로젝트 생성

---

데이터베이스 세팅하기

workbench로 생성 후에 시퀄라이즈로 연결했다.

---

서버 구축하기

우선 데이터베이스가 잘 연결되었는지 확인하기 위해 DB에 테스트 케이스를 추가한 후 GET 요청만 수행할 수 있도록 해보자.

localhost:3001/user/1	localhost:3001/users
localhost:3001/post/1	localhost:3001/posts

제대로 조회되는 것을 확인했으니 이제 나머지 기능들을 만들어보자.

회원가입 기능이다. 간단하게 작성 후 REQBIN으로 테스트 해보았다.

이렇게 추가된 모습을 볼 수 있다.

나머지 기능들을 작성해 주었다.

 

라우터가 많아지다 보니 app.js가 너무 길어지는 것 같아 user/post/comment 로 분리해주었다.

---

Passport 모듈로 로그인 구현하기

로그인 구현을 위해 우선 DB의 user 테이블에 password 컬럼을 추가하였다.

 

passport란?

express에서 사용하는 인증관련 미들웨어다. 기본적인 인증 시스템 지원과 더불어 구글, 트위터, 페이스북 과 같이 소셜로그인도 passport를 이용해 간편하게 할 수 있다.

 

주요 개념

• strategy: passport는 어플마다 고유의 인증방식이 있음을 간주하고. 각 인증방식을 stragies라는 개별적인 모듈로 만든다. stragies를 통해 local이나 google과 같은 인증방식을 구현할 수 있다.
• Serialize: 세션에는 최소한의 정보만을 저장해야 한다. 따라서 사용자가 로그인을 했을 때 id, cookie 같은 최소한의 정보만 세션으로 보내는데 이 과정을 Serialize 라고한다.
• Deserialize: 프론트에서 서버로 무언가를 요청할 때 가지고 있는 쿠키 값을 전달하게 된다. 이 때 서버가 받은 정보로 해당 유저의 다른 정보를 찾아내는데 이를 Deserialize라고한다. 여기서 찾은 정보는 req.user 에 저장된다.
• done(): 서버 에러, 유저 정보, 실패 이유를 파라미터로 갖는 함수이다. 

username과 password를 전송해서 값이 맞으면 userId를 반환하는 간단한 로그인 로직을 구현해보려고 했는데 구글과 GPT의 도움을 받아도 무슨 이유인지도 모르고 계속 안되었다....

 

구조를 정확하게 알지 못해서 그런지 이유가 감도 안잡혀서 우선 다음에 책을 빌려서 처음부터 다시 봐보려고 한다.

---

multer 패키지로 이미지 업로드 구현하기

routes/postRouter.js

multer를 사용하기 위해 설정을 마친 후

이미지가 존재하면 업로드 하도록 /addpost 를 수정했다.

 

사용하던 REQBIN에서 멀티파트 업로드는 지원하지 않아서 나중에 프론트를 완성하고 나서 테스트 하려고 한다.

 

나는 하나의 사진이 있거나 없을 수 있도록 설정했는데 만약 여러개의 사진이 필요하다면 post_id와 path를 컬럼으로 갖는 img 테이블을 따로 만들어 post테이블의 id와 연결하면 될 것 같다.

---

프론트 연결하기

 

리액트로 간단히 만들어 파싱했는다.

이미지 부분은 DB에 이미지 자체를 올리는 방법을 썼었는데, 이게 잘 되지 않아서 DB에는 경로로 저장하고 서버에서 해당 경로의 이미지를 보내주는 라우터를 따로 작성해보려고 한다.

 

대충 10시간 정도 시간 썼는데 결과물이 이에 비해 아쉽다. 이미지 업로드랑 로그인 구현이 가장 중요한데 둘 다 완성을 못해서 이 부분은 우선 두고 나중에 꼭 다시 알아보려고 한다.