220920 더 잘하고싶어서 하는 공부
Express.js
노드에 3rd party 프레임워크로 세부적인 내용들을 외부에 맡길 수 있도록 해주고, 더깔끔한 코드를 작성 할 수 있게 해준다. 유틸리티 함수도 다수 제공한다.
(프레임워크 : 우리가 다루는 도구와 규칙의 모음. Framework: Helper functions, tools & rules that help you build your application)
왜 사용할까?
더 나은 코드를 작성하는 유일한 패키지는 아니다. vanilla Node.js도 사용가능하다. 혹은 충분하기도 하다. Adonis.js, Koa, Sails.js 등등을 대안으로 사용할 수도 있다.
하지만 Express.js가 가장 많이 사용된다. 유연하고, 특별한 기능들을 추가하지 않아도 된다. 또한 어플리케이션을 구축하거나, 유입되는 요청들을 처리함에 있어 높은 확장성을 지닌다.
설치
새 프로젝트를 만들어준다.
app.js에는 import를 지워준다.
const routes = ruquire('./routes');
npm install --save express--save dev가 아니라 왜 --save를 깔까?
=> 프로덕션 의존성 때문이다. 개발중에만 사용하는 툴뿐만아니라 우리가 전달할 애플리케이션의 한 부분으로 통합된다.
추가적으로 Nodemon 을 사용하기 위해 깔아준다.
"start": "nodemon app.js",
로 바꿔주고
npm start를 해주면 실행된다.
app (app.js)
const app = express();app에서 많은 로직이 app상수에 들어간다. 이 app은 유효한 요청 handler(vaild request handler)이기도 하다. 따라서 app을 전달하여 서버를 생성할 수 있다.
그후, npm start를 해주면 된다.
미들웨어
Express.js 는 미들웨어와 깊게 연관되어있다. 미들웨어는 들어오는 요청을 express.js에 의해 다양한 함수를통하여 자동으로 이동한다.
Request → Middleware - next() → Middleware -res.send() → Response →..
express.js는 하나의 함수를 이용하기보다는 분할로 처리하여 보낸다.
app.use
app.use(req, res, next)요청핸들러 배열을 여기로 받아들이며, 여기로 온 함수들은 요청, 응답객체 그리고 next인수로 온다.
next는 함수로 express.js를 통해서 전달된다. 다음 미들웨어로 이동할 수 있도록 실행되어야한다.
위와같은 형식을 지닌 함수는 모두 미들웨어 이용에 사용할 수 있다. req, res, next를 모두 받는 함수라면 가능하다.
res.send
app.use('/add-product', (req, res, next) => {
res.send('<h1>The "Add Product" Page</h1>');
});send를 사용해서 응답을 보낼 수 있다. send method는 기본적으로 html콘텐츠 유형을 선택한다.
write를 사용여 보내느것보다 쉽다. 특히 파일을 전송할때 더 쉽게 이용할 수 있다.
Express.js 조금더 깊게 보기
github express.js를 보면 오픈소스를 확인 할 수 있다.
코드 전체를 보려할 필요는 없다. 근데 들여다보면 도움이 된다.
서버를 구축할때 app을 createserver로 보내도 되지만 app 대신 listen을 보내면 된다. github의 applicstion.js파일에 들어가보면 확인 할 수있다.
다양한 라우트 처리 (url처리)
app.use('/', (req, res, next) => {
console.log('This always runs!');
next();
});express.js.com공식문서에서 API reference 가면 app.use()를 확인할 수 있다.
app.use([path], callback...)
경로를 추가해 줄 수 있는데, '/'는 기본값이다. 도메인 뒤에 오는 전체 경로가 /라는 의미가 아니라 /로 시작한다는 의미이다. 물론 모든 라우트도 /로 시작한다.
아래에 '/app-product'를 써준다.
app.use('/add-product', (req, res, next) => {
console.log('In another middleware!');
res.send('<h1>The "Add Product" Page</h1>');
});
app.use('/', (req, res, next) => {
console.log('In another middleware!');
res.send('<h1>Hello from Express!</h1>');
});
왜 '/' 미들웨어의 전에 써줄까?
요청이 파일 위에서 아래로 내려가고, next를 호출하지 않으면 다음 미들웨어로 넘어가지 않기 때문이다. 결국 /app-product가 있다면 위에서 아래로 가는 순서로 가게된다.
그리고 next();를 호출하지 않았으므로 '/'미들웨어는 필터가 요청과 일치함에도 불구하고 요청을 처리할 기회를 얻지 못한다. 만약 응답을 보낸다면 next();를 호출하지 않는것이 좋다. 하나 이상의 응답을 보내려 하면 오류가 발생하게 된다.
모든 요청에 적용할 미들웨어가 있으면 다른 미들웨어 위에 추가한다. 필터를 입력하지 않거나 모든 요청과 일치하는 필터를 입력하면 그 미들웨어가 항상 먼저 실행된다.
app.use('/', (req, res, next) => {
next();
});