Node.js npm 이란 무엇인가?

Node.js npm이란 무엇인가?

 

오늘은 Node.js를 설치하면 자동으로 설치되는

Npm이라는 것에 관해 알아보겠습니다.

오늘도 역시 전혀 비전문적이고 쉽게 알려드리겠습니다.

 

목차.

 

1. Node.js란?
2. Npm이란?
3. React와 Npm?

 

1. Node.js란?

 

우리는 리액트로 프로젝트를 만들기 위해 Node.js가 꼭 필요합니다.

과연 Node.js란 무엇일까요?

 

Node.js는 크롬 v8 자바스크립트 엔진으로 빌드된 런타임이라고 합니다.

일단 무슨 말인지 이해가 잘 안 되시겠죠???

 

그냥 우리는 쉽게 자바스크립트를 서버로서 이용할 때 쓰인다고 알아 둡시다.

Javascript는 사실 우리가 자주 사용하는 VsCode와 같은 에디터 외에,

브라우저에 기본으로 내장되어 있습니다.

(궁금하시다면 "F12"번을 누르신 뒤 "console" 탭을

누르시고 자바스크립트 코드를 작성해 보세요.)

사실 이러한 자바스크립트는 브라우저에 종속된 언어이고,

이를 밖으로 꺼내는데 Node.js가 사용됩니다.

하지만 너무 복잡하고 어려우니 넘겨둡시다.

 

우리는 그냥 Node.js는 비동기식으로 처리되며, 백엔드에 쓰인다고,

그렇게 쉽게 외워만 둡시다.

따라서 실시간으로 무언가 사용되거나 작동되어야 하는 프로젝트에

쓰기 좋다는 것, Node.js의 Express를 사용하여 서버를

만들 수 있다는 것까지만 알아둡시다.

지금은 이 정도만 알아두어도 반은 성공일 것입니다.

 

2. Npm이란?

 

 Npm은 Node.js를 설치하면 자동으로 설치되는

원래 이름은 Node Package Manager입니다.

이 npm은 말 그대로 Node.js에 필요한 패키지들을 관리합니다.

언제든지 필요하다면 npm을 이용하여 자신에게 필요한

모듈을 다운로드할 수 있습니다.

다운로드하는 방법은 아주 간단합니다.

cmd에서 파일을 설치할 경로로 들어간 뒤,

npm이라는 명령어를 통해 모듈을 다운로드할 수 있습니다.

각각의 모듈은 npm 공식 홈페이지에서 찾을 실 수 있으며,

모듈마다 다운로드부터 사용방법까지 자세히 나와있습니다.

 

이는 어떠한 기능을 위해, 처음부터 스스로 코딩할 필요 없이

필요에 따라 알맞은 모듈을 다운로드한 뒤,

자신의 프로젝트에 이용할 수 있다는 뜻입니다.

이로 인해 처음부터 잘 짜인 코드를 이용하여,

프로젝트의 성능을 높이거나 보안면에서 아주 좋습니다.

 

하지만 이 완벽할 것 같은 npm에도 단점은 존재합니다.

어쩌면 npm의 단점이라기보다 모듈의 단점일 것 같습니다.

이러한 모듈을 이용해 처음부터 잘 짜인 코드를 사용 가능하지만,

만약 내 홈페이지와 맞지 않거나, 에러가 있는 경우,

모듈을 수정하기가 힘들고 불편합니다.

그렇기에 모듈을 개발한 개발자분(들)에게 의존적입니다.

개발자분이 더 이상 특정 모듈을 업데이트하지 않는다면,

별다른 방법이 없을 수 있습니다.

 

또한 npm은 모듈 설치가 비교적 느리기 때문입니다.

그 외에도 뭐.. 많은 문제들은 있습니다.

이를 대체하기 위해 페이스북에서 yarn을 도입했습니다.

리액트를 사용하신다면 yarn을 사용하시는 것도 좋은 방법입니다.

yarn은 npm과 호환되고, 리액트를 사용할 때도 좋습니다.

(풍문으로 듣기엔 yarn으로 리액트 build를 하는 것이

npm보다 좋다고 들었습니다.)

 

 

3. React와 Npm?

 

리액트 프로젝트를 시작하려면, npm 혹은 yarn, npx는 필수입니다.

이러한 명령어를 사용하지 못한다면,

리액트의 기본 프로젝트를 생성할 수 없습니다.

또한 npm은 리액트에 사용되는 모듈도 정말 많습니다.

예를 들면, 슬라이더, fetch를 도와주는 axios, 메뉴, 그 외의

여러 모듈들이 존재합니다.

리액트와 이러한 모듈을 이용하여 좀 더 세련되고 안전하며 멋진

홈페이지를 제작할 수 있다는 게 너무 멋지지 않나요??

또한 우리가 설치한 리액트를 프런트엔드로 Node.js를 백엔드로

사용하여, 하나의 언어로 풀 스택 개발자처럼 일 할 수 있습니다.

다음에 시간이 된다면, 리액트와 Node.js 즉 express를 어떻게 서로 연결하는지,

이로써 어떻게 프턴트엔드에서 백앤드로, 백엔드에서 프런트엔드로 값, 파일 등을

주고받는지 간략하게 설명드리겠습니다.

 

4. 마치며.

 

저는 현재 회사에서 아우스빌둥 프로젝트로 디자이너와 함께,

홈페이지를 만들고 있습니다.

저 혼자 풀 스택으로 일하려 하니 여러 부분에서 문제도 생기지만,

뒤돌아보면 다 제게 이득이 되는 공부였습니다.

이제는 자바스크립트라는 언어 하나로, 풀 스택이 가능하고,

무궁무진한 모듈을 사용 혹은 직접 개발도 가능합니다.

개발의 세계는 항상 신기한 것들로 넘쳐나고 있습니다.

저와 같이 리액트 기초를 배우시면서,

생각만 하시고 실천하시기 어려웠던 아이디어를 펼치실 수 있으면,

너무너무 좋을 것 같습니다.

항상 시작이 반입니다.

항상 건강하시고 도전하시기 바랍니다.

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.

Es gibt keine perfekte Vorbereitung.

Perfekte Vorbereitung ist das Gleiche, wie nie anzufangen.