Express란?

Express란

node.js를 위한 간결한 웹프레임워크이다
여기서 node.js란 JavaScript를 브라우저 밖에서 사용하게 해주는 프로그램이라고 한다

node.js를 사용해서 서버를 만들어보자 먼저 해야할게 무엇이 있을까?
AWS서버, NAS 개인서버, 메일서버 등등을 생각해보고 구상도도 그려보고 리눅스도 설치해야겠고
IP 주소도 설정하고 등등 해야할게 아주 많을것이다

Express는 node.js를 사용하여 이런 서버를 개발하고자 하는 개발자들을 위해
서버를 쉽게 구성하고 제작할 수 있게 해주는 프레임워크다

Express를 사용하지 않고 웹 서버를 띄운다고하면
사용자는 요청하고 서버에선 받는게 기본적인 웹 서버의 기준이다
사용자가 원하는 데이터를 볼 수 있게끔 정리해놓고 즉각 보여지게 하는 코드는 모두 서버에 담아져있다

빨간 박스에 담겨져있는것이 사용자가 요청을 한 내용이고, 네이버에 요청을 했으니 검색을 하면 어떤 내용을 보여주어라 하는 것이 서버에 넘어가게 된다

내장 모듈 활용, 웹 서버 띄우기

// index.js

const http = require('http');

http.createServer( (request, response) => {
    response.writeHead(200, {'Content-Type' : 'text/plain'});
    response.write('Hello Server');
    response.end();
}).listen(3000);

http 내장 모듈을 받고 createServer으로 내가 작성한 response화면을 보여주게 된다
여기서 내가 보여주는 화면은 Hello Server이 된다

직접 서버를 키고 확인

terminal - cd index.js - node index.js
웹사이트 localhost:3000 입력

code에서 보면 200이라는 숫자를 확인할 수 있다 이 숫자는 https 상태코드를 일컫는다

상태 코드설명

1xx	조건부응답
2xx	응답성공
3xx	리다이렉션
4xx	요청오류 404 Not Found
5xx	서버오류

listen(3000)에 3000은 localhost 3000번을 말한다

여기까지가 Express를 사용하지 않고 웹서버를 만들어보았다
하지만 Express를 사용한다해도 사용자가 서버에 요청하고 데이터를 받은 서버가 사용자에게 다시 뿌려주는 형식은 같다

Express를 사용해서 웹서버 띄우기

패키지를 추가하기 위해 package.json을 우선적으로 만든다

terminal - cd index.js - npm init -y

//terminal
minjun@dubi code_test % npm init -y
Wrote to /Users/minjun/Documents/code_test/package.json:

{
  "name": "code_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}


minjun@dubi code_test % 

package.json 생성 확인

현재 package.json 상태이다 아무런 패키지를 설치하지 않은 상태이므로 express를 설치한다

//package.json
{
  "name": "code_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

npm install express

//terminal
minjun@dubi code_test % npm install express

added 57 packages, and audited 58 packages in 2s

7 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
minjun@dubi code_test % 

파일 생성 확인하고 package.json에서 express가 설치된 것을 확인한다

node_modules에는 각종 리소스들이 설치되어 있다

설치가 완료되었으니 본격적으로 Express로 웹서버 띄우기

app.js 생성

//app.js

//웹서버를 띄워보자

const express = require('express');

const app = express();
const port = 3000;

// 내가 띄워주는 reponse만 사용자가 볼 수 있다
app.get('/', (req, res) => {
    res.send('hello express');
});

app.listen(port, () => {
    console.log('Express listening on port', port);
});

terminal - node app.js

터미널에서 Express listening on port 3000 확인

해당 메세지는 우리가 console.log에서 지정한 값이다

웹사이트에서도 확인해보자

localhost:3000

get 요청이란

app.js 입력

app.get('/test-site', (req, res) => {
    res.send('hello express');
});

localhost:3000/test-site

현재 라우팅을 추가하지 않았기 때문에 이런 모습으로 사이트가 뜨게 된다

get요청은 URL을 입력했을 때가 바로 get 요청이 되는 형식이고, 화면에 그대로 보여줘라 라는 느낌이다

코드에 다시 입력해보자

app.get('/test-site', (req, res) => {
    res.send('hello test-site, get 요청했어!');
});

나는 get 요청에 'hello test-site, get 요청했어!' 라는 문구를 적어줬는데 왜 웹사이트에 뜨지 않을까?
일단 서버를 내렸다가 다시 켜보자

node app.js

오!! 이번엔 잘 뜬걸 확인했다
하지만, 매번 이렇게 서버를 내렸다가 켜야할까? 굉장히 비효율적이고 쓸데없는 짓이라는걸 우린 이미 알고 있다
이럴 때 어떻게 해주어야 할까?
누군가 실시간으로 감시해주면 좋을거같다 소스를 수정하면 즉각 반응이 되게끔 설정해보자

nodemon 설치

nodemon이란, 소스의 변화를 감지하고 모니터링한다

설치

npm i -g nodemon

실행

npx nodemon app

만약 nodemon이 동작하지 않는다면 package.json을 확인한다
scripts에 "start": "nodemon ./bin/www" 추가
devDependencies에 nodemon 설치 확인

동작 확인

npm script 추가

npm start, npm dev 동작 스크립트 만들기

npm start를 했을 때 가장 먼저 고정적으로 app.js 가 뜨게 할 수 없을까?
package.json에서 스크립트를 추가하면 된다

nodemon app.js