풀스택 맛보기2-express 웹서버 만들기
초기 세팅
package.json 생성
해당 프로젝트 상위 폴더에서 npm init 입력
=> package.json을 생성
express 설치
🔧npm install express
==> node_moudles & packge-lock.json 생성
#### express 사용 방법 index.js 생성 후 아래 코드 적용
import express from "express";
// const express = require("express"); 위의 코드를 이 코드로 가능함
const app = express();
추가 설명
packge-lock.json
- 패키지들을 안전하게 관리
- 패키지가 수정 됐는지 해시값으로 체크
- 기존 프로젝트 똑같은 버전으로 설치해줌
설치된 express는 npm에 의해 package.json 안에 dependencies에 추가 됨
node_modules 폴더가 없어지거나 다른 유저가 파일을 프로젝트를 사용할 때
npm install을 이용하여 node_moudles & packge-lock.json을 다시 생성
※ npm install을 할 때 package.json이 저장된 것을 확인하고 실행
gitignore .gitignore 파일 생성 -> github에 업로드하지 않을 파일을 설정
ex) node_modules // 용량의 크기 때문에 업로드하지 않음.
babel
Babel 홈페이지 -> node.js가 이해하지 못하는 최신 자바스크립트 코드를 이해하도록 변환 시켜줌
babel 설치1
🔧 npm install --save-dev @babel/core
–save-dev or -D
- package.json 파일의 devDependencies에 추가 됨
dependencies : 프로젝트에 실행하기 위한 라이브러리 devDependencies : 개발에 추가적으로 도움이 되는 라이브러리
babel 설정
babel.config.json 파일 생성 후 아래 코드 추가
{
"presets": ["@babel/preset-env"]
}
💡 preset: babel을 위한 거대한 플러그인
babel 설치2
🔧 npm install @babel/preset-env --save-dev
💡 preset-env : 최신 자바스크립트 구문을 사용할 수 있게 함
babel 설치3
🔧 npm install --save-dev @babel/node
babel-node 실행
직접 실행하지 않고 babel로 컴파일하는 script를 생성
"scripts": {
"dev": "babel-node index.js"
},
=> npm run dev를 입력하면 babel 적용과 함께 실행
❗ babel-node 실행 오류 ❗
babel-node를 찾을 수 없다는 경고와 함께 실행이 안된다면…
=> 아래 코드와 같이 package.json에 "type":"module" 추가
"devDependencies": {
"@babel/core": "^7.18.13",
"@babel/node": "^7.18.10",
"@babel/preset-env": "^7.18.10"
},
"type": "module"
}
nodemon
- 파일이 수정되는 것을 감지하고 재시작 해주는 패키지
🔧 npm install nodemon --save-dev
사용
"scripts": {
"dev": "nodemon --exec babel-node index.js"
},
express App
⚠️ 변경 사항
- src 폴더 생성 후 index.js를 넣음
- index.js -> server.js로 변경
- script 변경
"scripts": {
"dev": "nodemon --exec babel-node src/server.js"
},
server 생성
app listen 상태 만들기
import express from "express";
const app = express();
const handleListening = () => console.log("Server listening on port 4000 🚀");
app.listen(4000, handleListening);
브라우저한테 get request 받기
예시)
app.get("/", () => console.log("Hello"));
=> 이제 서버는 get request에 반응할 수 있는 상태
request & response
예시)
const handleHome = (req, res) => console.log("hello");
app.get("/", handleHome);
- request & response는 express로부터 받음
- 브라우저가 request 한 다음 서버가 response 함
속성 사용하기
예시)
const handleHome = (req, res) => {
return res.send("Hello");
};
=> send 속성을 이용하여 페이지에 ‘Hello’를 보여줌
여기까지 express를 이용하여 local Server를 만들어 request와 response로 브라우저와 소통하였고
다음은 request와 response 사이에 있는 Middleware를 알아보고자 한다.
Continue with req & res
참고