1. Express 기본 구조
Express
Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크
npm install --save express
Plain Text
복사
프레임워크
프로그램을 만드는데 기본적으로 제공되는 기본 골격.
전체적인 틀이 이미 정해져 있기 때문에 개발자는 자신이 목표로 하는 세부 기능에만 집중할 수 있다.
코드 품질이 일정하게 유지될 수 있다.
Express와 함께 사용 할 수 있는 서드파티 패키지들
1. express-useragent
접근한 클라이언트의 정보(운영체제정보, 브라우저 정보, IP주소 등)를 취득할 수 있는 기능을 제공
npm install --save express-useragent
Plain Text
복사
2. serve-static
특정 폴더를 통째로 웹에 노출시키는 기능 (폴더 구조가 그대로 URL노출됨)
img, css, js, 정적 html파일등을 호스팅하고자 할 때 사용함.
npm install serve-static --save
Plain Text
복사
3. serve-favicon
favicon 파일을 브라우저에 전달한다.
npm install --save serve-favicon
Plain Text
복사
Express 기반 백엔드 구현 기본 코드 구조
/*----------------------------------------------------------
| 1) 모듈참조
-----------------------------------------------------------*/
/*----------------------------------------------------------
| 2) Express 객체 생성
-----------------------------------------------------------*/
/*----------------------------------------------------------
| 3) 클라이언트의 접속시 초기화
-----------------------------------------------------------*/
/*----------------------------------------------------------
| 4) Express 객체의 추가 설정
-----------------------------------------------------------*/
/*----------------------------------------------------------
| 5) 각 URL별 백엔드 기능 정의
-----------------------------------------------------------*/
/*----------------------------------------------------------
| 6) 설정한 내용을 기반으로 서버 구동 시작
-----------------------------------------------------------*/
Plain Text
복사
2-1. 웹 파라미터
#01. 개요
프론트엔드가 백엔드에게 전달하는 변수.
백엔드는 프론트엔드로부터 전달받은 변수에 따라 선택적인 결과를 생성하여 돌려줄 수 있다.
ex) 프론트엔드 -----(아이디,비밀번호)-------> 로그인
#02. GET 파라미터
URL 뒤에 ?를 기준으로 이름=값&이름=값 형식으로 변수를 포함시키는 방법
주로 링크를 클릭한 경우 어떤 링크를 선택했는지를 감지하기 위해 사용한다.
HTML의 <form> 태그에서 method속성을 명시하지 않거나 GET으로 부여한 경우 <input> 태그의 name속성이 변수명이 되고, 사용자 입력값이 변수의 값이 되어 action 속성에 명시한 URL로 전송된다.
모든 변수가 URL에 노출되기 때문에 상대적으로 보안에 좋지 않다.
#03. URL 파라미터
URL안에 변수값을 폴더 이름처럼 숨겨놓은 처리
http://<hostname>:<port>/페이지이름/변수1/변수2
Plain Text
복사
2-2. 웹 파라미터 (2)
#01. POST 파라미터
HTML의 <form> 태그에서 method속성을 POST로 부여한 경우를 의미.
변수가 URL에 노출되지 않기 때문에 상대적으로 보안에 유리하지만,
결코 전송되는 변수를 볼 수 없다는 것을 의미하지는 않는다.
Node.js 스스로는 POST 파라미터를 처리하지 못하므로 다음의 패키지를 설치해야 한다.
npm install --save body-parser
Plain Text
복사
#02. PUT, DELETE 파라미터
HTTP 1.1에서는 지원하지 않는 속성 (HTTP 2.0부터 지원)
HTML의 <form> 태그는 이 방식을 지원하지 않는다.
기본적으로 POST 방식과 동일하면서 전송방식의 이름만 변경한 형태.
Node.js 스스로는 PUT, DELETE 파라미터를 처리하지 못하므로 다음의 패키지를 설치해야 한다.
npm install --save method-override
Plain Text
복사
#03. RestfulAPI
하나의 URL이 어떤 개체(ex-상품,회원 등)를 의미하고 GET, POST, PUT, DELETE 전송방식에 따라 조회,입력,수정,삭제 기능을 구분하는 구현 형태
대부분 OpenAPI는 Restful API 방식을 따른다.
위의 네가지 방식을 CRUD라 부른다.
즉, Restful API는 CRUD 방식을 따르는 표준.
3. 쿠키
변수를 클라이언트(=웹브라우저)에 텍스트 파일 형식으로 저장해 놓은 것.
저장 주체가 백엔드일 경우 백엔드가 갖고 있는 변수 값을 프론트엔드에 보관시킨다는 의미.
백엔드에 접속하는 개인별로 맞춤형 정보를 저장할 수 있기 때문에 개인화 기능 구현에 활용됨.
텍스트 파일의 특성상 보안에 민감한 정보는 기록해서는 안된다.
백엔드와 프론트엔드가 변수값을 공유할 수 있는 가장 원시적인 방법.
저장위치가 브라우저이기 때문에 프론트엔드에서도 쿠키를 저장하거나 읽어올 수 있는 API가 존재함. (같은 값 공유 가능)
하지만 보안에 최악.
쿠키의 특성
일반 변수는 프론트엔드가 페이지를 이동하면서 사라진다.
기본적으로 브라우저를 닫기 전까지는 사이트 내의 모든 페이지가 공유하는 전역변수의 역할을 한다.
설정에 따라 일정 유효기간 동안은 브라우저를 재시작해도 변수값을 유지할 수 있다.
패키지 설치
npm install --save cookie-parser
Plain Text
복사
쿠키 저장에 필요한 조건
4. 세션
쿠키와 마찬가지로 사이트 내의 모든 페이지가 공유하는 전역변수.
단, 유효시간은 설정할 수 없기 때문에 브라우저가 닫히거나 마지막 접속 이후 5분간 재접속이 없다면 자동 폐기된다. (시간은 설정 가능함)
특정 클라이언트에게 종속된 개인화 정보를 백엔드가 직접 저장/관리하는 형태.
많은 데이터를 보관할 수는 없다.
쿠키보다 보안에 유리하므로 로그인 정보 관리 등에 사용된다.
npm install --save express-session
Plain Text
복사
5. 메일 발송
패키지 설치하기
npm install --save nodemailer
Plain Text
복사
6. 파일 업로드
파일 전송 (Frontend)
HTML의 form 상에서 <input type='file'> 요소를 사용하여 form에 명시된 action 페이지 (=백엔드)로 전송함.
Ajax는 파일 업로드가 불가능하므로 Javascript의 file api를 사용하여 별도로 업로드 기능을 구현해야 함. (Frontend 영역)
파일 전송시에는 반드시 <form> 태그에 enctype="multipart/form-data" 속성이 명시되어야 함.
그런 이유로 파일 업로드를 백엔드에서는 multipart 전송이라고 표현하기도 함.
GET 방식 전송으로는 처리가 불가.
<form method='post' action='/upload/simple' enctype='multipart/form-data'>
<input type='file' name='myphoto' />
<input type='submit'>
</form>
Plain Text
복사
파일 수신 (Backend)
node의 multer 패키지 사용
npm install --save multer
Plain Text
복사
업로드 객체에 대한 환경 설정
var multipart = multer({
storage: multer.diskStorage({
destination: function(req, file, callback) {
callback(null, 업로드_될_파일이_저장될_폴더경로);
},
filename: function(req, file, callback) {
callback(null, 저장될_파일이름);
}
}),
limits: { // 업로드 제약
files: 최대업로드가능_파일수(int),
fileSize: 최대업로드가능_크기(byte단위)
}
});
Plain Text
복사
백엔드 페이지에서 업로드 처리
// 업로드를 위한 함수 클로저 리턴받기 (멀티업로드인 경우 single 대신 array 함수 사용)
var upload = multipart.single('input태그의 name속성값');
upload(req, res, function(err) {
if (err) { ... 에러가 발생한 경우 ... }
... 업로드 성공시 처리 ...
});
Plain Text
복사
