📚필요한 모듈 리스트

Express.js

우리는 백엔드 서버를 Express.js를 사용해서 구축할 것이기 때문에 당연히 설치해주어야 한다.

$ npm i express

Axios

node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트이다.

$ npm i axios

bcrypt

비밀번호를 암호화하기 위해 사용한다.
bcrypt는 레인보우 테이블 공격 방지를 위해 솔트(Salt)를 통합한 적응형 함수 중 하나라고 한다.

$ npm i bcrypt

cookie-parser

로그인 할 때 쿠키랑 세션을 사용할 건데 그 때 밑의 express-session과 함께 필요하다.

$ npm i cookie-parser

express-session

$ npm i express-session

쿠키랑 함께 로그인했을 때 정보를 저장하기 위한 모듈이다. 로그인 기능이 작동하는 원리를 간단하게 살펴보면 다음과 같다.

1. 사용자가 ID와 비밀번호를 입력해서 웹 서버로 보낸다.
2. 웹 서버는 자신이 가지고 있는 데이터와 사용자가 입력한 데이터의 일치 여부를 체크한다.
3. 일치한다면 서버는 세션을 생성해서 쿠키 형태로 사용자의 브라우저에 전송하게 된다.

세션은 기본적으로 쿠키를 사용해야 한다!!! (거의 바늘과 실 같은 존재)
클라이언트가 서버에 요청을 보냈을 때 서버쪽에서는 응답과 동시에 쿠키를 생성해서 브라우저에 전송한다. 그리고 서버는 특정 메모리 공간에 해당 정보를 저장한다.

브라우저에 저장된 쿠키에는 key가 담겨 있고, 서버의 메모리 공간에는 key:value 값이 담겨 있다. 따라서, 클라이언트가 모든 요청들에 쿠키를 담아서 서버에게 보내면 서버는 쿠키의 key를 확인해주는 작업을 해주어야 하는데, 이 때 필요한 모듈이 바로 express-session이다.
(설명 출처: https://bitkunst.tistory.com/55)

dotenv

비밀번호와 같은 보안상 중요한 정보들을 .env 파일에 관리하기 위한 모듈이다.

$ npm i dotenv

cors

백엔드 서버와 프론트엔드 서버의 오리진(origin)이 다를 때 발생하는 이슈를 해결해 주기 위한 모듈이다. (origin은 주소에서 포트번호까지를 말한다.)

$ npm i cors

helmet과 hpp

helmet과 hpp는 node와 express의 보안을 담당하는 모듈이다. 당연히 설치해야겠죠?

$ npm i helmet hpp

morgan

morgan은 서버에 로그(log)를 남겨주는 (관리해주는) 모듈이다. 설치하자.

$ npm i morgan

multer

이미지나 파일 업로드를 위한 모듈이다.

$ npm i multer

passport와 passport-local

로그인을 쉽게 처리할 수 있게 해주는 모듈이다.

$ npm i passport passport-local

sequelize와 sequelize-cli

sequelize는 ORM(Object Relational Mapping)으로써, Node.js에서 MySQL 등의 관계형 데이터베이스를 쉽게 다룰 수 있도록 도와주는 라이브러리이다.
(ORM이란, 객체와 관계형 데이터베이스의 데이터를 자동으로 매핑(연결)해주는 것을 말한다. 조금 더 쉽게 말하자면, sequelize를 사용하면 SQL문을 몰라도 JavaScript로 데이터베이스를 조작할 수 있게 된다.)

$ npm i sequelize sequelize-cli

nodemon

정말정말 좋은 라이브러리이다.. 프론트엔드 개발할 때를 생각해보자. React나 Next.js나 Ctrl+S로 저장할 때마다 자동으로 변경사항이 저장되어서 화면에 그려지는 것을 볼 수 있을 것이다. 그런데 express는 자동으로 그렇게 되진 않는다. (변경사항을 저장한다고 해서 서버가 자동으로 재시작되지 않음.)

변경사항이 생길 때마다 서버를 껐다 켰다 해주기 귀찮으니 이를 자동적으로 해주는 라이브러리가 바로 nodemon이다. (서버에서 어떤 점이 바뀌었는지 알아서 감지해줌..!!!)

$ npm i -D nodemon

// -D 옵션을 붙여주는 이유는 nodemon이 런타임에 필요하지 않고 개발할 때만 필요한 패키지이기 때문이다.
// 이러한 모듈들은 -D 옵션을 줘서 개발 의존성 모드로 설치해야 한다.

추가적으로 설정해주어야 할 사항은 다음과 같다.

1. package.json에서 scripts 부분을 다음과 같이 변경하기.

{
  scripts: {
    "dev" : "nodemon",
  },
}

2. 루트 디렉토리에 nodemon.json 만들고 다음과 같이 설정해주기.

// watch 목록에 있는 파일들이 수정되면, exec에 작성한 명령어를 실행한다는 의미이다.
// 여기에서는 index.js를 다시 시작하게 되는데, 우리는 index.js에 서버를 시작하는 코드를 둘 것이므로
// 결과적으로 서버를 다시 시작하게 된다.
{
  "watch": [
    "index.js",
    "routes",
    "config",
    "passport",
    "models",
    "nodemon.json"
  ],
  "exec": "node index.js",
  "ext": "js json"
}

mysql2

나는 데이터베이스로 MySQL을 사용할 것이기 때문에 mysql2도 설치해주었다.

$ npm i mysql2

🪄로그인 관련 팁

우리가 위에서 nodemon을 사용하면서 변경사항이 감지되면 저절로 서버가 껐다가 켜지게 했다. 이 때, 서버가 재시작되면 사용자들의 로그인 정보도 다 풀려버리게 되면서 모두 갑자기 강제로 로그아웃된다. (브라우저에서는 아직도 로그인을 위한 쿠키를 가지고 있지만 서버에서 그 쿠키에 대한 로그인 정보를 까먹어 버리기 때문에 브라우저가 가지고 있던 쿠키는 무용지물이 되기 때문이다.)

그런데 우리가 이용하는 실제 서비스들에서는 당연히... 이러지 않는다! 그럼 실제로는 어떻게 되는건지 궁금해서 이것저것 찾아보았다.

실제 서비스에서는 로그인한 사용자들의 세션 데이터들을 모아두는 서버나 DB를 따로 둬서 관리한다고 한다. 보통은 이를 위해서 레디스(Redis)나 멤캐시드(Memcached)를 많이 사용한다고 한다. 그렇게 해서 백엔드 서버의 재시작 여부와 상관 없이 레디스 서버에서 사용자 로그인 정보를 계속 저장해둬서 로그인 정보가 유지된다고 한다.

먼저, express-session 라이브러리를 index.js에 사용할 때 store라는 옵션을 줘서 redis, redis-session 모듈과 함께 사용한다.