TIL 26일차 - node 숙련주차 강의(1)

박찬웅·2023년 3월 3일

TIL

항해99

목록 보기

31/105

23년 3월 3일

배운 것

오늘부터 입문주차가 끝나고 숙련주차에 진입하였다. JWT랑 미들웨어 개념을 이해하고 두가지의 실습을 진행하였다.

시도 한 것

1. 할 일 메모사이트(TODO-LIST) 프로젝트

오늘 강의에서 가장 먼저 한 것은 할 일 메모 사이트 만들기를 진행하였다. 여기서 구현하려고 한 것은

할 일 조회
할 일 추가
할 일 수정
할 일 삭제

이렇게 4가지만 구현하는 간단한 작업이였다.

내 프로젝트 폴더 이름
├── app.js
├── assets
│   ├── asset-manifest.json
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   ├── robots.txt
│   └── static
│       ├── css
│       │   ├── main.6842b365.chunk.css
│       │   └── main.6842b365.chunk.css.map
│       └── js
│           ├── 2.96129310.chunk.js
│           ├── 2.96129310.chunk.js.LICENSE.txt
│           ├── 2.96129310.chunk.js.map
│           ├── 3.0962e34f.chunk.js
│           ├── 3.0962e34f.chunk.js.map
│           ├── main.c5ceafa0.chunk.js
│           ├── main.c5ceafa0.chunk.js.map
│           ├── runtime-main.2ec3457b.js
│           └── runtime-main.2ec3457b.js.map
├── models
│   ├── index.js
│   └── todo.js
├── routes
│   └── todos.router.js
├── package-lock.json
└── package.json

Directory Structures는 다음과 같이 정하고 시작하였다. 이전과는 다르게 assets폴더가 추가되었는데 이것은 프론트앤드분들이 이미 완성된 폴더를 받아서 진행하였다. 즉 api만 볼 수 있었던게 이제는 프론트앤드가 구현한 홈페이지로 돌려보면서 진행 할 수 있게 되었다.
다만 이 프로젝트는 사실상 저번주 복습 같은 실습이였다. 할일 조회, 추가, 수정, 삭제는 강의노트를 보면서 저번주에 했던 코드들과 비교하면서 보니까 과거 복습하는 생각으로 강의를 들은 것 같다. 기존 수정에서 원래라면 put 메소드를 썼으나 이번에 patch 메소드를 처음으로 사용을 하게 되었다. put과 patch는 어제 팀 과제에서 한번 정리 했던 것을 생각하면서 강의를 들었다. 딱 한가지의 기능이 더 추가되었는데 바로 작성한 리스트들 순서를 위아래로 뒤바뀌는 것 기능이 추가되었다. 이부분은 상당히 독특하게 구현을 했는데 다음과 같았다.

router.patch("/todos/:todoId", async (req, res) => {
  const { todoId } = req.params;
  const { order } = req.body;

  const currentTodo = await Todo.findById(todoId);
  if (!currentTodo) {
    throw new Error("존재하지 않는 todo 데이터입니다.");
  }

  if (order) {
    const targetTodo = await Todo.findOne({ order }).exec();
    if (targetTodo) {
      targetTodo.order = currentTodo.order;
      await targetTodo.save();
    }
    currentTodo.order = order;
  }

  await currentTodo.save();

  res.send({});
});

이게 할 일 위치를 수정하는 코드였다. 아직 완벽하게 이해한 건 아니여도 targeTodo 변수를 선언해서 order문과 비교하여 옮겨지는 코드였다 한 리스트가 위/아래 버튼이 있는데 위를 누르면 바로 위에 있는 리스트랑 서로 바뀌고, 아래를 누르면 바로 아래 이쓴ㄴ 리스트랑 서로 바뀌게 되는 구조였다.

그렇게 해서 완성된 결과물이다. input 박스에다 글을 적고 추가버튼을 누르면 리스트가 가장 최상단에 추가가 된다. 그리고 옆에 체크박스를 누르면 취소선이 그어지고, 삭제를 누르면 해당 리스트는 삭제가 된다. 마지막으로 up과 down 버튼은 아까 말한 내용 그것이다.

2.인증(Authentication)

해당 챕터는 구현보다는 이론중심의 내용이였다. 주로 쿠키랑 세션 그리고 jwt의 개념이 나오는데 이부분만 간단히 정리를 하자면 다음과 같다.

쿠키(Cookie): 브라우저가 서버로부터 응답으로 Set-Cookie 헤더를 받은 경우 해당 데이터를 저장한 뒤 모든 요청에 포함하여 보냅니다.
- 데이터를 여러 사이트에 공유할 수 있기 때문에 보안에 취약할 수 있습니다.
- 쿠키는 userId=user-1321;userName=sparta 와 같이 문자열 형식으로 존재하며 쿠키 간에는 세미콜론(;) 으로 구분됩니다.
세션(Session): 쿠키를 기반으로 구성된 기술입니다. 단, 클라이언트가 마음대로 데이터를 확인 할 수 있던 쿠키와는 다르게 세션은 데이터를 서버에만 저장하기 때문에 보안이 좋으나, 반대로 사용자가 많은 경우 서버에 저장해야 할 데이터가 많아져서 서버 컴퓨터가 감당하지 못하는 문제가 생기기 쉽습니다.

쿠키랑 세션을 구현하려면 npm install cookie-parser를 입력해서 패키지를 설치해주면 쿠키와 세션을 사용 할 수 있다.

JWT
- JSON 형태의 데이터를 안전하게 교환하여 사용할 수 있게 해줍니다.
- 인터넷 표준으로서 자리잡은 규격입니다.
- 여러가지 암호화 알고리즘을 사용할 수 있습니다.
- header.payload.signature 의 형식으로 3가지의 데이터를 포함합니다. (개미처럼 머리, 가슴, 배)
때문에 JWT 형식으로 변환 된 데이터는 항상 2개의 . 이 포함된 데이터여야 합니다. 마찬가지로 JWT를 구현하려면 npm install jsonwebtoken를 입력해서 패키지를 설치해주면 jwt를 이용 할 수 있다.

3. Shop Project : Middleware

해당 챕터 같은 경우에는 다시 실습강의 였다. 바로 실습하기 전에 미들웨어에 대한 개념을 알려주었다.

미들웨어

웹 서버에서 요청을 받을때 가끔 모든 요청에 대해 공통적인 처리를 하고싶은 경우가 생길 수 있습니다.
미들웨어를 통해 웹 서버의 요청/응답에 대해 공통적으로 관리가 가능합니다.

예를 들어, 모든 요청에 대해서 로그를 남겨 확인하고 싶은 경우처럼 말이죠.
이 외에도 승인된 사용자만 API를 접근할 수 있게 만들고 싶을때도 해당 될 수 있습니다.

이런 기능적인 부분 외에도 아주 기본적인 미들웨어로, 브라우저가 보낸 데이터를 우리가 쉽게 사용할 수 있게 바꿔주는 미들웨어도 존재한다.

Express.js 에도 미들웨어는 있는데 다음과 같이 사용이 가능하다.

app.use(express.urlencoded({ extended: false }));
app.use(express.json());

미들웨어 사용방법은 다음과 같이 next가 추가 된다.

app.use((req, res, next) => {
  // 필요한 코드
});

미들웨어의 구조는 다음과 같이 그림으로 표현이 된다.

app.use((req, res, next) => {
    console.log('첫번째 미들웨어');
    next();
});

app.use((req, res, next) => {
    console.log('두번째 미들웨어');
    next();
});

app.use((req, res, next) => {
    console.log('세번째 미들웨어');
    next();
});

이런 식으로 미들웨어을 연속으로 사용 할 수 있다.

이렇게 미들웨어의 개념만 잠깐 보고 실습으로 진행하였다. 다만 정작 미들웨어는 이번 스파몰 프로젝트에서는 사용하지는 않았다. 지난주에 spa_mall을 이미 만들었는데 여기서 회원가입과 로그인 api 구현을 추가로 진행하였다. 그리고 원래는 상품 목록이 임의로 정해진 상품들만 있었는데 이제는 post해서 상품이 나타나게 할 수 있게 만들었다.

해당 실습도 프론트앤드 파일들을 받아서 진행하였였다. 강의듣고 직접 코드만 적는데 거의 5~6시간이 걸렸다. 사실 로그인 회원구현만 빼면 나머지는 이미 입문주차 개인과제할때 한번 api 작성하는 거 구현을 해 봤었기 때문에 이해하는데는 어렵지는 않았다.
코드까지 적으면 엄청난 스압이기 때문에 간단하게 어떤거를 구현했는지만 글로만 적어보면
먼저 회원가입을 할 수 있는 회원가입 API, 로그인을 할 수 있는 로그인 API를 구현하였다. 그리고 로그인이 완료되면 현재 팔고 있는 상품들을 나타내는 상품 목록 조회 API, 어떤 하나의 상품을 눌렀을때 그 상품만 나오게 하는 상품 목록 상세 조회 API를 구현하였다.
그 뒤로 상세 조회의 상품을 장바구니에 담기를 누르면 장바구니 추가하는 장바구니 추가 API, 그리고 해당 장바구니를 조회 가능한 장바구니 조회 API를 구현하였다. 마지막으로 장바구니 수량을 변경하는 장바구니 수정 API랑, 장바구니 담았던 상품을 삭제하는 장바구니 삭제 API를 구현하였다.
이 외에 상품 목록 추가, 상품 목록 수정, 상품 목록 삭제는 사용자가 직접 이용 할 수는 없고 개발자들이 post문을 보내서 mongodb에다 저장하고, 추가하고, 변경하거나, 삭제할 수 있게 구현을 하였다.

해결

그렇게 TODO 리스트 프로젝트랑 스파몰 프로젝트를 강의를 따라서 구현을 마무리 하였다.

알게 된 점

이제 숙련주차가 오니까 본격적으로 JWT 토큰을 이용해서 로그인과 회원가입 기능이 추가되었는데 상당히 어려운 작업인것 같다. 우선 JWT 없이 로그인 기능을 만들게 되면 보안적으로 다 노출이 되기 때문에 바로 이런 토큰값을 추가해서 그 토큰값이 맞아야 로그인이 될 수 있게 하는 것도 처음으로 알게 되었다. 나머지는 저번주에 입문주차 개인과제 덕분에 어려운건 많이 없었지만, 회원가입 된 사람들만 해당 기능들을 사용 할 수 있게 하는 기능을 구현하는것이 추가되었기 때문에 고전 할것 같은 느낌이 들었다.