Static 폴더 추가하기

소스코드

이 게시물에는 코드작성이 포함되어 있습니다. 소스코드를 받으신 후 진행해 주세요. MEAN Stack/개발 환경 구축에서 설명된 프로그램들(git, npm, atom editor)이 있어야 아래의 명령어들을 실행할 수 있습니다.

이 게시물의 소스코드는 Hello World! / Express로 서버 실행하기에서 이어집니다.

hello-world.git 을 clone 한 적이 있는 경우: 터미널에서 해당 폴더로 이동 후 아래 명령어들을 붙여넣기합니다. 폴더 내 모든 코드가 이 게시물의 코드로 교체됩니다. 이를 원치 않으시면 이 방법을 선택하지 마세요.

git reset --hard
git pull
git reset --hard b20cb1f
git reset --soft dead37f
npm install
atom .

hello-world.git 을 clone 한 적이 없는 경우: 터미널에서 코드를 다운 받을 폴더로 이동한 후 아래 명령어들을 붙여넣기하여 hello-world.git 을 clone 합니다.

git clone https://github.com/a-mean-blogger/hello-world.git
cd hello-world
git reset --hard b20cb1f
git reset --soft dead37f
npm install
atom .

- Github에서 소스코드 보기: https://github.com/a-mean-blogger/hello-world/tree/b20cb1fe76afac86ed96d3d0906f4a199cf19be9


express.staticstatic폴더를 지정해 주는 express의 함수입니다. 이번 게시물에서는 이 함수를 사용해서 static폴더를 설정하고 hello world!가 들어있는 html 파일을 브라우저에 출력해 봅시다.

폴더구조

index.js가 변경되고 index.html, master.css가 추가되었습니다. atom 에디터가 자동으로 컬러링을 해주니까 편하네요.
주황색은 변경된 파일, 녹색은 새로 생성된 파일, 회색은 변화가 없는 파일입니다.

코드

// index.js

var express = require('express');
var app = express();

app.use(express.static(__dirname + '/public')); // 1

app.listen(3000, function(){
 console.log('Server On!');
});

1. 기존에 있던 app.get함수 부분을 지우고 app.use함수가 추가되었습니다.

app.use(콜백_함수)

의 형태로 사용되며 app.get과 마찬가지로 req, res, next의 parameter가 콜백 함수로 자동으로 전달됩니다. 하지만 app.get과 다르게 HTTP methodroute에 상관없이 서버에 요청이 올 때마다 무조건 콜백함수가 실행됩니다.

콜백 함수가 온다고 했는데, 실제로 온 것은 express.static(__dirname + '/public')로 함수를 호출하고 있는데요, 이 함수를 호출하면 실제 사용될 콜백 함수가 return됩니다.(잘 이해가 안되시는 분들은 그냥 그렇구나 하고 넘어가셔도 됩니다.)

__dirname은 node.js에서 프로그램이 실행중인 파일의 위치를 나타내는 global variable입니다.

위 내용을 종합해서 설명하면, app.use(express.static(__dirname + '/public'))는 '현재_위치/public' route를 static폴더로 지정하라는 명령어가 됩니다. 즉 '/'에 접속하면 '현재_위치/public'를, '/css'에 접속하면 '현재_위치/public/css'를 연결해 줍니다.

다음으로 /public 폴더에서 보여줄 index.html파일을 살펴봅시다.

<!-- public/index.html -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello World!</title>
    <link rel="stylesheet" href="/css/master.css">
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

static route에 접근할 때, 특별히 파일 이름을 지정해 주지 않으면 자동으로 index.html 파일을 찾게 됩니다.
즉 '/'에 접속하면 '현재_위치/pulbic/index.html' 파일을 연결하게 됩니다. 물론 '/index.html'과 같이 파일이름을 입력해 주어도 '현재_위치/pulbic/index.html'에 접근할 수 있습니다.

css파일도 하나 추가했습니다.

/* public/css/master.css */

h1 {
  color: tomato
}

실행결과

http://localhost:3000 에 접속하여 html파일, css파일이 제대로 작동하는지 확인해 봅시다.

마치며..

첫번째 Node.js/Express 정적 웹사이트 제작에 성공하신것을 축하드립니다!

비록 지금은 hello world 뿐이지만 계속해서 MEAN stack 웹사이트까지 공부해 봅시다^^

댓글

산호섬 2017.08.07
친절하고 꼼꼼한 강의 정말 감사드립니다. 많은 도움이 되고 있어요. 그런데 이번 포스팅의 내용을 윈도우 운영체제의 localhost로 돌릴 때는 매끄럽게 잘 돌아가는데 우분투 서버에 올리니 css가 먹질 않습니다. 우분투에서는 public 아래에 css가 있다는 것을 인식 못하는 것 같은데 혹시 원인을 아시는지요? ㅠㅠ
산호섬 2017.08.07
CentOS 서버에서는 아무 문제 없이 돌아갑니다. 아무래도 우분투에서 설정이 바뀌는 게 있나봐요~ !
I
Ian H 2017.08.08
@산호섬,
우분투에서 console.log("__dirname: ", __dirname)를 한번 해보세요. 뭐가 나오는지.. 저는 우분투 OS가 없어서 실험을 못합니다.ㅠ
산호섬 2017.08.24
@Ian H,
저도 우분투를 지우고 CentOS에서 해본 것이라... 시간 나는 대로 우분투에서 한 번 돌려보겠습니다!
S
Sihyun Kim 2019.03.04
정말 매끄러운 강의입니다. 감사합니다!
I
Ian H 2019.03.05
@Sihyun Kim,
감사합니다^^
-
-7 2019.05.23
좋은 내용 감사합니다  질문이 있는데 이미지 파일을 불러오고 싶어서 css 파일 불러올 때와 같이  public 안에 images 파일을 만들고 사진 파일 넣은뒤 html {    background-image:url("/images/test.png");. } 다음과 같이 css 를 적용 시켜봤는데 불러오지를 못하더라구요  이건 다른 방법을 적용해야 하는 걸까요
I
Ian H 2019.05.28
@-7,
안녕하세요, 제가 똑같이 테스트해 봤는데, 잘 됩니다. public\images에 test.png파일이 있는지 다시 한번 잘 확인해 보세요
캡틴제라드 2019.06.07
그대로 했는데 cannot get / 이게 나오네요.... 
캡틴제라드 2019.06.07
app.use('/',express.static( __dirname+ '/public')); 이렇게 하니까 해결됬습니다 ㅎㅎ
I
Ian H 2019.06.07
@캡틴제라드,
app.use에서 route는 optional 파라메터라서 없어도 됩니다. 제가 방금 또 다시 확인해 봤어요.
'/' 없이 다시 한번 실행해 보시고, 혹시 계속 cannot get / 이라고 나오면, 그 코드를 github에 올려주실 수 있으세요? 한번 확인해 보고 싶네요.
댓글쓰기

이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기

UP