Static 폴더 추가하기

소스코드

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

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

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

git reset --hard
git pull
git reset --hard 852384b
git reset --soft eaa13c5
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 852384b
git reset --soft eaa13c5
npm install
atom .

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


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.useHTTP method에 상관없이 무조건 실행되는 부분입니다.

express.static를 사용해 static폴더를 지정하였습니다.
__dirname은 node.js에서 프로그램이 실행중인 파일의 위치를 나타내는 global variable입니다.
app.use(express.static(__dirname + '/public'))현재위치/public을 static폴더로 지정하는 명령어입니다.

static폴더가 설정되면 웹사이트 경로가 static 폴더에 연결됩니다.
'/'에 접속하면 '/public'에, '/css'에 접속하면 '/public/css'에 접속하게 됩니다.

<!-- 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폴더에서 특별히 파일 이름을 지정해 주지 않으면 자동으로 index.html을 찾게 됩니다.
즉 '/'에 접속하면 '/index.html'을 보여줍니다. '/index.html'입력한 것과 같은 결과를 보여줍니다.

/* public/css/master.css */

h1 {
 color: tomato
}

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,
감사합니다^^
댓글쓰기

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

UP