[NodeJS] Node JS & NPM 소개 및 설치

2023. 1. 22. 18:10·◼ FrontEnd/Web & HTML, CSS
반응형

Node JS란?

  • Node JS란 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임(실행 환경)이다.
    • 실행 환경 : 특정 프로그램을 실행하기 위해서 필요한 환경
    • JavaScript 실행 환경 : JavaScript를 실행할 수 있도록 해주는 환경
      (JavaScript 엔진 + 파일 읽고 쓰는 기능 + 입출력 기능 등등)
  • Node JS란 (V8 엔진으로 빌드된) 단순한 문자의 나열인 JavaScript 코드를 해석하고 실행할 수 있도록 제공된 환경이다.

 


Node JS 탄생 배경

  • 웹 브라우저는 대표적인 JavaScript의 실행환경이다.
  • 애초에 JavaScript 언어는 브라우저에서 간단한 스크립트를 실행하기 위해 탄생한 언어이다.
  • 그렇기 때문에, JavaScript는 브라우저 이외의 실행 환경이 필요로 하지 않았다.

 

  • 하지만, 웹 개발 시장이 커지게 됨에 따라 JavaScript를 다룰 수 있는 웹 개발자가 늘어났고
  • 브라우저 외부 환경에서 구동되는 애플리케이션을 구현할 때 굳이 다른 언어를 사용하는 대신 JavaScript 언어만으로 개발을 하고자 하는 (개발자들의) 니즈가 생기게 되었다.
  • 즉, 브라우저 외부에서도 JS를 동작할 수 있는 실행 환경이 필요해졌다.

 

  • 그 결과, 브라우저가 아닌 환경에서 JS를 실행할 수 있게 해주는 실행환경인 Node.js가 탄생하였다.

 


NPM (Node Package Manager) 이란?

  • Node로 실행할 수 있는 패키지(JS 파일 묶음)들을 관리하는 도구이다.
  • NPM을 통해 필요항 패캐지를 다운로드 받고, 업데이트 하고, 삭제할 수 있다.

 

  • 비유를 들어 설명하면, 아래와 같다.
    • Node JS : 스마트폰 (엡을 실행할 수 있는 환경)
    • 패키지 : 애플리케이션
    • NPM : 앱 스토어

 


Node JS & NPM 설치하기

  • Node JS 홈페이지에 접속하여 Node JS를 설치한다.
    • 패캐지 호환성을을 고려하여 LTS 버전을 설치하는 것이 좋다.
    • Node JS를 설치하면 NPM은 자동으로 설치된다.

 

    • 제대로 설치 되었는지 확인하는 방법
      • 터미널을 실행하여 다음 두 명령어를 순서대로 입력한다. 
      • 오류가 발생하지 않고 버전이 나온다면 잘 설치된 것이다.
npm --version
node --version

 

 


유용한 NPM 명령어

  • npm install : package.json의 dependencies 항목을 분석해서 필요한 패캐지들을 모두 설치해주는 명령어
    • NPM으로 설치한 패키지의 소스파일(node_modules에 없음)은 직접 수정할 수도 없고 깃으로 관리하기엔 용량이 너무 크다. 따라서 .gitignore에 등록하여 git으로 관리하지 않도록 설정해준다.
    • 이러면, 만일 같이 작업하는 다른 사람이 git clone을 통해 코드를 가져올 경우 패키지 소스 파일을 가져올 수 없는 문제가 생긴다. 이때 이 명령어를 입력해주면 된다.

 

  • npx 명령어 : 해당 패키지를 실행하겠다는 의미이다.

 

반응형

'◼ FrontEnd > Web & HTML, CSS' 카테고리의 다른 글

[Web] PWA(프로그래시브 웹 앱)이란 무엇일까?  (2) 2023.05.12
[Web] CSR과 SSR이란 무엇일까?  (0) 2023.05.03
CSS 레이아웃 - Position과 Block 정리  (0) 2022.10.23
Semantic Tag (시멘틱 태그) 를 사용하여 웹 개발을 해야하는 이유  (0) 2022.10.23
개발자 도구란 무엇인가?  (0) 2022.10.23
'◼ FrontEnd/Web & HTML, CSS' 카테고리의 다른 글
  • [Web] PWA(프로그래시브 웹 앱)이란 무엇일까?
  • [Web] CSR과 SSR이란 무엇일까?
  • CSS 레이아웃 - Position과 Block 정리
  • Semantic Tag (시멘틱 태그) 를 사용하여 웹 개발을 해야하는 이유
SangYoonLee (SYL)
SangYoonLee (SYL)
Slow, But Steady Wins The Race 😎
    반응형
  • SangYoonLee (SYL)
    ◆ Slow, But Steady ◆
    SangYoonLee (SYL)
  • 전체
    오늘
    어제
    • ◻ 전체 글 수 : (131)
      • ✪ 취미, 경험 회고 및 일상 (26)
        • [취미] Room Escape (2)
        • [회고] IT 관련 경험 회고 (18)
        • [일상] 일상 생각 (4)
        • [일상] 독후감 (1)
      • ◼ FrontEnd (29)
        • Web & HTML, CSS (8)
        • JavaScript (4)
        • TypeScript (1)
        • ReactJS (16)
      • ◼ CS (3)
        • 자료구조 & 알고리즘 (1)
        • 컴퓨터 구조 (1)
        • 운영체제 (1)
      • ◼ PS Note (40)
        • 백준 (38)
        • 프로그래머스 (2)
      • ◼ IT Etc. (33)
        • (Until 2021) (21)
        • Python (6)
        • C | C# | C++ (1)
        • Git (1)
        • Unity (4)
        • Game Dev. (0)
  • 블로그 메뉴

    • 홈
    • 💻 GitHub
    • 🟢 Velog
    • 🧩 온라인 방탈출 출시 작품 모음
  • 링크

    • GitHub
  • 공지사항

  • 인기 글

  • 태그

    관심사의 분리
    코딩 일기
    유니티
    위코드
    소수 구하기
    개인 프로젝트
    주간 회고
    CodeSoom
    방탈출고사
    더라비린스
    Cpp
    후기
    wecode
    React
    프로젝트
    C++
    Python
    리엑트
    unity
    1929
    JavaScript
    코드숨
    Component
    pygame
    백준
    회고
    프로그래머스
    알고리즘
    파이썬
    미궁 게임
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
SangYoonLee (SYL)
[NodeJS] Node JS & NPM 소개 및 설치
상단으로

티스토리툴바