Library:

[Three.js] To infinity and beyond! 3D 웹 도전기 #0

칠일오.

intro 아이콘 라이브러리 프로젝트를 마친 후, 잡서치 겸사겸사 토익 공부를 하며 시간을 보냈다. 나름 이제는 자신 있다고 생각을 했었는데 여전히 회사 입장에서는 눈에 띄는 지원자가 아니라는 자각이 들었다. 그래도 내가 좋아하는 개발 하면서 성장하다 보면 또 기회가 올 거라는 조금은 막연한 생각을 하며, 그동안 하고 싶었지만 현실의 시선에 갇혀 미루기만 했던 것을 하기로 결심하게 되었다. 제목에서 이미 아시다시피 Three.js이다. 웹을 시작하기 전부터 인터랙티브 웹을 만들어보는 게 꿈이었는데, 어쩌면 지금이 적기라는 생각이 들었다. 오랜만에 글을 쓰다 보니 구구절절했는데 이제 시작하겠다!

WebGL이란?

웹 상에서 그래픽을 표현하기 위한 웹 기반의 그래픽 라이브러리이다. 특징은 자바스크립트 언어를 통해 사용할 수 있다.

장점 | GPU를 통해서 그림을 그리기 때문에 성능이 좋다.

단점 | A-Z까지 개발해야 하기 때문에 시간이 오래 걸리고 까다롭다.

 

이런 단점을 보완하고자 쉽고 간편하게 사용할 수 있는 Three.js 라이브러리가 탄생하게 되었다.

 

Three.js란?

Three.js는 웹 브라우저에서 3차원 컴퓨터 그래픽스 애니메이션 응용을 만들고 표현하기 위해 사용되는 자바스크립트 라이브러리이자 API이다. 오픈 소스 프로젝트로 깃허브에서 공개되어 있다.
- 위키백과

 

공식 문서는 요기 ⬇

https://threejs.org/

 

Three.js – JavaScript 3D Library

 

threejs.org

 

공식 문서에 들어가면 실제 응용한 웹 사이트들을 볼 수 있다.

그렇다면 Three.js는 도대체 어떻게 사용하는 걸까? 여러 방법 중 웹팩으로 사용하는 방법이 가장 인상 깊어서 웹팩에 대해서 정리해보고자 한다.

 

Webpack이란?

 

웹팩이란 오픈 소스 자바스크립트 모듈 번들러이다. 우리가 반창고 하면 대일밴드로 통칭시켜 버리는 비슷한 존재인 것이다.(비유 별로인가?)

 

모듈(module)이란

애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다. 모듈은 자신만의 파일 스코프를 갖기 때문에 모듈의 모든 자산은 캡슐화되어 다른 모듈에서 접근할 수 없다. 예로 들어, A, B파일 각각에 result라는 변수명이 있더라도 서로 개별적으로 존재하기 때문에 값에 영향을 주지 않는다. 즉, 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재한다.

 

그러나 재사용이 불가능하다면 존재의 의미가 없다. 때문에 공개가 필요한 자산에 한정하여 선택적으로 공개할 수 있도록 export와 import를 사용한다. 모듈을 사용하면 코드의 단위를 명확히 분리하여 애플리케이션을 구성할 수 있고, 재사용성이 좋아서 개발 효율성과 유지보수성을 높일 수 있다.

 

자바스크립트는 모듈을 지원하지 않았지만, ES6부터 모듈 기능이 추가되어 script 태그에 type='module' 어트리뷰트를 추가하면 로드된 자바스크립트 파일은 모듈로서 동작시킬 수 있다.

[자바스크립트 딥다이브 발췌]

 

번들링(bundling)이란

웹 애플리케이션을 구성하는 HTML, CSS, JavaScript, Images 등과 같은 리소스를 각각의 모듈로 보고, 이들을 마치 하나의 상자에 포장하는 것처럼 병합하고 압축하는 작업을 말한다. 그리고 이러한 번들링 작업을 수행하는 툴을 번들러라고 하며, 현재까지도 가장 인기 있는 것이 웹팩이다. (빌드 === 번들링)

 

Webpack 방식으로 Three.js 사용하기

그렇다면 웹팩으로 어떻게 Three.js를 사용한다는 말일까?

웹팩을 이용한다는 말은 곧 npm으로 Three.js를 설치해서 프로젝트 자체를 번들링 해서 배포까지 하겠다는 의미이다. 이때 npm으로 설치할 때 불필요한 소스들을 dev용으로 설치하도록 노력하자! npm i -D 명령어를 통해 쉽게 분리할 수 있다. -D가 있고 없고 차이는 package.json 파일에서 확인할 수 있다. dev용으로 설치한 소스들은 devDependecies에 포함된다. 이는 추후 배포할 때 불필요한 소스들이 포함되지 않고, 빌드 시간도 줄인다는 특징이 있다. 배포된 라이브러리를 사용하는 사람에게도 사용자의 로컬에 실제 운영에 필요한 의존성만 설치되도록 해주기 때문에 중요하게 고려해야 할 사안이라 생각한다.

 

Webpack을 사용할 때, 가장 중요한 컨셉은 webpack.config.js를 반드시 정의해 주어야 빌드가 올바르게 된다는 것이다. 정의된 코드들을 모두 이해했다면 거짓말이기 때문에... 이해한 부분 중에서 CopyWebpackPlugin에 대해 간략히 작성해보고자 한다.

 

CopyWebpackPlugin

사용 방법은 공식 문서에서 확인할 수 있다.

👉 [webpack 공식문서] CopyWebpackPlugin

 

브라우저가 빌드된 파일을 읽어서 렌더링하기 때문에 외부 리소스 또는 정적 파일을 사용할 경우에는 반드시 webpack.config 파일에서 해당 플러그인에 경로를 설정해주어야 한다! 만약 설정해주지 않으면 정적 파일이 빌드 결과에서 누락이 되어 파일을 찾을 수 없게 되고 이는 오류 발생의 원인이 된다. 

 

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: "source", to: "dest" },
        { from: "other", to: "public" },
      ],
    }),
  ],
};

동작 방식은 from에 복사할 파일의 경로에 접근하여 파일을 복사하고, to에 정의한 경로에 복사한 파일을 위치시킨다.

 

📜 출처

 

티스토리툴바