Node.js (inflearn)

yo·2021년 2월 7일

Section1. nodeJS + Express 웹서버 설정

1. NPM Project 시작

npm: Node Package Manager.

npm makes it easy for JavaScript developers to share and reuse code

npm init 명령어로 프로젝트?를 시작한다.
몇가지 정보를 입력하고 yes까지 치면 작업이 완료되면서 package.json이 생긴다.
프로젝트에 대한 설정정보? 들이 나와있고, django로 치면 requirements.txt같은 역할도 한다.

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

이제 express를 설치하자.
npm install express --save
--save명령은 설치한 라이브러리(여기선 express)를 자동으로 package.json에도 기입해준다.
이 명령어를 치면 2가지 변화가 생기는데,
1. node_modules폴더가 생긴다. (여기에 직접 접근할 일은 거의 없다.)
이 폴더에 방금 설치한 express관련 파일이 있다.
2. package.json파일에 dependencies가 추가된다.

{
  "name": "nodeserver",
  "version": "1.0.0",
  "description": "nodeserver test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  }
}

Express 기반 웹서버 구동

app.js파일을 만들어 아래처럼 작성하자.

var express = require('express')  // node_modules아래 'express'라는 파일을 불러온다(불러온 값은 함수)
var app = express()  // 위에서 불러온 함수를 실행한다.
app.listen(3000, function() {
    console.log("start! express server on port 3000");
});  // 3000포트를 연다.

node app.js로 만든 파일 실행한다.
아래 같은 결과를 볼 수 있다. localhost:3000으로 접근하면 서버 켜진 것을 볼 수 있다.

start! express server on port 3000

app.js파일 내용 바뀔때 마다 서버 수동으로 껏다 켜야 하는데, 이를 감지해 자동으로 서버를 재시작해주는 모듈을 사용하자.

npm install nodemon --save
참고로 npm install nodemon -g 이렇게 -g옵션은 컴퓨터 전역에 설치하는 명령어다. 이땐 sudo권한으로 설치해야한다. 자주 사용하는 모듈이므로 -g로 설치하자.
(--save는 이 디렉토리 안에만 설치된다.)

URL Routing 처리

app.js에 코드를 추가한다.

 app.get('/', function(req, res) {
     res.send("hi node!")
 });

응답값에 h1테그를 붙여줄 수도 있다.

 app.get('/', function(req, res) {
     res.send("<h1>hi node!</h1>")
 });

이번에는 html파일을 res로 보내줘보자.

우선 public dir 만들고 main.html을 아래처럼 만든다.
-참고로 vscode에서 ! + tab으로 html 템플릿 자동완성 된다.

h1테그를 쓸 때 <h1 이렇게만 쓰고 tab누르면 나머지 테그들 자동 완성된다.

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>main.html</title>
    </head>
    <body>
        <h1>main page</h1>

        <p> aksdfjlsajflska fjslak fjaslkf jsalk fjsalk faslkf sajlk fjaslk fsjalk fsdja f</p>
    </body>
</html>

그리고 app.js코드를 수정해준다.

app.get('/', function(req, res) {
    res.sendFile(__dirname + "/public/main.html")
});

__dirname은 현재 프로젝트 루트 경로를 지칭한다.

결과!

static 디렉토리 설정

두 가지를 해보자.
1. public폴더 안에 main.js를 만들고 console.log("main js hihi");코드를 적는다
2. public폴더 안에 images폴더를 만들고 이미지 하나를 추가한다.

이제 main.html에 두 코드를 추가한다.
img태그로 이미지를 불러오고 script태그로 자바스크립트 파일을 불러온다.
그리고 마지막으로 위에 적은 코드를 실행시키기 위해 app.js에 app.use(express.static('public))코드를 추가해준다.
이 코드는, "야, static파일은 앞으로 public 디렉토리에서 불러다 사용해라" 라는 뜻이다.

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>main.html</title>
    </head>
    <body>
        <h1>main page</h1>

        <p> aksdfjlsajflska fjslak fjaslkf jsalk fjsalk faslkf sajlk fjaslk fsjalk fsdja f</p>
        
        <img src="images/10100027_01.jpg" alt="" width="300px";>
        <script src="main.js"></script>

    </body>
</html>

결과는 아래처럼 확인된다.

Never stop asking why

이전 포스트

TCP의 이해

다음 포스트