VS 2022 에서 js 개발 - (2)

(1) 에서 console empty project 로 진행하여, node.js 실행 결과만 확인할 수 있었다.

 

이번에는 web project 를 생성하여 진행한다.

프로젝트 구성은 위와 같다. npm 설치가 가능하고 "server.js" 파일이 기본으로 생성된다.

server.js 이름으로 알 수 있듯이 server 를 구성하고 web browser 에서 js 수행을 기반으로 동작한다.

server.js 구성은 아래와 같다.

'use strict';
var http = require('http');
var port = process.env.PORT || 1337;

var fs = require('fs');

http.createServer(function (request, response) {

http 서버를 생성하고 response 를 통해 http 프로토콜을 보내는 구조다.

 

이 구조에서는 간단한 REST API 구성이나 html 형식의 string data 를 보내서 web page 를 보여줄 수 있지만
의도한 바 three.js 를 수행하기 위해서는 server side rendering 이 필요하다.

 

우선, Page 폴더를 생성하여 "index.html" 파일을 추가하고 Createserver callback 내부에 간단한 router 를 구성해준다.

http.createServer(function (request, response) {
    var fname;
    var contentType;

    if (request.method === "GET") {
        switch (request.url) {
            case "":
            case "/":
                fname = __dirname + "/page/index.html";
                contentType = "text/html";
                break;
            case "/main.js":
                fname = __dirname + "/page/main.js";
                contentType = "text/javascript";
                break;
            default:
                break;
        }

        if (fname) {
            fs.readFile(fname, function (err, data) {
                if (err) {
                    response.writeHead(404);
                    response.end();
                } else {
                    response.writeHead(200, { 'Content-Type': contentType })
                    response.write(data);
                    response.end();
                }
            });
        } else {
            response.writeHead(404);
            response.end();
        }
    }
}).listen(port);

요즘은 npm 모듈이 잘 나와있고 express 를 사용하면 routing 도 자동으로 해주기 때문에 이런 코드를 작성할 일은 없다.

"main.js" 는 "index.html" 에서 script 로 작성된 ( local file ) 파일이며 서버에서 js 를 보내줘야 하기 때문에 요청이 온다면

"text/javascript" 형식으로 파일을 보내주면 된다.

 

그리고 three.js 는 import map 를 제공하고 있어 html 내 추가하면 web 버전 script 를 바로 사용할 수 있다.

마지막으로 "main.js" 파일에는 example 을 작성하면 아래 결과를 확인할 수 있다.