Node.js는 무엇인가요 ?
" JavaScript로 브라우저 밖에서 서버를 구축하는 등의 코드를 실행할 수 있게 해주는 런타입 환경입니다. "
Node.js는 구글 크롬의 V8 엔진의 뛰어난 성능을 브라우저 밖에서도 활용할 수 있도록 만들어진 플랫폼이다.
(Node.js 그 자체는 서버가 아니며 언어도 아니고 프레임워크도 아니다.)
Node.js의 대표적인 특징은 다음과 같다.
1. 싱글 스레드 (Single Thread), 비동기 I/O (Non-blocking I/O)와 Event-driven
: JavaScript의 특성을 그대로 이어 받은 것이기 때문에 기존에 자바스크립트를 사용하던 사람은 이해하기 쉽다.
Node.js는 단일 스레드로 동작하며 효율적인 작동을 위해 콜백 함수를 쌓아놓고 이벤트 루프가 스택, 백그라운드, 태스크 큐를 회전하며 콜백 함수를 호출한다.
자바스크립트의 이벤트 루프를 잘 모르겠다면 이 링크를 참고해보자. 같은 원리로 동작한다.
2. JavaScript 언어 기반
: 가장 중요한 것은 자바스크립트는 프론트엔드 개발자라면 모두 배울 수 밖에 없는 언어이고 자바스크립트 기반으로 백엔드 개발을 가능하게 해주는 것이 Node.js라는 사실이다.
너무 단순하게 적은 것 같지만 구글에 검색하면 양질의 정보들이 많다.
그렇다면 Express는 무엇이고 어떻게 사용할까?
위에서 언급했듯 node.js 자체는 그저 환경일 뿐이며 Express는 node.js로 서버를 만드는 것을 도와주는 웹 프레임워크다.
요즘은 Express 개발팀이 만든 koa라는 프레임워크도 있으며 인기가 계속해서 상승하고 있는 nest.js도 있으나 아직까지 JavaScript 기반 백엔드 웹프레임워크 1위는 Express다.
빠르게 설치해서 사용해보도록 하자.
1. 기본 설치
yarn init || npm init
yarn add express || npm install express
yarn add -g nodemon || yarn install -g nodemoninit으로 pakage.json 파일을 만들어주고 express 설치하면 끝이다.
nodemon은 우리가 파일 새로 저장할 때마다 자동으로 서버를 갱신시켜 준다. 반드시 설치하자. 이름도 귀엽다.
"scripts":{
"start": "node src",
"start:dev": "nodemon --watch src/ src/index.js"
}nodemon을 설치했을 경우 pakage.json에 해당 내용을 추가한다.
당연히 src/ 다음은 본인이 만든 자바스크립트 파일명으로 수정해주자.
이후 yarn start || npm start를 입력하면 지속적으로 서버를 갱신해준다.
const express = require('express'); // express 모듈 불러오기
const app = express(); // 서버 생성
app.use(express.static('public')); // public 폴더에 css, js 파일 등 넣고 사용하게 해준다.
app.use(express.urlencoded({extends: true})) // post 요청 시 데이터 인코딩 방식
app.listen(8080, () => {
console.log('서버 접속 완료');
}); // 해당 포트로 접속 시 실행할 콜백 함수위의 코드대로 작성하면 기본적인 get, post 요청을 관리할 준비는 끝났다.
public 폴더에 css 및 js 파일을 넣고 사용하라고 했는데, html 파일에서 href 작성할 때 상대 경로가 아니라 public 기준 절대 경로를 작성해주면 된다.
예를 들어 ../public/css/style.css가 html파일에서부터의 상대 경로라면 우리가 실제 작성하는 경로는 css/style.css만 작성해주면 된다.
2. GET 요청 보내기
app.get('/todo', (req,res) => {
res.sendFile(__dirname+'/index.html')
})
// 절대경로
위와 같이 /todo에서 todoList를 보여주고 싶다면 해당하는 html 파일만 뿌려주면 끝이다.
req, res는 각각 요청(request)과 응답(response)을 의미하며 통상적으로 req/res라고 표기한다.
3. POST 요청 보내기
app.post ('/add', (req, res) => {
res.send('전송완료')
console.log(req.body)
}) // body parserhtml 태그의 action 속성에 원하는 경로를 지정해주고 method는 데이터를 서버에 전송할 것이기 때문에 POST라고 적어준다.
웹에서 input에 값을 입력하고 전송한 뒤 console.log(req)를 확인해보면 "body: { todo: '값', todoDate: '값' }"이라고 출력되는 것을 확인할 수 있다.
데이터를 어떻게 가공할 것인지에 따라 req.body.todo 이런 식으로 꺼내서 사용하면 된다.