프로그래머스 데브코스 20일차 with. TS 웹 풀스택

📚요약

지난 시간에 프로젝트의 책 부분을 설계하고 구현했습니다. 이번 시간에는 사서와 책을 이어주는 작업을 진행하겠습니다. 그렇기 위해서 ERD를 간단하게 그리면서 데이터베이스에 저장할 데이터를 정리하겠습니다. 이어주는 작업은 Express의 router를 이용해서 진행할 예정이고, 추가적으로 기존 API 수정도 같이 진행하겠습니다.

 

📖Router

라우팅(Routing)을 먼저 알아보고 넘어가겠습니다.

라우팅은 URI(또는 경로)와 특정 HTTP 요청 메서드(GET, POST 등)인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방식을 결정하는 것

△기본 라우팅-express.js

쉽게 이야기해서 요청에 대해 적절한 경로로 안내하는 것입니다. Express의 route를 사용하면 지금까지 같은 주소에 대해서 다른 HTTP 요청 메서드 함수를 따로 작성했던 것이 깔끔해집니다.

const express = require("express");
const app = express();

app
  .route("/books")
  .get((req, res) => {
  	// ...
  })
  .post((req, res) => {
   	// ...
  });

 

여기서 한 단계 더 나아가서 요청들을 기능에 맞게 여러 파일로 분리한다면 얼마나 좋을까요? 진행하는 프로젝트도 사서와 책에 대한 요청들을 구분해서 파일을 만들었습니다. 이를 하나의 파일에서 express.Router()를 사용해 각 요청 파일을 하나의 모듈(미들웨어)로 만들고 app.js에서 사용해 보겠습니다.

// app.js
const express = require("express");
const app = express();

app.listen(3000);

// 모듈 가져오기
const librarianRouter = require("./routes/librarians");
const bookRouter = require("./routes/books");

// 모듈 사용하기
app.use("/", librarianRouter);
app.use("/books", bookRouter);

//books.js, librarians.js
const express = require("express");
const router = express.Router();

router.use(express.json());

// ...요청 작성

module.exports = router; // 모듈 외부 사용 허용

🍯tip! 모듈을 가져와서 사용할 때 app.use()를 사용하는데, 첫 번째 인자로 들어가는 path에는 해당 라우터의 공통적인 URL을 미리 작성할 수 있다. 공통적으로 작성하게 되면 내부에서 '/books' → '/', '/books/:id' → '/:id'로 줄여서 사용할 수 있다.

🍯tip! 기존 변수의 이름을 변경하고 싶은 경우 VSCode는 단축키를 사용해 편하게 할 수 있다.
     1. 변수를 드래그하고 F2를 누르면 rename symbol(이름 바꾸기) 칸에 이름을 변경하면 기존 변수 이름도 변경된다.
     2. 변수를 드래그하고 'Ctrl+d'를 누르면 누를때 마다 같은 단어를 찾아서 자동으로 드래그해줘서 변경할 수 있다.
     3. Alt키를 누르고 마우스로 클릭하면 여러 줄을 한 번에 클릭되어 변경할 수 있다.

🍯tip! 라우터를 사용하는 파일 이름의 경우 경로와 비슷하게 지어주면 더 쉽게 알아볼 수 있다. ex) 사서의 경우 librarians.js, 책의 경우 books.js

 

📖ERD

ERD란 Entity Relationship Diagram의 약자로 데이터의 구조를 설계할 때 사용하는 하나의 표시법(산출물)

△개체-관계 모델-위키백과

실제로  ERD의 경우 의미를 가지는 여러 기호와 선 등을 이용해 그림으로 그려야겠지만 미니 프로젝트인만큼 간단하게 테이블로 그려보겠습니다.

▼ 사서 테이블

user_id

pw

name

▼ 책 테이블

id

book_name

user_id

 

'사서 테이블'에서 id로 애매하게 불렸던 이름을 user id로 바꿔주었습니다. '책 테이블'에는 user_id가 없었지만 사서가 관리하는 책을 배정한다고 가정해서 책마다 관리하는 사서의 user_id를 부여해 주는 방식으로 진행하겠습니다.

 

📖프로젝트(Library)

테이블의 수정 내역을 반영해서 API도 수정해보겠습니다. 수정된 부분은 주황색 글씨로 나타내겠습니다.

 

📄API 설계 수정

• 회원(사서)
  • 로그인 : POST, '/login', req: body{ userId ,pw} res: 'success'→main page
  • 가입 : POST, '/signup', req: body{ userId ,pw,name} res: 'success' →login page
  • 정보 조회 : GET, '/librarians/:userId ', req: params{ userId } res: 'success'
  • 탈퇴 : DELETE, '/librarians/:userId ', req: params{ userId } res: 'success'

• 책
  • 등록(생성) : POST, '/books', req: body{bookName,userId}  res: 'success', 201→other page
  • 수정 : PUT, '/books', req: body{bookName} res: 'success', 200→other page
  • 개별 삭제 : DELETE, '/books/:id', req: body{id} res: 'success', 200→other page
  • 사서 책 전체 조회 : GET, '/books', req: body{userId} res: 'success', 200→other page
  • 개별 조회 : GET, '/books/:id', req: body{id} res: 'success', 200→other page

📄구현

실제 코드는 제 Github에 올라와 있습니다. 변경된 부분의 실제로 구현한 결과를 postman으로 보고 마무리하겠습니다.

책 등록 과정 정상 등록 & userId가 없는 경우

책을 다른 사서로 등록하고 요청한 화면 'testId' & 'testId1'

전체 조회 userId가 없는 경우

다음 시간에 계속...

 

출처 & 참고

김송아 강사님의 강의

Routing, expressjs, 2024.05.03

데이터 모델링 개념 & ERD 다이어그램 총정리, Inpa, 2024.05.02