TIL_171031 Express, npm
Express
Node.js환경에서 동작하는 web application frame work
왜 등장했나?
|
|
Route
- 클라이언트의 다양한 요청에 따라 해당 요청에 맞는 response를 위해 응답하는 방식 (경로를 지정)
|
|
body-parser
- 클라이언트의 요청을 구성하는 페이로드는 리퀘스트 바디에 담겨서 온다
- express 내장 메서드
use()
와 함께 사용해서 미들웨어 파이프라인을 만든다. - next() 메서드를 통해 다음 파이프라인 또는 라우팅으로 넘긴다.
[참고] URI 에서 .../:<path>/
는?
- path의 일부를 파라메터화
다양한 응답을 위해 여러가지 메소드 제공
- 필요한 메소드를 체이닝하고, 마지막에 .send()
- render() 는 템플릿 엔진과 함께 사용
정적 파일 응답
- 클라이언트에게 HTML, CSS, Javascript, img 등의 정적파일로 응답
- express 내장 미들웨어인
static
사용 app.use(express.static(<dir>))
- dir: 요청한 정적 파일이 저장된 위치
|
|
템플릿 엔진
- 서버 코드에 html 텍스트를 혼합하여 사용하는 일이 없도록 하기 위해 탄생
- html 파일에서 인터폴레이션 제공
- 종류: jade, ejs, handlebars 등
|
|
todos 실습
server 코드
|
|
개발환경 구축: server-side
[설치할 패키지]
- express, body-parser, dotenv, mongoose
폴더 트리와 각각의 역할
- models/todo.js - db컨트롤
- routes/todos.js - 라우터
- /.env - dotenv 환경변수(로컬서버의 포트, mLab mongoDB 접)
- /server.js - 서버모듈
- package.json - npm 설정파일(
"start": "nodemon server.js"
)
**[참고]
npm script 키워드 ‘start’는 예약어로
run
생략 가능[dotenv]
‘.env’파일에는 기밀정보(개인정보)접근 방법을 담아놓고
깃허브나 서버에 올라가 오픈되지 않도록 보관. dotenv로
.env파일을 읽어올 수 있음
|
|
개발환경 구축: client-side
서버가 있는 곳에 클라이언트에 필요한 파일을 작성(로컬 서버니까)
파일 시스템
왼쪽(src): 개발자
오른쪽(public): webpack이 변환 & 생성
- ES6 –babel–> ES5
- Sass –node-sass–> CSS
- html —-> html
- babel + node-sass => webpack
패키지 설치
|
|
- webpack.config.js 파일 수정
- npm script 수정
"build": "webpack -w"
폴더 트리와 각각의 역할
webpack.config.js 에서 모듈 엔트리로 지정되어 있으므로, 경로와 파일명이 일치해야함
- src/
- js/
- app.js
- sass/
- partial/
- style.scss
- js/
axios 라이브러리 사용법
- `axios.httpMethod.(‘uri’)
.then()
.catch() - payload 전송시 객체를 바로 전달해도 된다. JSON.stringify 불필요(!)
오늘의 느낀점
- 서버운영까지해야 요즘엔 풀스택으로 인정받을 수 있다??? –> AWS, Docker를 공부하라
- 그런날은 너무 아득한 이야기같다 :( Todo나 잘하고나서 이야기..