Webpack, TypeScript를 이용한 웹페이지 개발 설정

기본 설정

# Node.js 설치

npm 명령 실행을 위함

# npm init -y

npm init는 package.json을 만들기 위한 명령이고 -y를 붙임으로써 별도의 입력 없이 기본 값으로 진행 시킴. package.json은 작성하고자 하는 프로젝트에 대한 설정 파일로 볼 수 있으며, 프로젝트 이름과 버전 등과 같은 설명과 프로젝트가 사용하는 라이브러리에 대한 정보 그리고 프로젝트 실행 등을 위한 명령에 대한 정보가 담겨있음. package.json 파일은 npm을 위한 파일임(VS.Code를 위한 것이 아님)

# npm install webpack webpack-cli –save-dev

# npm install typescript ts-loader –save-dev

# tsconfig.json 파일 생성 및 내용 작성

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "es6",
        "target": "es5",
        "allowJs": true
    }
}

# webpack.config.js 파일 생성 및 내용 작성

const path = require("path");

module.exports = {
    mode: "development",
    entry: "./src/index.ts",
    devtool: "inline-source-map",
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: "ts-loader",
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
    },
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist"),
    },
}

# src, dist 폴더 및 index.html(dist 폴더), index.ts(src 폴더) 파일 생성

# index.ts 코드 입력

# package.json 파일의 “scripts” 파트에 “bundle”: “webpack” 입력

{
  ..
  "scripts": {
    ..
    "bundle": "webpack",
  },
  ..
}

# npm run bundle 실행

Typescript로 작성된 파일을 Javascript 파일로 트랜스파일링 시킴

자동 실행을 위한 설정

# package.json 파일의 “scripts” 파트에 “watch”: “webpack –watch” 및 “start”: “npm run bundle && npm run watch” 추가

{
  ..
  "scripts": {
    ..
    "bundle": "webpack",
    "watch": "webpack --watch",
    "start": "npm run bundle && npm run watch"
  },
  ..
}

# VS.Code에서 Live Server 확장 기능 설치

# npm start 실행

이제부터 Typescript로 작성된 파일을 수정하면 Javascript 파일로 지동으로 트랜스파일링 시킴

# index.html 열고 GO LIVE 활성화

브레이크 디버깅

# VS.Code의 “실행 및 디버그” 클릭을 통해 launch.json을 생성 (크롬 선택)

# launch.json 파일에서 “url”의 값을 “http://127.0.0.1:5500/dist”으로 수정

{
    ..
    "configurations": [
        {
            ..
            "url": "http://127.0.0.1:5500/dist",
            ..
        }
    ]
}

babylonjs 라이브러리 설치

# npm install @babylonjs/core

# tsconfig.json에 “moduleResolution”: “node” 추가

{
    "compilerOptions": {
       ..
       "moduleResolution": "node"
    }
}

위의 설정을 입력해야 babylonjs 모듈을 import할 때(예: import { Scene } from “@babylonjs/core”) 문제가 없음

최종 설정 파일 내용

# tsfonfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "es6",
        "target": "es5",
        "allowJs": true,

        "moduleResolution": "node"
    }
}

# webpack.config.js

const path = require("path");

module.exports = {
    mode: "development",
    entry: "./src/index.ts",
    devtool: "inline-source-map",
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: "ts-loader",
                exclude: /node_modules/
            },
        ],
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
    },
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist"),
    },
}

# package.json

{
  "name": "tstbabylonjs_ts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "bundle": "webpack",
    "watch": "webpack --watch",
    "start": "npm run bundle && npm run watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^9.4.1",
    "typescript": "^4.8.4",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  },
  "dependencies": {
    "@babylonjs/core": "^5.26.1"
  }
}

# launch.json

{
    // IntelliSense를 사용하여 가능한 특성에 대해 알아보세요.
    // 기존 특성에 대한 설명을 보려면 가리킵니다.
    // 자세한 내용을 보려면 https://go.microsoft.com/fwlink/?linkid=830387을(를) 방문하세요.
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://127.0.0.1:5500/dist",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

물리(Physics) 계수

반발계수(coefficient of restitution, COR)

반발 계수는 물체의 충돌 전후 속도의 비율을 나타내는 분수값이다. 반발 계수가 1인 물체는 탄성 충돌을 하며, 반발 계수가 1보다 작은 물체는 비탄성 충돌을 한다. 반발 계수가 0이면 완전 비탄성 충돌을 하며, 충돌한 물체와 붙어서 튀지 않는다. (출처: 위키백과)

마찰력(friction)

마찰력은 두 물체의 접촉면 사이에서 물체의 운동을 방해하는 힘이다. 마찰력의 계수는 물질의 고유 성질이 아닌, 어떤 물체의 어떤 표면 상태에서 어떤 물질과 접촉하는가 등에 관계있으며 실험을 통해 결정되는 현상론적인 양이다. 교과서는 일반적으로 마찰력은 접촉면의 넓이에는 무관하다고 서술하나 이것은 접촉면이 이상적으로 매끄러운 경우에만 성립한다. 실제로는 접촉면의 매끄러운 정도 등에 따라 영향을 받는다. (출처: 위키백과)

질량(mass)

질량은 물리학에서 물질이 가지고 있는 고유한 양을 일컫는 말이다. 질량의 SI 단위는 킬로그램(kg)이다. (출처: 위키백과)