[threejs] webpack 이용한 설치 / boiler plate

디자인베이스 threejs 강의 영상 필기

결제 (구독료 월 18000원) 한 김에 뽕뽑아야지

강의바로가기 https://www.youtube.com/watch?v=JFX_IM2FJyQ&list=PLkbzizJk4Ae9hHI_YUD3fRv8xLfS3jGEW&index=2

 

webpack 

- 프론트앤드 모듈 번들러 : 웹 애플리케이션을 구성하는 정적 자원들을 모아 이 모듈들을 병합된 하나의 결과물(번들?)로 만드는 도구 

- 웹최적화를 위해서는 웹팩을 사용하는 것이 좋다

 

webapck  + threejs

- 웹팩 전용 bolier plate (기초 골격 되어있는 오픈소스)

- 강의에서 사용된 보일러플레이트 깃헙 https://github.com/aakatev/three-js-webpack

1. node.js 다운 받았는지 확인  https://nodejs.org/en/download/prebuilt-installer

뭐때문인지는 모르겠는데 개발환경세팅이 잘 안돼서 댓글이랑 확인해보니 16버전을 깔아야 된다고 함

 

2. clone 하기

vscode 열고, 상단 메뉴에서 new terminal 

현재 위치 확인 pwd

이전 폴더로 이동 cd ../ 

하위폴더로 이동 cd 폴더명 

위치 지정해서 git clone https://github.com/aakatev/three-js-webpack.git .   

다 받아지면 npm i 입력

indext.html 열어둔 상태에서 터미널 열어서 npm run start

 

npm start 랑 npt run start?

 

이 문구를 얼마나 기다렸던가ㅠ ㅠ

 

주소창에 http://localhost:9000/ 입력해서 예제를 열어보았다

이 화면 보려구 2시간을 헤맸네 ........ 요 화면은 boiler plate 기본화면임 

 

다른예제 가져오기

webpack.config.js 에서 entry: __ 주소 맞는지 체크하고

터미널 열어서 npm start 입력하면 시작 / ctrl + c하면 종료

시작시 해당 주소에 있는 js가져가서 three.js 모듈? 번들? 로 만들어서 public/bundle.js로 만들어주는듯?

srcript 주소가 요런걸 봐서는..

 

암튼 node.js를 안해봤다면 조금 어려울수도..

vscode를 사용하면서도 터미널은 잘 안썼어서 연결하는데 자꾸 오류가 나서 좀 애를 먹었다ㅠ

대부분이 내 실수긴 했지만.....ㅋㅎ

 

 

Uncaught TypeError: Cannot read properties of null (reading 'width')
TypeError: Cannot read properties of null (reading 'width') at new WebGLRenderer (three.module.js:23910:20) at eval (ex-03.js:23:20)

 

대충 요런 오류들이었는데 지피티도 대답을 제대로 안해줌 ,..

오타없는지 잘 체크하고 주소 등 한번더 체크해보니 통과!

 

npm ERR! path C:\Users\Moondinsk\Desktop\threejs/package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\Moondinsk/Desktop\threejs\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

 

또또또또 연결문제...

결국은 또 주소문제엿다ㅣ.. 💢💢💢💢