I am developing person.

프론트엔드 날개달기 : Vuejs, React 배우기 전에 꼭 알아야하는 지식

섹션 2 (2)

  • NPM 기초 강좌
  • Webpack 기초 강좌

NPM 기초 강좌

NPM (Node Package Manager)

개발자들은 코드 최적화를 위해 자주 사용하는 코드를 모듈화 한 후 다른 프로젝트에서 사용할 수 있도록 모듈 저장소를 만들고, 필요 시 다운받아 사용하는데, 이 때 모듈을 쉽게 다운받을 수 있도록 하는 도구

라이브러리 검색 사이트 : NPG

아래는 dayjs를 검색한 사진으로, 설치 방법을 비롯하여 라이브러리의 다양한 정보를 볼 수 있다

dayjs install

npm install dayjs


사용 예시

const dayjs = require('dayjs')
console.log(dayjs().format('YYYY-MM-DD')) // 2022-09-04


다음 사진과 같이 node_modules 디렉토리(라이브러리 다운로드 시 자동 생성) 내에 다운받은 라이브러리가 존재하며, require을 통해 접근할 경우 자동으로 node_modules 디렉토리를 참조한다

package.json

프로젝트에 대한 정보를 가지는 파일로, 프로젝트에 의존된 라이브러리를 관리한다. 이는 직접 작성할 수도, npm init을 통해 자동 생성할 수도 있다.

npm 명령어

  • npm init -y : json 자동 생성
  • npm install dayjs : dayjs 모듈 설치
    npm install dayjs@1.10.7 : 1.10.7 버전의 모듈 설치 (버전 지정)
{
  "name": "learn-npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dayjs": "^1.11.5"
  }
}
  • npm install 패키지명 패키지명 : 공백으로 구분하여 여러 개 동시 설치
  • npm uninstall 패키지명 : 로컬 패키지 삭제
  • npm update 패키지명 : 설치된 패키지 업데이트
  • npm root : 로컬 패키지 설치 디렉토리 확인
  • npm ls : 로컬 설치 된 패키지 확인
  • npm run 스크립트명 : 스크립트 실행

* 전역 패키지의 경우 뒤에 -g 를 붙이면 된다

전역 설치

터미널 내에서 해당 라이브러리의 명령어를 인식하게끔 할 때 전역 설치를 진행하며, unix 기반 OS 에서는 sudo, 윈도우에서는 관리자 권한으로 실행을 통해 명령어를 입력할 수 있다

Webpack 기초 강좌

개발 편의성을 위해 모듈의 개수를 늘리면, 브라우저가 서버에 요청해야하는 개수가 증가하여, 네트워크 비용이 증가하게 된다. (로딩 시간 증가)

모듈 분리를 통해 개발의 편의성을 높이면서도, 네트워크 비용 증가를 막으려면 ?

번들링 : 배포할 때 모듈을 하나의 파일로 묶어서 배포

모듈 번들러 : 번들링을 할 수 있도록 도와주는 것 / ex) Webpack

index.html에서 a.js, b.js, c.js 를 import 한 경우, 개발자도구의 Network 에서 다음과 같이 3개의 js 파일을 요청하는 것을 볼 수 있다

해당 디렉토리에서 webpack을 설치한다. 웹팩은 운영환경에서 사용될 일이 없기에, save dev 옵션을 사용하여 설치한다

html에서 a.js, b.js, c.js 를 import 하던 코드를 index.js 파일로 옮기고 ,다음과 같은 명령을 수행하면 main.js 를 가진 dist 디렉토리가 생성된다. (번들링의 기준점 index.js, 번들링된 파일의 아웃풋 기점 dist 디렉토리)

main.js 내에는 띄어쓰기 없이, 압축되어 코드가 저장되어 있는 것을 알 수 있다. 이 때, –mode development 로 저장을 하면 압축 없이 저장 가능하다. index.html 에서 main.js 를 불러오도록 코드를 수정한 후 새로고침하면, 다음과 같이 하나의 파일만 요청하는 것을 볼 수 있다.

최종 소감

NPM 의 경우 node를 아직 다뤄본 적 없기에 크게 도움을 받았다고 말하기는 힘들지만, 웹팩을 처음 알게 된 나로서는 웹팩 관련 내용이 굉장히 도움이 되었다. 부트스트랩에서 코드를 가져오거나, 혹은 타 페이지의 js 를 참고해보려 dev tools 의 source 창을 열었을 때 내가 알던 구조와 다른, 굉장히 압축된 코드가 펼쳐져 당황했던 적이 한두번이 아닌데, 그것들이 모두 웹팩을 사용한 코드라는 것을 이번 학습을 통해 알게 되었다. JS 를 체계적으로 공부한 적은 없기에 해당 강의를 통해 학습한 내용들을 바탕으로 지금까지 개발해온 JS 코드들을 최적화하고, 웹팩을 통해 렌더링 시간을 줄일 수 있을 것 같아 기대가 된다.

섹션 0 ~ 1의 앞선 강의에서도 배우게 된 내용이 많았다. 어쩌면 가장 기본적인 개념일 DOM, 버블링과 캡처링 과 같은 개념조차 제대로 숙지하지 않은 채, JS라는 언어를 단순히 addEventListener 을 위한 툴로 사용하고 있었던 것에 대해 깊이 반성하게 되었다. 기본적인 문법만 익힌 후 추가적인 공부 없이 ‘이렇게 하면 되지 않을까’ 넘겨짚으며 js 코드를 작성해왔던 것에 대해 되돌아보는 계기가 되었으며, 앞으로 node.js 를 공부하며 서버를 구축하고, js의 react 라이브러리를 다뤄보고 싶은 욕심이 있는만큼 이번 강의에서 짧게 다룬 내용들을 보다 깊이 찾아보는 시간을 가져야겠다고 느꼈다.

태그:

카테고리:

업데이트:

참고