node.js, npm, npx

2023. 4. 19. 22:08·NOTE

자바스크립트를 브라우저에서 사용할 수 있는 이유는 브라우저 내에 자바스크립트를 컴파일해서 실행할 수있는 엔진이 있기 때문이다.

브라우저에 있는 자바스크립트 엔진은 브라우저별로 다르다.

크롬 - V8엔진

사파리 - 웹킷

Node.js

Node.js는 V8엔진을 기반으로 동작하는 서버사이드 런타임

런타임? 특정언어로 만든 프로그램을 실행할 수 있는 환경

노드를 통해 다양한 자바스크립트 애플리케이션을 실행, 서버를 실행한다.

Node.js는 언어가 아니다. 프로그램이다.

javascript를 웹브라우저에서 독립시킨 것 Node.js를 설치하게 되면 터미널에서 Node.js를 입력해서 브라우저 없이 실행하게 할 수 있다.

CommonJS문법 체계를 기반으로 작동한다.

CommonJS는? 자바스크립트 문법을 브라우저 뿐만아니라 서버사이드에서도 사용할수있게 하려고 만든 그룹


package.json

모듈설치 시 자동으로 생성된다. 모듈 버전관리 파일

모듈 관리 뿐만아니라 scripts로 특정 명령어를 매크로로서 간단하게 실행할수도 있다.

{
  "scripts": {
    "start": "node index.js"
  },
}


node_modules

package.json에 있는 모듈을 설치(npm install)하면 로컬 node_modules폴더에 저장이 된다.

로컬에서 수정하지 않는것을 원칙으로 한다.

 

NPM

Node Package Manager

Node.js 패키지 관리를 위한 패키지 매니저

리액트를 사용할때도 모듈 같은건 npm에서 편하게 받아서 설치하고

개발서버를 띄우는것도 서버런타임 node.js를 이용해서 작업한다.

npm install

프로젝트에 필요한 의존성 패키지를 package.json파일 안에 지정할 수 있고

npm install를 하면 필요한 패키지를 로컬(node-modules)에 설치한다.

npm install 모듈이름 -g

-g옵션을 사용하면 프로젝트마다 모듈을 설치할 필요없이 글로벌한 공간에 설치할 수있다.

유의해야할 점

  • 한번 설치한 모듈을 계속 사용하기 때문에 업데이트 확인이 어렵다.
  • 같은 모듈을 사용해도 프로젝트마다 다른 버전이 필요할 수 있기 때문에 버전 문제가 발생할 수 있다.
  • 위와 같은 문제로 모듈 변경사항이 잦은 create-react-app 같은 보일러플레이트에서는 최신버전 설치를 매번 해줘야 하기 때문에 번거롭다.


npx

npm 5.2.0 버전 이후 나온 npm을 편리하게 사용하기 위한 도구

패키지의 최신버전을 불러와 설치하여 실행시키고 실행된 이후에는 해당패키지를 제거한다.

  • 실행시킬 패키지가 로컬에 저장되어 있는지 먼저 확인한다.
  • 존재한다면 실행시킨다.
  • 존재하지 않는다면 npx가 가장 최신 버전을 설치하고 실행시킨다

모듈이 많아 업데이트가 잦은 create-react-app의 경우 npx를 이용해 설치하는 것을 권장한다.

 

 

 

참고

https://ljh86029926.gitbook.io/coding-apple-react/undefined/npm-npx

https://hanamon.kr/nodejs-%EA%B0%9C%EB%85%90-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0/

https://seizemymoment.tistory.com/106

'NOTE' 카테고리의 다른 글

[용어] 인스턴스와 프로퍼티, 메소드  (0) 2023.04.20
Array.prototype.reduce()  (0) 2023.04.20
함수와 메소드 차이  (0) 2023.04.19
call, bind, apply의 this binding  (0) 2023.04.19
한글, 영문 폰트 다르게 적용하기  (0) 2023.04.17
'NOTE' 카테고리의 다른 글
  • [용어] 인스턴스와 프로퍼티, 메소드
  • Array.prototype.reduce()
  • 함수와 메소드 차이
  • call, bind, apply의 this binding
ssund
ssund
  • ssund
    ssund의 기술블로그
    ssund
  • 전체
    오늘
    어제
    • 분류 전체보기 (73)
      • TECH (22)
      • NOTE (40)
      • DAILY (7)
      • javascript (1)
      • 알고리즘 (0)
  • 블로그 메뉴

    • 홈
    • TECH
    • NOTE
    • DAILY
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    styled-components
    함수와 메서드차이
    JavaScript
    reduxtoolkit
    call signatures
    react state management
    타입스크립트
    웹브라우저구성
    slidesPerGroup
    React
    global-style
    redux
    theme-provider
    배열요소순서
    TypeScript
    Array.sort()
    d.ts
    reat-head
    git배포
    커머스프로젝트
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
ssund
node.js, npm, npx
상단으로

티스토리툴바