[React] Node & NPM 이해하기

워네·2022년 5월 18일
0

❄️ React

목록 보기
2/7
post-thumbnail

📌 Node & NPM 이해하기

처음에 javascript는 브라우저에서만 실행되는 언어였다. javascript를 읽고 실행시키기 위해 브러우저들은 서로 다른 엔진(코드 인터프리터)을 가지고 있다.

점점 javascript가 널리 사용되면서 '웹 개발 말고 다른 곳에서도 사용할 수 있지 않을까'라는 이야기가 나왔다. 그래서 브라우저에서 뿐만 아니라 자체적으로 프로그램을 만들어서 실행할 수 있도록 나온 기술이 node.js 이다.

node.js는 대표적으로 서버 프로그램을 개발할 때 많이 사용된다.

💡 물론 java, python 같은 프로그래밍 언어로 서버 개발을 할 수 있다. 

node 프로젝트를 하기 위해 꼭 필요한 친구가 바로 npm 이다. npm은 node package manager의 약자로 node 프로젝트의 패키지(외부 라이브러리)를 관리해주는 저장소 역할을 한다.

  • 브라우저 : 자바스크립트를 불러올 때 <script> 를 이용해서 외부 자바스크립트 파일을 그때 그때 다운받는다.
  • node : 외부 자바스크립트 파일을 npm이 맡아서 관리하게 된다. 보통 npm에 외부 라이브러리를 한 번에 다 저장해놓은 후 관리해준다.

React의 경우 node js와 npm을 이용해서 개발을 하게 될 거다. 그래서 기존의 웹 환경과 다르게 프로그램을 설치하고 실행시키기 위해 명령어를 사용하게 된다.

💡 물론 React도 node와 npm을 기반으로  결과적으로 브라우저가 이해할 수 있는 형태로 변형될 거다. 
기본적으로 node.js는 화면을 그려주는 역할이 없기 때문에 웹 빌드 도구(Babel, Webpack)를 이용해서 브라우저가 이해할 수 있는 언어로 바꿔주는 작업이 필수적으로 들어간다.

📌 React 설치

  1. React를 시작하기 전에 node.js를 설치한다. node.js를 설치하면 npm은 같이 설치된다.
    LTS 버전(가장 안전한 버전)을 설치해야한다.
    설치 사이트 : https://nodejs.org/en/download/

  2. 잘 설치되어 있는지 확인해볼 때는 터미널 환경에서 아래 커맨드를 쳐보면 된다.

  • 윈도우 → window키 + R을 누른 후 cmd 를 입력한다.
  • 맥 → cmd + space 를 누른 후 Terminal 을 입력한다.
npm -v 
node -v

  1. 직접 node 환경에서 코드를 작성할 수도 있고 js 파일을 실행할 수도 있다.
node //코드를 작성하는 환경이 나옴
node test.js //test.js를 실행시킴

💡 주의

VScode에도 자체 터미널 창이 있다.

[VSCode에서 터미널 창 열기]

  • 윈도우 : ctrl + j
  • 맥 : cmd + j
profile
front-end developer 🐣

0개의 댓글