Node.js 웹 만들기 간단 정리 1

node.js를 까먹지 않기 위하여 작성하는 글입니다.

폴더를 만드세요.

예를 들어 test 폴더라고 칩시다.

터미널로 가서

npm init

node package management를 여기에서 사용 할 것이라고 말해 줍시다.

여기서 init하게 되면 package.json 파일이 생깁니다.

Express

npm install express --save

여기서 express는 node에서 웹서버를 만들 수 있는 프레임워크 입니다.

express이외에도 koa, hapi 등 있습니다. 

여기서 --save란 "이 노드프로젝트가 의존하고있는 외부라이브러리를 불러와서 거기 넣고 package.json에다 기억시켜줘"라는 말과 같습니다.

이렇게하면  dependency 안에 express라고 생길 것입니다.

express 엄청 큰 모듈이라고 생각하면됩니다.

우리가 접근할 일은 적지만 만약 개발서버 프론트 서버를 따로 돌린다면 eject라고 따로 빼는 방법도 있습니다.

Nodemon

npm install nodemon -g 

개발은 편하게 해야 좋져.

우리는 웹사이트를 개발하며 수도 없이 웹을 실행하고 반복합니다.

만들고 있는 것이 제대로 작동하는지 확인하기 때문이져.

nodemon은 자동으로 파일의 변화를 감지해서 서버를 반복적으로 가동시켜 줍니다.

없으면 불편하니 global로 설치합시다.

이때

nodemon app.js

로 실행시켜야 가동이 됩니다.

그럼 여기서 app.js 파일을 만들어 봅시다.

const express = require('express')
const app = express()
 
app.listen(3000,function(){
    console.log("start express server on port 3000")
})

express를 다운받았으니 사용을 해야겠죠

4번째 줄의 코드를보면 3000번의 포트로 접근하는 클라이언트를 인식하겠다고 됩니다.

이것만으로도 서버는 아마 열릴 것입니다.

확인하기위해서 public이라는 폴더를 만들어 줍니다.

그리고 index.html을 만들어주고 app.js에 다음과 같은 코드를 추가시켜 주세요.

app.use(express.static('public'))
 
app.get('/',function (req,res) {
    console.log('app.js loaded')
 
    res.sendFile(__dirname + "/public/index.html")
})

express에서 public폴더를 static으로 지정하겠다고 했습니다.

이는 css나 html같은 정적 파일을 관리하기 위한 것입니다.

그리고 '/' url로 들어오는 것을 여기서 받겠다는 것인데

__dirname (해당 폴더를 포함한 상위의 절대 경로)+ public폴더의 index.html을 열어라는 말이 됩니다.

nodemon app.js

하면 html이 나타납니다.