-
[Node.js] Static 폴더 추가하기Node.js/Hello World! 2022. 7. 28. 17:55
✅ 정적 웹페이지(Static web page)
정적 웹페이지(는 저장된 그대로 사용자에게 전달되는 웹 페이지로 내용이 바뀌기 전까지 계속 같은 화면을 보여주는 페이지이다.
즉, 정적 웹 페이지는 모든 상황에서 모든 사용자에게 동일한 정보를 표시하며, 콘텐츠 타입이나 문서 언어의 협상을 위해 웹 서버의 현대적 기능에 종속된다
예를 들면, 회사 홈페이지에서 CEO 인사말 혹은 연혁, 기업가치 등이 정적 웹페이지이다.
✅ 동적 웹페이지(Dynamic web page)
동적 웹페이지는 정적 웹페이지와 반대되는 개념이다.
정적 웹페이지는 항상 동일한 정보를 표시하지만, 동적 웹페이지는 항상 일정하지 않고 변화가 있다.
예를 들면, 게시판이나 SNS 같이 데이터가 입력, 출력, 삭제, 수정이 되는 페이지들이 동적 웹 페이지이다.
✅ 정적 웹페이지 구현하기
1. 정적 웹페이지 작성
일단 정작 페이지를 보여줄 폴더 public을 생성한다.
public 밑에 index.html과 master.css 를 작성해준다.
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>master.css
/* public/css/master.css */h1 {color: tomato}
2. index.js에서 연결하기
//index.jsconst express = require('express'); // 설치한 express module을 불러와서 변수에 담는다.const app = express(); //express를 실행하여 app object를 초기화.app.use(express.static(__dirname + '/public')); // 현재위치의 public 폴더를 static폴더로 지정const port = 8080; // 사용할 포트 번호를 port 변수에 저정app.listen(port, function(){ // 8080번 포트에 node.js 서버를 연결.console.log('server on! http://localhost:'+port); //서버가 실행되면 콘솔창에 메시지 표시console.log(__dirname); // '__dirname' 경로 확인});express.static는 static폴더를 지정해 주는 express의 함수이다. 이 함수를 사용해서 static폴더를 설정하고 hello world!가 들어있는 html 파일을 지정해준다.
app.use(콜백 함수)app.use()는 app.get과 마찬가지로 req, res, next 파라미터가 콜백 함수로 전달된다.
하지만 app.get과 다르게 HTTP 메서드나 URL 경로 상관없이 서버에 요청이 올 때마다 무조건 콜백함수가 실행된다.
콜백 함수가 온다고 했는데, 실제로 온 것은 express.static(__dirname + '/public')로 함수를 호출하고 있다.
이 함수를 호출하면 실제 사용될 콜백 함수가 return 된다.
__dirname은 node.js에서 프로그램이 실행중인 파일의 위치를 나타내는 전역 변수이다. (index.js의 위치)
위 내용을 종합하면, app.use(express.static(__dirname + '/public'))는 '현재위치/public' 경로를 static폴더로 지정하라는 뜻이다.
즉 '아이피:포트번호/'에 접속하면 '현재위치/public'를, '아이피:포트번호/css'에 접속하면 '현재위치/public/css'를 연결해준다.
static 경로에 접근할 때, 특별히 파일 이름을 지정해 주지 않으면 자동으로 index.html 파일을 찾게 된다.
즉 '아이피:포트번호/'에 접속하면 '현재위치/pulbic/index.html' 파일을 연결하게 된다.서버를 가동해보자
전역변수 __dirname은 현재 위치 "D:\workspace_nodejs\hello_world" 를 나타내는 것을 볼 수 있다.
http://localhost:8080/ 에 접속하니 static 폴더인 public 폴더 내에 있는 index.html 을 출력해준다.
http://localhost:8080/css/master.css에 접속하니 public 폴더 내 css 폴더에 있는 master.css를 출력해준다.
app.use()함수에 경로도 지정해줄 수 있다.
app.use('/static', express.static(__dirname + '/public')); // '/static'에 접속할 경우 /public으로위 코드처럼 수정해보자.
http://localhost:8080/static 에 접속하니 index.html을 출력해주는 것을 볼 수 있다.
여기서 CSS가 적용이 안된 것은 html내 css경로를 바꿔주면 해결된다.
master.css 위치를 찾으려면 static 폴더를 /static으로 접속시에 접근 가능하도록 바꿨으므로 경로를 /static/css/matser.css로 변경해준다.
정상적으로 css가 적용된 것을 볼 수 있다.
출처 : https://www.a-mean-blog.com/ko/blog/Node-JS-%EC%B2%AB%EA%B1%B8%EC%9D%8C/Hello-World/Static-%ED%8F%B4%EB%8D%94-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0
'Node.js > Hello World!' 카테고리의 다른 글
[Node.js] EJS로 동적 페이지 만들기 (0) 2022.08.08 [Node.js] Express로 서버 실행하기 (0) 2022.07.27
