npm 개념 관련 질문

Three.js로 시작하는 3D 인터랙티브 웹

웹팩(Webpack) 살펴보기

작성

467

npm node.js의 개념이 명확히 와닿지 않아서 여쭤봅니다.

전에 봤던 어떤 기초 강의에서

//Basic Tools (VScode, Atom, Intelli J등)

//Front End (HTML CSS JS)

//Tools (Package Manager- npm,yarn, Module Bundler - Webpack, Rollup, Parcel)

//Testing

//Publish (Netlify 등)

위 순서대로 웹빌딩이 진행된다는 내용을 본 적이 있는데 전에 혼자 웹빌딩을 했을 때는 Front End -> Publish(깃허브) 순으로 진행하고 끝냈어서 중간 단계에 있는 Tools 내용부터는 이해가 잘 되지 않습니다ㅠㅠ

npm이랑 webpack이 이번 수업에도 등장했는데 왜 설치를 해야하는지, 설치한 npm은 publish할 때 어떻게 해야하는지 등의 부분이 이해가 되지 않아서 여쭤봅니다

인터랙티브-웹 three.js npm

답변 2

박상준

도움이 될지는 모르겠지만 ... 제지식 선에서 알려드릴게요

//Basic Tools
는 말그대로 코드를 작성할 때 쓰는 프로그램들 입니다.
코드 에디터라고도 하고 통합 개발환경인IDE라고도 합니다.
그냥 쉽게 말해서 코드 작성 프로그램이라고 보면 됩니다. 메모장으로 해도 됩니다만 그럼 불편하니까 이런걸 쓰는 거겠죠

// Front End
는 말그대로 화면 앞단을 구성하는 요소를 개발하는 것을 의미합니다.
쉽게 말해서 크롬같은 웹브라우저로 특정 사이트로 이동했을때 사람이 볼 수 있는 화면 로직을 개발하는 것을 의미합니다.
HTML과 CSS 는 화면 요소 중에서 디자인 요소를 담당하고 JS는 이런 요소들을 역동적으로 제어할 수 있게 해줍니다.
예를 들면 클릭 이벤트나 마우스 커서에 따라 디자인 요소를 바꾼다던지..

// Tools
에서 node는 과거에는 자바스크립트는 브라우저 환경에서만 실행이 가능했으나
라이언 달이라는 사람이 자바스크립트를 이용해서 브라우저가 아닌 환경에서도 js를 실행할 수 있게 만든 런타임 환경이라고 보면 됩니다.
npm은 node package manager의 약자로 자바스크립트로 만든 패키지가 올라가 있는 웹 저장소인 npmjs에서 다른 개발자들이 만든 패키지를 다운받을 수 있게 해주는 프로그램으로 보시면 됩니다.
node를 설치하면 자동으로 같이 설치가 됩니다.

수업시간에 웹팩을 설치하고 추가로 필요한 기능을 npm을 이용해서 다운받은 후 그것들을 조립하는 거겠죠?
그런데 이게 속도 문제도 있어서 페이스북에서 새로 개량해서 만든게 yarn 입니다.
결국 둘다 같은거에요

// Webpack

은 구식 자바스크립트 문법부터 최신 브라우저 문법 , 타입스크립트 , 이미지 파일 등등 모든 파일을 특정 조건으로 번들링 해서
하나로 합쳐주는 역할을 합니다. 예를 들면 브라우저는 리액트 문법이 들어가 있는 JSX 파일을 직접 읽지 못하기에
이를 변환해서 다른 자바스크립트 파일과 합쳐서 하나의 자바스크립트 파일로 만들어 주기도 합니다.

그럼 html 파일에 번들링된 이 파일 하나만 넣어주면 되겠죠...

// Testing

은 테스트 코드를 작성해서 버그 탐지라던지 코드 품질을 개선하는 작업이라고 보시면 될 것 같습니다.

이부분은 저도 배우고 있어서 잘 모르겠네요~

// publish

는 개발이 다 끝난 프로젝트를 다른 사람들도 이용할 수 있게 웹상에 배포하는 거겠죠 근데 netlify로는 배포를 안해봐서 모르겠네요

1분코딩

지식공유자

박상준님께서 답변을 너무 잘해주셨네요! 감사합니다.
추가로 쪼금만 말씀드리면-
우리 예제들을 node.js 서버에서 구동하고 있기도 하고, three.js를 비롯한 많은 자바스크립트 프로젝트들이 node.js에서 추가 기능(패키지)를 설치/관리할 수 있는 기능인 npm(node package manager)을 이용해서 설치가 편리하도록 제공되고 있기 때문에 사용하는 거랍니다.
webpack을 이용하는 이유는- three.js에서 공식적으로 webpack이나 vite같은 번들러의 이용을 권장하고 있고, 공식 문서도 번들러의 사용을 전제로 작성되어 있기 때문에 우리도 수업에서 사용하는 것인데요, 반드시 사용해야 하는 것은 아닙니다.

인프런 커뮤니티 질문&답변

npm 개념 관련 질문