Three 설치하는 방법(Cdn, npm, boilerplate, webpack) – Three.js 강좌

안녕하세요. three.js를 사용하기 위해서 필요한 파일들을 설치해서 사전 준비를 하는 시간입니다. three.js를 다운로드해서 사용하는 방법은 크게 3가지가 있어요. 직접 파일을 설치하는 방법, NPM으로 설치하는 방법, 마지막은 보일러 플레이트를 활용하는 방법입니다. 이 세 가지 방법을 다 알려드릴 텐데, 여러분이 편하신 방법으로 사용하시면 됩니다. 근데 저는 맨 마지막을 기준으로 설치한 환경으로 이번 three.js 강좌를 끝까지 진행할 예정이니까 참고 부탁드립니다. 추가로 알아두면 좋은 개념은 Webpack, 터미널 사용법, Git clone 입니다. (설치가 조금 복잡할 수 있지만, 이번 영상까지만 참으면 됩니다..!)

three.js 설치 – https://threejs.org/docs/#manual/ko/introduction/Installation
node.js 설치 – https://nodejs.org/ko/download/
boilerplate 설치 – https://github.com/aakatev/three-js-webpack

*디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.

핵심 요약

NPM이란?

npm이란, node package manager의 약자로 말그대로 node.js 개발자분들이 패키치 설치 및 관리를 쉽게 도와주는 관리 도구입니다. 그래서 node.js를 먼저 설치를 해줘야합니다.

Webpack이란?

사실상 웹사이트가 만들어질때는 지금 배우려는 three.js외에도 html,css, js, sass, gsap 등 다양한 언어나 라이브러리를 혼합해서 사용하기 때문에, 웹 최적화를 위해 webpack을 사용하는 것을 추천드립니다.
웹팩이라는건 자바스크립트 정적 모듈 번들러라고 하는데요, 다양한 파일을 Static한 에셋으로 컴파일할 때 사용하는 도구입니다.
작업 효율을 위해 사용한 다양한 자바스크립트 오픈소스나 Sass 등 을 실제 웹사이트에 배포할때는 최적화된 파일로 변환해서 만들어야하는데 그때 도움이 되는 것이 바로 웹팩입니다.

보일러플레이트란?

기초 골격을 통으로 찍어내는 플레이트로 매번 반복적인 코드를 짤 필요없이 최소한의 기본 구조를 제공한 코드를 말합니다. 즉, 시작하기 딱 좋게 코드를 만들어 준 소스를 boilerplate라고 합니다.
디자이너 입장에서 보면, 무료나 스톡 에셋을 다운받고, 포토샵 + 플러그인을 설치해주는 단계라고 생각해주면 편합니다. 이 과정에서 필요한 지식은 필요할때마다 공부하시면 됩니다!
이번 THREE.js 강좌에서는 three.js를 webpack 환경에 맞게 세팅되어 있는 웹팩 전용 보일러 플레이트를 설치 해주고 활용할 예정입니다.