따라하며 배우는 노드, 리액트 시리즈 - 기본강의 코드

9개월간 쉬고 다시 시작하는 공부

2주동안 하나의 강의를 끝냈다. 오래 쉰 뒤에 처음 듣는 강의에다 알바를 하면서 들었기 때문에 예상 기간보다 오래 걸렸다. 하루면 될줄 알았는데...
꽤 오래된 강의이기 때문에 새로 변한 문법에 맞게 하느라 나름의 어려움을 겪었지만, 끝냈기에 후련하다. 여기에 정리하면서 확실하게 기억하자.

이번 강의는 간단한 회원가입 및 로그인 기능을 하는 어플리케이션을 만드는 것이였다.
인상깊은 것은 Auth의 활용이다. 서버와 클라이언트에 토큰을 비교해 들어갈 수 있는 페이지를 한정하는게 매력적이였다. 국비수업 팀프로젝트 때 알았으면 더 좋았을 것을...

하 ㅎㅎ... 강의 한번 들으면서 클론코딩하고... 두번째 들으면서 필기하고... 다시 정리하면서 외우고... 블로그에 정리하고... 너무 오래걸리지만 ㅜㅜ 그동안 안했던거 벌받는다고 생각해야겠다...

Server

클라이언트보다 서버가 우선시 되야 큰 그림의 기반을 다질수 있는거라 생각한다. 앞으로 순서는 서버로 시작해서 클라이언트로 마무리하기로 하자.

0. 프로젝트 폴더 생성 후, 즉시 npm init + git init

앞으로 프로젝트를 만들면 npm init과 git init을 먼저 하는걸 습관화하자.

npm init // npm init 시 앞으로는 entry point를 app.js로 설정하자!

npm은 node의 패키지 관리자로 프로젝트에 라이브러리를 설치할 수 있도록 해준다.
이제 큰 차이는 없지만 가볍고 빠르고 안전성?도 좋은 후발주자 yarn도 있다. 많은 사용자를 보유하고 예전보다 나아진 오리지널을 먼저 경험해보고, yarn은 나중에 사용해보도록 하자.

라이브러리 설치 시 --save가 기본적으로 적용되기 때문에 --save-dev가 아닌 이상 뒤에 안붙여줘도 되는거 같다.

git init

형상관리를 위해 git init을 해준다. 기왕이면 github repository를 만들고 ssh연결도 해주자.

ㅎㅎ,,, 깔끔한 이미지가 필요하다...

중요정보보호용이나 제외되어야 하는 것은 .gitignore 파일에 저장해준다.
git은 따로 정리하는 걸로 하자.

1. node.js와 express.js는 한몸이다. + nodemon까지

node + express 공부 필요⭐️

내 맥북에 node는 이미 설치 돼있으니 express와 nodemon을 설치했다.

npm i express
npm i nodemon --save-dev // nodemon은 개발할 때만 사용하기에 --save-dev를 붙여주자 

npm init 할때 entry point를 app.js로 잡았으니 프로젝트 폴더에 app.js를 만들고 express 기본 코드를 붙여 넣는다.

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

package.json에 nodemon으로 시작하는 script를 작성해준다.

"dev": "nodemon index.js"

이제 터미널에

npm run dev

하면 서버가 실행된다. 서버가 만들어졌으니 db연결을 하자.

2. mongoDB 연결 with mongoose

mongoDB에서 클러스터와 유저를 생성한 후,mongoDB와 연결을 도와주는 mongoose를 설치한다.

npm i mongoose

mongoose.connet(DB주소)에 들어갈 주소는 개발할 때와 배포할 때 다르게 적용하기 위해 config파일에 key.js를 만들어주고 개발할때는 dev.js 안의 주소를, 배포할 때에는 prod.js 안의 주소를 꺼내오도록 한다.

process.env.NODE_ENV ==='production' // node에 process를 이용하면 prod인지 dev인지 판별이 가능하다.

dev.js안에 내용은 중요정보이므로 .gitignore에 포함시킨다.

User.js에 mongoose로 user.Schema를 정의해 준다. (mongoDB를 사용하려면 mongoose 공부도 해야겠다.)

3. body-parser

클라이언트의 body를 서버로 보낼때, 기본적인 request.Body는 Undefined라 parsing(가공)이 필요하다.
이때 body-parser라는 라이브러리 설치가 필요한데, Express 4.16 이후 부터는 body-parser를 기본제공한다. 라이브러리를 따로 받을 필요가 없다!

4. 비밀번호 암호화 Bcrypt

비밀번호 암호화에 대해서는 아직 무지하다. 이것도 따로 정리가 필요할까 ㅜㅜ
Bcrypt는 blowfish알고리즘으로 암호화를 해 해싱을 엄청 잡아 먹는다고 한다. Crypto나 Scrypt, PBKDF2 등등 다른 여러가지 방법이 있는 듯 한데, 그냥 Bcrypt를 이용하는 것이 편해보인다.

npm i Bcyrpt

Bcrypt를 설치해주고 salt도 생성해 준다. salt는 말그대로 양념을 쳐주는거라고 하는데;; 아직 이해하기 어렵다 ㅎㅎ...

비밀번호를 최초 등록 or 변경할때만 Bcrypt가 적용되게 해줘야 한다.

5. login (with Jsonwebtoken, cookie-parser, Auth)

로그인은

1. email 요청으로 DB에 있는지 확인
2. 비밀번호 비교 isMatch? -> bcyrpt.compare 이용
3. 토큰생성 -> Auth

순으로 진행이 된다.

jsonwebtoken 을 이용해서 토큰을 생성하는데, 생성된 토큰은 DB에 저장되고, 클리이언트용은 로컬스토리지나 쿠키로 저장해야 한다. 둘다 장단점이 있는듯 한데 이번 수업에서는 쿠키로 저장을 했다. (이것도 공부가 필요하다.)

쿠키에 저장할때는 cookie-parser가 필요하다! body-parser 사용 이유와 비슷한것 같다.

Auth는 클라이언트 쿠키에 있는 토큰과 DB에 있는 토큰을 비교해 주는 과정이다. 여기서 클라이언크 토큰을 복호화 해 비교를 한다.

6. logout

로그아웃은 mongoose의 findOneAndUpdate로 서버 토큰을 없애주면 된다.
(로그아웃하고 다시 로그인하면 클라이언트 쿠키 속 토큰은 어떻게 되나?)

Client

클라이언트는 제대로 정리된게 없다 ㅜㅜㅜ

redux가 진짜 러닝커브가... 흑흑

강의 열심히 들으면서 제대로 파보자 ㅎㅎ..