[ node.js ] html 파일 읽어들여 응답하기( with serve-static)

티스토리 뷰

↘ Programming/┗ Node.js

[ node.js ] html 파일 읽어들여 응답하기( with serve-static)

Kithub 2020. 3. 31. 23:46

프로젝트 구조

index.html

클라이언트가 로그인을 수행할 페이지 입니다.

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>kithub page</title>
</head>
<body>
    <h1>This is login page</h1>
    <form>
        아이디 : <input type="text" name="id"><br/>
        비밀번호 : <input type="password" name="pwd">
        <button>로그인</button>
    </form>
</body>
</html>

kithubServer.js

웹서버가 될 js 파일입니다.

구성 모듈 :

path : 파일 및 디렉토리 경로와 관련된 모듈

static : 특정 폴더의 파일들을 특정 패스로 접근할 수 있도록 해주는 미들웨어

var express = require('express')
, http = require('http')
, path = require('path')
, static = require('serve-static');

var app = express();

app.use('/',static(path.join(__dirname,'html')));

http.createServer(app).listen(3001,function(){
    console.log('express webserver start ! :: 3001');
})

클라이언트로부터 요청이 들어왔을 시 html 파일을 읽어들이기 위한 코드는 다음과 같습니다.

app.use('/html', static(path.join(__dirname,'html')));

첫번째 인자 :

'/html'은 html 폴더안에 있는 index.html을 요청하기 위한 요청루트를 지정해줍니다.

두번째 인자 :

__dirname은 루트 경로입니다.

실제로 서버파일의 위치는 C:\nodejs\kithub 에 이고, __dirname를 콘솔로 찍어보면 C:\nodejs\kithub 경로가 찍히는 것을 확인 할 수 있습니다.

'html'은 찾고자 하는 폴더의 이름 입니다.

위에서 언급된 프로젝트의 구조를 보면 kithub/html/index.html 의 구조라는걸 확인 할 수 있는데요.

index.html이 위치해 있는 상위 폴더명(html)을 기준으로 원하는 파일에 접근을 하게 됩니다.

즉,

첫번째 인자는 요청패스 , 두번째 인자는 static() 메서드로 특정 폴더를 지정해주었습니다.

그럼 이제

웹서버를 실행 시키고 'http://localhost:3001/html/'

다음 주소로 접근하면 index 페이지가 정상적으로 호출되는 것을 확인 할수 있습니다.

KITHUB 저장소😀

티스토리 뷰

[ node.js ] html 파일 읽어들여 응답하기( with serve-static)

티스토리툴바