[2024 Node.js 스터디] 김규현 5주차

6. 익스프레스 프로젝트 시작하기

 

한 폴더안에 package.json, app.js 생성후 코드작성

이후 npm start 입력후 localhost3000에 접속해 확인

package.json

app.js

npm start

 

자주 사용하는 미들웨어

 

미들웨어는 app.use와 함께 사용되고 app.use(미들웨어)꼴임

app.js

미들웨어를 통해 요청과 응답에 다양한 기능을 추가할 수 있고, 이미 많은 사람이 유용한 기능들을 패키지로 만들어짐

 

morgan

morgan 연결후 local 콘솔에 나오는 GET / 500 6.358 ms - 50 로그는 morgan 미들웨어에서 나오는 것

요청과 응답에 대한 정보를 콘솔에 기록

 

static

static 미들웨어는 정적인 파일들을 제공하는 라우터 역할을 함

 

body-parser

요청의 본문에 있는 데이터를 해석해서 req.body 객체로 만들어주는 미들웨어

이미지, 동영상, 파일 데이터는 처리하지 못함

 

cookie-parser

cookie-parser는 요청에 동봉된 쿠키를 해석해 req.cookies 객체로 만듬

 

express-session

세션 관리용 미들웨어 

로그인 등의 이유로 세션을 구현하거나 특정 사용자를 위한 데이터를 임시적으로 저장해둘 때 매우 유용

 

multer

• 이미지, 동영상, 파일 데이터를 처리하지 못하는 body-parser의 단점을 해결하기 위한 미들웨어
• 이미지, 동영상, 파일 데이터를 처리 가능한 미들웨어
• storage 속성에는 어디에(destination) 어떤 이름으로(filename) 저장할지를 넣음
• destination과 filename 함수의 req 매개변수에는 요청에 대한 정보가, file 객체에는 업로드한 파일에 대한 정보가 있음

 

미들웨어의 특성 활용하기

• 미들웨어는 req, res, next를 매개변수로 갖는 함수로서 app.use나 app.get, app. post 등으로 장착
• 여러개의 미들웨어 장착 가능
• 다음 미들웨어로 넘어가려면 next함수 호출해야함
• next함수에 route라는 인수를 넣으면 다음 라우터의 미들웨어로 이동하고 그 외의 인수를 넣으면 에러 처리 미들웨어로 이동
• req.session 객체에 데이터를 넣으면 세션이 유지되는 동안에 데이터가 유지
• req.locals 객체에 데이터를 넣으면 요청이 끝날 때까지만 유지되고 미들웨어 간 데이터 공유 가능

 

Router 객체로 라우팅 분리하기

익스프레스를 사용하면 라우팅을 깔끔하게 관리 가능index.js와 user.js를 작성후 app.use를 통해 app.js와 연결라우터에 연결된 나머지 미들웨어들을 건너뛰고 싶을 때 next함수 사용(next('route'))

 

req, res객체 살펴보기

기존 http 모듈의 메서드도 사용할 수 있고, 익스프레스가 추가한 메서드나 속성을 사용할 수도 있음

 

req 객체

req.app	req 객체를 통해 app객체에 접근할 수 있음
req.body	body-parser 미들웨어가 만드는 요청의 본문을 해석한 객체
req.cookies	cookie-parser 미들웨어가 만드는 요청의 본문을 해석한 객체
req.ip	요청의 ip 주소가 담김
req.params	라우트 매개변수에 대한 정보가 담긴 객체
req.query	퀴리스트링에 대한 정보가 담긴 객체
req.signedCookies	서명된 쿠키들은 req.cookies 대신 여기에 담김
req.get(헤더 이름)	헤더의 갑을 가져오고 싶을 때 사용하는 메서드

 

res 객체

res.app	res 객체를 통해 app객체에 접근할 수 있음
res.cookie(키, 값, 옵션)	쿠키를 설정하는 메서드
res.clearCookie(키, 값, 옵션)	쿠키를 제거하는 메서드
res.end()	데이터 없이 응답을 보냄
res.json(JSON)	JSON 형식의 응답을 보냄
res.locals	하나의 요청 안에서 미들웨어 간에 데이터를 전달하고 싶을 때 사용하는 메서드
res.redirect(주소)	리다이렉트할 주소와 함께 응답을 보냄
res.render(뷰, 데이터)	템플릿 엔진을 렌더링해서 응답할 때 사용하는 메서드
res.send(데이터)	데이터와 함께 응답을 보냄
res.sendFile(경로)	경로에 위치한 파일을 응답

 

템플릿 엔진 사용하기

템플릿 엔진은 자바스크립트를 사용하여 HTML을 렌더링할 수 있게함

기존 HTML과는 문법이 다를 수 있고, 자바스크립트 문법이 들어감

 

퍼그(제이드)

문법이 간단해 코드양이 줄어든다는 장점이 있는 템플릿 엔진중 하나

퍼그 설치

...
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(morgan('dev'));
...
// app.js에 다음 부분 추가

 

HTML과는 문법이 많이 달라서 호불호가 갈림

특징

• 기존 HTML과 다르게 화살괄호<>와 닫는 태그가 없음
• 탭 또는 스페이스로만 태그의 부모 자식 관계를 규명
• HTML div태그인 경우 div 문자 생략 가능
• 에디터에서 텍스트를 여러줄 입력하고 싶다면 파이프(|) 삽입
• 태그뒤에 .을 붙임으로 CSS또는 자바스크립트 코드 작성 가능
• HTML과 다르게 반복문 사용 가능
• 다른 퍼그나 HTML 파일 넣을 수 있음

 

넌적스

 

퍼그의 HTML 문법 변화에 적응하기 힘든 분에게 유용한 템플릿 엔진

 

 

...
const path = require('path');
const nunjucks = require('nunjucks');

dotenv.config();
const indexRouter = require('./routes');
const userRouter = require('./routes/user');

const app = express();
app.set('port', process.env.PORT || 3000);
app.set('view engine', 'html');

nunjucks.configure('views', { 
  express: app,
  watch: true,
});

app.use(morgan('dev'));
...
//app.js에 다음 부분 추가

 

특징

• HTML 문법을 그대로 사용
• 변수는 {{  }}로 감쌈
• 내부에 변수 사용가능 (변수를 선언할 때는 {% set 변수 = '값' %}를 사용)
• HTML을 이스케이프하고 싶지 않다면 {{ 변수 | safe }}를 사용
• 넌적스에서는 {% %}안에 반복문 같은 특수한 문 사용

 

 

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

 

nodebird 폴더만든 후에 package.json파일 형성

package.json

명령어 npm i sequelize mysql2 sequelize-cli와 npx sequelize init을 통해 기본 설정

 

nodebird 폴더안에 여러개의 폴더 생긴것을 확인

 

기타 SNS서비스를 만들기 위한 추가 폴더와 필요한 파일 생성후 작성

 

명령어 npm start를 입력하고 localhost8001에서 확인

데이터베이스를 세팅하기 위한 모듈 폴더에 필요한 파일 생성

사용자 정보, 게시글 내용, 이미지 경로, 태그 이름등에 관한 데이터를 세팅 

 

유저들끼리 팔로잉기능에서 유저들끼리 팔로워하고 팔로잉하며 N:M관계가 나타냄

 

Passport

SNS서비스이므로 로그인이 필요

직접 회원 가입과 로그인을 구현하면 복잡한 작업들이 많으므로 검증된 모듈을 사용하는 것이 좋음

 

Passport관련 패키지를 설치하고 app.js와 Passport 모듈을 연결함

$ npm i passport passport-local passport-kakao bcrpt

 

...
const app = express();
passportConfig(); //패스포트 설정
app.set('port', process.env.PORT || 8001);
app.set('view engine', 'html');
...
//app.js 부분 수정

 

로컬 로그인을 구현하기 위해 로그인 전략 세워야함

라우터 중에 로그아웃 라우터나 이미지 업로드 라우터 등은 로그인한 사람만 접근할 수 있게 해야하고,

회원 가입 라우터나 로그인 타우터는 로그인하지 않은 사람만 접근할 수 있게 해야함

따라서 라우터에 접근 권한을 제어하는 미들웨어 필요

 

multer

이미지 업로드에 이용

NodeBird 서비스는 input 태그를 통해 이미지를 선택할 때 바로 업로드를 진항해고, 업로드된 사진 주소를 다시 클라이언트에 알림

게시글을 저장할 때는 데이터베이스에 이미지 경로 저장