web pack 실행/ npm start 질문드려요!ㅜㅜ

Question

안녕하세요 :) 웹팩 초기 시작 할 때 막히는 부분이 있어서 질문 2개 드립니다! 1. 처음에 웹팩 파일을 가져올 때, 빈 test폴더 새로 만들어서, new terminal 누르고, 밑에 창이 뜬 후 git clone https://github.com/jmyoow/webpack-js-html.git 를 입력하려 하는데, new terminal 을 누르면 처음 나오는 화면이 강의 영상과는 달라서 git cloine을 입력해도 아무것도 실행되지 않습니다. 엄청 간단한 것일수도 있는데 코딩을 많이 안해봐서 어떻게 해결해야할지 잘 모르겠어서 질문 드립니다!..!! 2. 위에서 강의처럼 되지 않아서, 빈 test파일 말고, 그냥 깃허브에서 다운받은 webpack파일을 그대로 비주얼스튜디오코드에서 불러와서 썼는데, 패키지 설치까지는 되는 것 같아 보였으나 패키지 설치 후 npm start를 입력하니 또 에러가 떠서요..ㅜㅜ 어떻게 빨리 해결할 수 있을까요? + 아래 질문 게시글 보고, 강의 소스 자료의 start_fin 안의 webpack 파일 안에서 다시 시도해봤는데, (node.js도 오른쪽의 17.7.2 로 새로 다운 받았습니다/ node -v로 확인했습니다!) 이번에는 npm start가 되는 듯 하다가 밑에 또 오류가 뜨는데 왜 그런 것일까요?,,, 그리고 혹시 해서 local host8080 도 들어가봤는데 이런 창이 뜹니다..!..... 마지막으로 n lts도 써봤는데 저렇게 뜹니다! 최대한 많이 보여드리는 게 도움될 것 같아서,, 이것저것 보냅니다ㅏ

1분코딩 · Answer

아이고; 고생 많으셨네요^^; 환경세팅 관련해서는 각자 컴퓨터 상황이 다르다보니, 직접 컨트롤 하지 않는 이상 명확한 문제를 발견하기가 어렵네요.. 일단, 중간에 Can't resolve 'three' in .... 메시지가 나오는 상황에서, npm i three 까지 해서 three.js 패키지도 설치 해주셨을까요? VSCode에 드래그앤드랍 한 프로젝트 폴더에서 터미널을 열고, npm i -D @babel/cli @babel/core @babel/preset-env babel-loader clean-webpack-plugin copy-webpack-plugin core-js cross-env html-webpack-plugin source-map-loader terser-webpack-plugin webpack webpack-cli webpack-dev-server 을 붙여넣고 엔터, 그리고 설치가 끝나면 npm i three 을 붙여넣고 엔터, 이렇게 두 번 해주셔야 합니다. 혹시 빠진 과정이 있는지 한번 확인해 보시겠어요?