한 입 크기로 잘라먹는 리액트 3장 - node.js

개요

5월 24일 자바스크립트 스터디 발표 문서 정리 및 node.js에 대한 개념에 대해 이 책을 읽고 알게 되어 정리하게 되었다.

 

내용

Node.js란?

자바스크립트의 런타임

 

웹 브라우저가 자바스크립트의 유일한 런타임일 때는 웹브라우저 없이 자바스크립트를 사용할 수 없었다.

독립적인 자바스크립트 런타임인 node.js가 등장한 이유엔 어떤 환경에서도 자바스크립트를 실행 할 수 있게 되었다.

이로 인해 웹 서버나 모바일 애플리케이션을 개발할 때도 자바스크립트를 이용하는 등 활용 범위가 넓어지며 자바스크립트 개발자도 늘어나게 되었다.

 

비유하자면 자바스크립트는 게임기이고, node.js는 게임기이다.

 

리액트를 하는데 왜 Node.js를 공부해야 하는가?

리액트는 node.js기반으로 만들어진 라이브러리이다.

node.js에는 리액트를 효율적으로 다룰 수 있는 여러 도구들이 내장되어 있고,

node.js를 통하여 리액트로 만든 애플리케이션을 구동하기 때문에 공부해야한다.

 

Node.js 환경 설치하기

node.js를 별도의 프로그램으로 사용하기 위해서는 아래 공식 홈페이지에 접속하여 다운로드 후 설치하면 된다.

https://nodejs.org/ko

Node.js

 

공식 홈페이지에 들어가면 LTS와 현재 버전이 존재하는데

LTS는 Long Term Support의 약자로 최소 3년 이상 지원되는 안정적인 버전이라는 뜻이며 보안 취약점이나 결함에 대한 유지보수를 지원한다는 의미이기도 하다.

node.js의 버전의 맨 앞 숫자가 짝수인 경우는 LTS버전이고, 홀수인 경우에는 실험 버전이라 평균 1년 또는 그 이하의 짧은 기간만 지원한다. (예 : 18.1.3 -> 짝수 && 17.1.3 -> 홀수)

 

설치 후 터미널에서 npm -v를 입력했을 때 node.js의 버전이 잘 출력된다면 설치가 정상적으로 된 것 이지만

아니라면 설치 중 문제가 생긴 것이니 node.js를 삭제 후 재설치 하는 것을 권장한다.

 

주의할 점

윈도우에서 node.js를 설치하려는 경우에는 node.js 설치 및 사용 중 문제가 생길 수 있으므로 pc 사용자 계정명을 영문으로 변경해야 한다.

 

npm이란?

Node Package Manager의 약자인 npm은 node.js의 프로젝트 단위인 '패키지'를 관리하는 도구이다.

 

실제로 사용해보자!

node.js 패키지

'패키지'는 node.js에서 여러 개의 자바스크립트 파일을 실행하고 관리하는 일종의 관리 단위.

 

복잡한 프로그램을 만들기 위해서는 여러 개의 자바스크립트 파일이 필요한데 왜 한개의 파일로는 만들 수 없을까?

예를 들어 쇼핑몰의 모든 기능을 하나의 자바스크립트 파일로 구현한다면 코드의 길이가 너무 길어지고, 수정이 필요한 곳을 찾는 시간도 크게 소요될 것이다.

이런 것을 방지하기 위해 '기능별'로 파일을 나누어 작성하는게 일반적임으로 여러개의 자바스크립트 파일이 필요하다.

 

node.js를 통해 패키지 만들기

여러 폴더를 패키지 단위로 관리하려면 최상위 폴더인 '루트 폴더'가 필요하다.

• npm init
  • node.js 패키지를 초기화하는 명령어
  • 여기서 초기화란 최소한의 구성 요소를 자동으로 생성하는 과정이다.
  • 터미널에 npm init 명령어를 입력하면 루트 폴더와 package.json 파일이 생성된다.

 

package.json 안의 내용은 무엇일까?

package.json  :  패키지의 메타 정보를 저장하는 파일이며, 이 파일을 기반으로 node.js는 프로그램을 가동한다.

• name : 패키지 이름
• version : 패키지 버전
• description : 패키지 설명 (보통 패키지로 구성한 프로그램의 목적을 작성)
• main : 패키지의 소스 코드 파일 중 메인 역활을 담당하는 소스 코드 파일
• scripts : 패키지를 쉽게 다루기 위해 지정한 매크로 명령어
• author : 패키지를 만든 사람
• license : 패키지의 라이선스

 

패키지 스크립트 사용하기.

package.json의 scripts 항목은 복잡한 명령어를 간단한 명령어로 변경하는 일종의 매크로 기능을 지원한다.

특정 파일을 실행시키기 위해서는 node 명령어와 함께 경로를 명시해야하는데 scripts를 이용하여 아래와 같이 설정한다면

npm run start 명령어를 터미널에 치는 것 만으로도 파일 실행이 가능해진다.

{
	(...)
	"scripts" : {
		"start": "node 파일명.js,
    	"test": (...)
    },
    (...
}

npm run 명령은 뒤에 나오는 스크립트를 실행하는 명령어로 위 코드에서 지정한 start 명령어를 쓴

npm run start를 입력한다면 package.json에 기록한 scripts에 일치하는 명령어를 찾아 실행하게 된다.

 

node.js의 모듈 시스템

모듈이란?

프로그래밍에서 마치 컴퓨터의 부품처럼 독립적인 존재로서 다른 프로그램의 부품으로도 활용 될 수 있는 재사용성을 가진다는 특징을 가지고 있다.

(예 : 마우스, 모니터, 키보드 등과 같은 주변 장치)

 

자바스크립트에서는 독립된 하나의 자바스크립트 파일을 '모듈'이라고 부른다.

모듈은 대체적으로 특징 정보를 담은 하나의 객체이거나 특정 목적을 지닌 복수의 함수로 구성하는 형태가 많다.

 

ES 모듈 시스템이란?

ECMAScript 모듈 시스템의 약자인 ESM은 가장 최근에 개발된 모듈 시스템.

최신 프론트엔드 기술은 모두 ESM을 채택하고 있다.

 

CSM 사용 설정하기

node.js는 기본적으로 CJS 모듈 시스템을 사용하기 때문에 package.json에서 설정을 변경해야 한다.

아래와 같이 package.json에 추가하면 ESM 문법으로 변경할 수 있는데 해당 설정을 변경하지 않고 ESM 문법을 사용할 경우 오류가 발생한다.

{
	(...)
    "type": "module"
}

 

블로그 주인장의 궁금증 1 : ? type을 module로 설정시 왜 ESM으로 설정되도록 한걸까?

 

개별 내보내기

자바스크립트의 모듈은 결국 단지 하나의 자바스크립트 파일이다.

모듈의 정의처럼 '독립적이고 재사용이 가능'한 자바스크립트 파일을 다른 파일에서 불러와 사용할 수 있다.

 

export 키워드를 변수나 함수 선언 앞에 붙이면 해당 값을 모듈에서 내보낼 수 있고,

const test = "";
const a = "";

export {test, a};

c, 자바, 파이썬처럼 import 문을 사용하여 모듈에서 값을 불러온다.

import {test} from "./파일명.js";

 

값을 한번에 불러오고 싶다면?

아래 코드의 형식처럼 작성하면 선언된 해당 파일의 export한 모든 값을 불러올 수 있다.

import * as A from B

 

기본값으로 내보내기

export 뒤에 default를 붙여 모듈의 기본값으로 내보낼 수 있다.

export default test;

 

일반적인 내보내기와 기본값으로 내보내기의 차이점은 무엇일까?

• export 로 내보낸 경우
  • 중괄호로 export한 이름과 동일한 이름으로 불러와야한다.
  • 값을 불러올 때 중괄호를 사용하여 불러오지 않으면 에러가 발생한다.
• export default로 내보낸 경우
  • 중괄호를 사용하지 않아도 된다.
  • 사용자가 임의의 이름을 지정하여 자유롭게 불러올 수 있다.

const test = "";
const a = "";

export default {
	test,
    a
}

import hihi from "./파일명.js"

console.log (hihi.test)

 

블로그 주인장의 궁금증 2 : ? 언제 뭘 쓰는게 좋을까 ?

블로그 주인장의 궁금증 3 : ? 자바의 maven이나 gradle은 내보내기를 자동으로 해주고 있기 때문에 export를 사용하지 않아도 import 할 수 있는 걸까 ?

 

라이브러리 사용하기

외부 패키지란?

자신이 만든 node.js 패키지를 서버에 올려 다른 사람도 사용할 수 있도록 배포한 파일.

'라이브러리'라고 부른다.

 

• 라이브러리는 프로그램을 개발할 때 공통으로 사용할 수 있는 기능들을 모아 모듈화 한 것이다.
• 완전한 프로그램이 아니다.
• 특정 기능만 수행한다.
• 대다수의 라이브러리가 오픈소스이다.

 

왜 사용할까?

이미 다른 개발자가 훌륭하게 만들어 놓은 것을 다시 만들기 위해 고생하지 않기 위하여.

 

라이브러리 설치하기

아래 링크에 들어가 필요한 라이브러리를 탐색하고 설치할 수 있다.

https://www.npmjs.com/

npm

 

라이브러리를 검색하였고, 검색된 것 중에 하나를 누른다면 아래와 같은 상세 페이지로 이동하게 된다.

 

• Readme : 라이브러리에 대한 설명, 사용 방법, 설치 등에 대한 중요 정보 제공
• 우측 탭의 install : 터미널을 이용하여 라이브러리를 설치하는 명령어 제공
  • 명령어의 npm i는 npm install을 대체하여 사용 가능하다.
  • 명령어의 lodash는 라이브러리 이름으로 해당 위치에 설치하려는 라이브러리 이름을 적는다.

 

라이브러리 설치 후 패키지의 변화

1. 패키지 루트에 라이브버리를 저장하는 'node_modules'폴더가 생성됨.
   
   1. 실제 라이브러리가 설치되는 곳
2. package.json -> 라이브러리 정보를 저장하는 dependencies(의존) 항목이 추가됨
   1. 패키지를 실행하기 위해 필요한 라이브러리라는 뜻
   2. 패키지에 설치한 라이브러리의 이름과 버전이 표시되어있으나 정확한 버전이 아닌 버전의 범위만 있음.
3. package-lock.json이라는 파일이 생성됨 
   1. 2번의 package.json의 dependencies는 버전의 범위만 있음으로 정확한 버전을 알 수 없음.
   2. 이것을 해결하기 위해 설치된 라이브러리를 정확하게 기록하기 위한 파일인 package-lock.json 생성됨.

 

라이브러리 다시 설치하기

node_modules 폴더는 외부 라이브러리가 실제로 설치되는 곳이기에 용량이 가장 크다.

이러한 이유로 공유할 때 node_modules를 제외하고 공유한다.

때문에 공유를 받은 사람은 제외된 라이브러리를 다시 다운 받아야하는데, npm install 명령어를 이용하여 설치할 수 있다.

 

설치 방법 및 과정

1. 공유자는 패키지의 작업 경로인 루트 폴더로 접근한 터미널에 npm install 명령어를 입력한다.
2. package.json의 dependenciesdp 표시된 버전 범위와 package-lock.json에 표시된 정확한 버전 이름을 이용하여 node_modules 폴더에 필요한 패키지를 자동으로 설치한다.
   1. package.json의 dependenciesdp은 존재하지만  package-lock.json이 존재하지 않는다면 dependenciesdp의 버전 범위 기반으로 라이브러리를 설치한다.

 

라이브러리 사용하기

기본적으로 라이브러리를 사용하는 방법은 내보내기 한 모듈(자바스크립트 파일)과 동일한 과정을 가지고 있다.

아래 코드처럼 라이브러리를 불러오는데 모듈과는 달리 경로와 확장자를 명시하지 않아도 된다.

import test from "라이브러리명";

 

결론

원래 자바 개발자였기에 궁금한 점이 몇개 더 있으나 이 부분은 다음 스터디 진행 전에 찾아보고, 글에 보충하려한다.

또한 1장과 2장도 이후에 정리할 예정이지만 5월 24일 발표를 위해 본의아니게 3장부터 정리하게 되었다.

원래는 node.js가 서버를 구축하는 언어인줄 알았으나 아니라는것을 알았고, 상당히 자세하게 설명되어 있기 때문에 책을 정리하며 복습하는 이 순간에도 많은 것을 배울 수 있는 귀중한 시간이었다.

 

ps. 혹 이 글을 보신 분 중에 중간중간 "블로그 주인장의 궁금증"에 대한 답을 아시는 분이 계시다면 언제든지 편하게 댓글로 알려주세요!