NodeJs + Express 로 웹서버 구축하기

Goody·2021년 2월 24일
9

자바스크립트

목록 보기
8/13

들어가며

Node.js 와 Express로 웹서버를 구축하는 방법을 배운다.


Step1 - NPM Project 시작하기

빈 프로젝트 디렉토리에서 콘솔을 열고 위와 같이 입력한다.

비어있던 디렉토리에 package.json 파일이 생성되었다.

package.json 파일 내부

콘솔에 npm install express --save 를 입력해서 express 서버를 설치한다.

--save 옵션은 이 node 프로젝트가 의존하고 있는 외부 라이브러리 정보를 package.json 안에 넣는 명령어이다.

package.json 파일 내부에 dependencies 와 그 안에 express 가 추가된걸 확인할 수 있다.


express 가 필요로 하는 라이브러리들도 node_modules 라는 디렉토리 안에 함께 설치되었다.


Step2 - Express 기반 웹서버 구동


app.js 파일을 생성한다.

// node_modules 에 있는 express 관련 파일을 가져온다.
var express = require('express')

// express 는 함수이므로, 반환값을 변수에 저장한다.
var app = express()

// 3000 포트로 서버 오픈
app.listen(3000, function() {
    console.log("start! express server on port 3000")
})

// 이제 터미널에 node app.js 를 입력해보자.

app.js 파일 안에 위와같이 입력한다.

터미널에 node app.js 를 입력하면 app.js 파일 내부의 app.listen(포트번호, 콜백) 메서드가 실행되는 걸 볼 수 있다.

서버에 변경이 있을 때마다 서버를 껐다 키는 것은 불편하므로, nodemon을 설치해준다.

-g 은 컴퓨터 전체에 설치하는 글로벌 install 옵션이다.

콘솔에 nodemon app.js 를 입력하면 서버가 실행되는데, 이제 app.js 파일 내부를 수정하고 저장하면 자동으로 서버가 다시 시작된다.


Step3 - URL Routing 처리

// request 와 response 라는 인자를 줘서 콜백 함수를 만든다.
// localhost:3000 브라우저에 res.send() 내부의 문자열이 띄워진다.

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

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

브라우저의 내용이 수정되었다.

브라우저에 HTML 파일의 내용을 띄워보자.

프로젝트 디렉토리에 public/main.html 을 생성한다.

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

    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
        Atque, ullam quos! Iste quae, molestiae vitae tenetur, 
        in a aperiam voluptatibus dicta qui doloribus libero suscipit optio delectus voluptas voluptatem impedit!</p>
</body>
</html>

HTML 내부를 채운다.

모든 요청에 대해서 일일이 처리를 해줘야 서버에서는 HTML,CSS,JS 등 파일을 응답해줄 수 있다.

// request 와 response 라는 인자를 줘서 콜백 함수를 만든다.
// localhost:3000 브라우저에 res.sendFile() 내부의 파일이 띄워진다.

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

// localhost:3000/main 브라우저에 res.sendFile() 내부의 파일이 띄워진다.
app.get('/main', function(req,res) {
    res.sendFile(__dirname + "/public/main.html")
})

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

__dirname 은 요청하고자 하는 파일의 경로(최상위 디렉토리~현재 디렉토리)를 단축시켜주는 절대경로 식별자이다.


Step4 - static 디렉토리 설정

<body>
    <h1>main page</h1>

    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
        Atque, ullam quos! Iste quae, molestiae vitae tenetur, 
        in a aperiam voluptatibus dicta qui doloribus libero suscipit optio delectus voluptas voluptatem impedit!</p>
       
        <script src = "main.js"></script>
</body>
</html>

위처럼 HTML 에 CSS나 js 파일을 넣었다면, 아래와 같은 방법으로 불러올 수 있다.


public 내부에 js 파일을 생성한다.

js 파일 내부에 코드를 입력한다.

// public 디렉토리를 static으로 기억한다.
// public 내부의 파일들을 localhost:3000/파일명 으로 브라우저에서 불러올 수 있다.
app.use(express.static('public'))

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

localhost:3000에 접속해보면 main.htmlmain.js가 성공적으로 삽입된 것을 알 수 있다.

HTML에 이미지도 넣을 수 있다.

public/images 에 이미지 파일을 넣는다.

<body>
    <h1>main page</h1>

    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
        Atque, ullam quos! Iste quae, molestiae vitae tenetur, 
        in a aperiam voluptatibus dicta qui doloribus libero suscipit optio delectus voluptas voluptatem impedit!</p>
        
        <img src="images/slime.png">
        <script src = "main.js"></script>
</body>
</html>

HTML에 이미지 태그와 경로를 넣는다.

이미지가 웹브라우저에 반영되었다.


REFERENCE

크롱의 Node.js 웹개발로 알아보는 백엔드 자바스크립트의 이해 :

https://www.inflearn.com/course/node-js-%EC%9B%B9%EA%B0%9C%EB%B0%9C/dashboard

1개의 댓글

comment-user-thumbnail
2022년 11월 16일

지금까지 제가 찾아봤던 Node.js 튜토리얼 중에 가장 깔끔하고 유용하네요. 감사합니다!!

답글 달기