[Node] 개발자 지망생 스터디 -13일차

Node Express

• Node 라이브러리 중에서 웹 애플리케이션 서버를 만드는 가장 많이 이용하는 라이브러리

 

[1] Middle Ware - Filter, Aop

• 클라이언트의 요청을 처리하기 전이나 처리한 후에 공통으로 해야 할 작업을 미리 만들어두고 사용하는 것

(1) 세션 활용

• Session
  • 클라이언트의 정보를 서버에 저장하는 객체
  • 기본적으로 서버의 메모리에 만들어짐
  • 세션이 크거나 많아지면 서버의 메모리에 부담을 주게되서 서버의 성능을 저하시킬 수 있기 때문에 파일이나 데이터베이스에 저장하는 것을 고려할 필요가 있음
• 설치한 패키지
  • npm install espress
  • npm install espress-session
  • npm install morgan
  • npm install cookie-parser
  • npm install --save-dev-nodemon
• 화면에 출력하기 위한 HTML 파일 생성 - index.html
• 서버의 메모리에 세션 생성 - app.use
• 세션을 메모리에 저장하게 되면 재사용이 안되고 다른 서버와의 공유도 어려움. 세션을 파일에 저장해서 공유하고 재사용 가능하도록 만들수 있음
  • 필요한 의존성을 설치 : npm install session-file-store
  • app.js 파일에 설정을 추가하고 session 설정 미들웨어를 수정
  • 실행하여 sessions 라는 디렉토리가 만들어지는지 확인 후 브라우저에 접속했을 때 파일이 만들어지는지 확인
• 세션을 데이터베이스(MariaDB - 다른 DB도 가능)에 저장하는 것이 가능

(2) 미들웨어 사용

• 설치 : morgan, cookie-parser, dotenv 설치
  • npm install morgan cookie-parser dotenv
• 프로젝트에 .env 파일(여기에 작성된 내용은 node 프로그램에서 process.env이름으로 사용가능)을 생성하고 작성
  • COOKIE_SECRET=keyboard
    PORT = 3000
• app.js 수정

 

(3) 파일 업로드 처리 - multer 미들웨어

• web service 에서 파일을 업로드하려면 multipart/form-data 형태로 데이터를 전송해야 함
• node에서 multer를 가지고 파일 업로드를 처리할 때는 4가지로 나누어서 처리함
  • none : 파일 업로드가 없을 때
  • single : 하나의 파일만 업로드 될때
  • array : 한번에 여러 개의 파일이 업로드 가능한데 하나의 파라미터로 업로드
  • fields : 여러 개의 파일을 여러 개의 파라미터로 업로드 하는 경우 사용
• 파일 업로드 처리를 할 때 파일의 이름을 유일 무일하게 변경하는 경우가 있음
  • 이런 경우 UUID(유일한 문자열) 나 현재 시간을 파일 이름에 추가해서 생성하는 것이 일반적임
• 실제 운영을 할 때는 애플리케이션 서버 디스크가 아닌 별도의 디스크(AWS의 S3 서비스 나 Google의 Firebase 서비스 등)에 저장을 해야함.
• 저장을 할 때 디렉토리는 미리 만들어져 있어야 함
• 파일 업로드를 위한 준비
  1. package 설치 : npm install multer
  2. app.js 파일에 디렉토리를 생성해주는 코드를 추가
  3. @@@
  4. app.js파일에 처리하는 코드를 추가
• 파일에 한글이 포함되어 있을 때 한글이 깨지는 문제는 파일을 업로드 할 때 파일의 원래 이름을 같이 전송해서 파일의 원래 이름을 데이터베이스에 저장한 뒤 다운로드 할 때 파일을 변경해서 저장하는 방법으로 해결이 가능
  • 코드로 해결하는 방법도 있음 : @@@
• 여러 개의 파일 업로드 - 폼의 내용을 ajax로 전송
  1. 클라이언트 파일 생성 - multi.html
  2. app.js 파일에 요청을 처리하는 함수@@@@@
• 여러 개의 파라미터로 전송하는 경우
  • upload.fields([{name:파라미터이름}, {name:파라미터이름}...])

 

(4) Routing

• Routing : 최적의 경로를 탐색하는 것
• Node의 Routing
  • 사용자의 요청을 처리하는 무부분을 모듈화하는 것
  • 웹 애플리케이션 서버가 커지면 처리해야 할 URL이 늘어나는데 이를 하나의 파일에서 전부 처리하면 가독성이 떨어지게 되므로 url을 모듈화해서 처리
• 라우팅 - 기본요청과 user 가 포함된 요청 과 board가 포함된 요청을 분리해서 구현
• routers 디렉토리 생성 
  • 기본 요청들을 처리하는 코들을 index.js 파일을 생성하여 추가
• routers 디렉토리 안에 회원 관련된 요청들을 처리하는 코드를 user.js 파일을 생성해서 추가
• routers 디렉토리 안에 게시판 관련된 요청들을 처리하는 코드를 board.js 파일을 생성해서 추가
• app.js 파일에 라우팅 파일을 url과 매핑
• 서버를 실행한 후 브라우저에서 localhost3000/, localhost3000/user, localhost3000/board

 

(5) Front controller 패턴

• 클라이언트의 모든 요청을 app.js가 받아서 각각의 라우팅 파일에서 실제로 처리 함
  
  • 서버 애플리케이션 관련 설정은 app.js 에서 하고 실제 처리는 각 라우팅 파일에서 수행하도록 함
• 모든 요청이 먼저 들어오게 되는 app.js를 Front Controller 라고 하고 실제 처리를 담당하는 라우팅 파일들을 Page Controller 라고 함

 

#템플릿 엔진(Template Engine)

• 서버의 데이터를 HTML 과 합쳐서 출력할 수 있도록 해주는 라이브러리
• 거의 모든 웹 프레임워크들이 가지고 있으며 종류는 다양함
• 서버에서 뷰를 만들어서 클라이언트에게 제공하겠다라는 의미임
• 템플릿 엔진을 사용하려면 템플릿 엔진에 대한 별도의 학습이 필요함
  • HTML,CSS,JavaScript 이외의 학습

 

(1) Jade

• 현재 저작권 문제로 Pug 로 개명 : https://pugjs.org/api/getting-started.html

1. 설치
   • npm install pug
2. 설정
   1. app.set('views', path.join(__dirname, '출력할 html 파일들의 위치'));
   2. app.set('view engin', 'pug');
3. 처리
   • res.render('html 파일 경로', 데이터)
4. html 파일에서 데이터를 pug 문법에 맞춰서 출력
5. 데이터를 pug를 이용해서 출력
   1. pug를 설치
   2. app.js 수정
6. 프로젝트에 views 디렉토리를 생성
7. views 디렉토리에 index.pug를 생성 후 작성
   1. 코드 작성시 주의할 점은 each 안의 문장은 반드시 들여쓰기가 되어야 함
8. 브라우저에 Localhost:3000으로 app.js 에서 넘겨준 데이터가 제대로 출력되는지 확인

 

(2) nunjucks

• node에서 사용하는 템플릿 엔진 중의 하나 임

 

(3) node에서의 템플릿 엔진

• node 에서는 템플릿 엔진을 이용한 출력보다는 node를 이용해서 결과를 전송하고, ajax 나 fetch api를 이용해서 데이터를 출력하는 경우가 더 많음