[Node.js] React를 위한 Node.js 기초

리액트가 자바스크립트의 라이브러리이기 때문에 Node.js를 조금 알아야 한다. 

 

 

자바스크립트 코드는 브라우저 내장 자바스크립트 엔진을 이용하여 실행한다.

브라우저마다 각각의 엔진을 사용하는데 크롬브라우저가 쓰는 V8이 가장 대표적인 자바스크립트 엔진이다

V8엔진을 브라우저에서 독립시켜서 브라우저 바깥에서도 실행할 수 있도록 한 것이 Node.js이다(자바스크립트를 브라우저가 아닌 곳에서도 실행시켜보자!)

 

-> Node.js는 자바스크립트의 실행환경 이라고 볼 수 있다 (--> 자바스크립트의 Runtime) 

 

자바스크립트 코드를 브라우저 없이 컴퓨터에서도 독립적으로 실행할 수 있다는 것은

자바스크립트로 서버 개발도 가능하다는 뜻이다. 

 

 React -> 브라우저에서 동작하는 복잡하고 여러가지 기능을 가진 자바스크립트 파일들을 쉽게 만들어내는 기술. 리액트를 이용해 만든 자바스크립트 파일들은 복잡하지만 좋은 기능들을 가지고 있기 때문에, 웹브라우저에 전달되어서 고전적인 웹사이트가 아니라 프로그럼처럼 돌아간다. 리액트를 이용해 만든 웹사이트를 웹 어플리케이션이라고 부르고 리액트 어플리케이션이라고 부르기도 한다. 리액트는 Node.js를 기반으로 사용할 수 있는 기술이기 때문에 Node.js  없이는 사용할 수 없다.

 

 

Node.js 다운로드 

https://nodejs.org/en/

Node.js

LTS버전이 안정적이므로 LTS로 다운받도록 하자

 

잘 설치 되었는지 확인하기 위해 CMD창(맥유저는 터미널)을 켜서 node -v 명령어로 버전 출력해보기 

버전정보가 안 나오면 설치가 제대로 안 됐거나 환경변수 등록이 안 된 것이다.  

 

node package manager(npm)도 잘 설치되었는지 확인하기  (npm -v) 

npm까지 설치했으면 node.js를 이용하기 위한 환경설정이 완료된 것. 

 

node에게 자바스크립트를 수행하라고 명령 내리기 

웹브라우저상에서 코딩해서 js를 실행할 때는 console.log를 찍으면 개발자도구에서 확인할 수 있었는데, node.js 에서 실행하면 이렇게 터미널에서 확인할 수 있다

 

 

예제) 여러 함수나 객체 코드들을 다른 파일에서 가져다 쓰기 

Calc.js에 있는 함수들을  index.js로 가져다 쓸 수 있게 해주는 내보내기 작업을 해줘야 한다 (모듈 내보내기) 

* 모듈 : 어떤 기능을 담당하는 분리된 파일 각각을 모듈이라고 일단 생각할 것(Calc.js는 계산 기능을 담당하는 분리된 모듈)

node.js 에서는 module.exports를 이용해서 객체 단위로 모듈을 내보낼 수 있다 

모듈시스템이란 모듈을 내보낼 수 있고 불러와서 사용할 수 있는 일종의 함수같은 기능들을 제공하는 시스템이라고 생각하면 된다. 위의 예제처럼 기능별로 파일을 분리하고 각각의 기능을 다른 파일에서 구현한 뒤에 불러와서 사용할 수 있다

(참고: common.js말고 ES모듈이라는 모듈시스템도 존재하니 나중에 찾아볼 것) 

 

 

**프로젝트를 생성하고 외부 모듈 사용해보기 

npm을 이용하여 node.js 패키지를 만들어보고 다른 사람의 패키지를 이용해보자 

 

npm(Node Package Manager) : Node.js의 패키지 관리 도구 

 

패키지는 누군가 만들어놓은 node.js 모듈을 의미하는 단어라고 생각할 것 

그래서 패키지를 npm을 이용하여 내 프로젝트에 설치하면 다른 사람이 만들어놓은 여러가지 기능을 하는 모듈들을 그냥 불러와서 사용할 수 있다 ( ex. 로그인 모듈(패키지), 전화인증 모듈(패키지), 메일 발송 모듈(패키지) 등등...)

 

패키지파일을 효율적으로 관리하기 위해 최상위폴더인 root 폴더를 정하고 그 아래에 모든 패키지 파일들을 생성한다

폴더를 하나 생성해두고 VSCoded에서 열어준 후 터미널에  npm init 명령어 입력(패키지엔 초기설정이 필요한데 이 초기설정을 npm을 통해서 할 수 있는 것) 

패키지 네임이 뭐냐고 물어보는데 일단 package-example1 이런식으로 이름 지어주고 엔터 

version : 이 패키지가 몇 버전인지를 묻는 것. 처음 만든거니까 1.0.0이고 이럴 때는 그냥 엔터쳐주면 된다.

description : 패키지의 설명. 입력 안해도 상관 없다(엔터) 

entry point : 디폴트가 index.js로 되어있는데 일단 엔터

test command : 엔터 

git repository : 엔터 

keyword: 엔터

author : 그냥 엔터쳐도 되고 본인 닉네임 적어도 된다

license : 엔터

yes까지 입력하고 나면 package.json이라는 파일이 생성되면서 패키지 초기화가 완료된다

package.json은 우리가 만들 패키지의 정보를 기록하는 환경설정파일이라고 생각하면 된다. 

이름 , 버전, 설명, 진입파일(main), 스크립트, 저자, 라이센스 등등을 명시할 수 있다. 

 

main(진입파일) : 패키지로 개발을 진행하다보면 패키지 안에 많은 기능들이 필요한데 기능들을 다 파일로 나눌거니까 파일들이 많이 생길 것임. 그 여러 개의 파일중에 뭘 실행시켜야할지 다른 사람들은 모름. 여러 개의 파일중에 이 패키지를 실행할 때 어떤 파일을 실행해야 하는지 명시해주는 것. 

scripts : 패키지를 개발하면서 자주 실행해야 하는 명령어같은 것을 사전에 정의해두는 것 

패키지 전체를 실행하는 명령어를 만들고 싶다면 "start" : "node index.js" 이런 식으로 미리 정의해서 만들 수 있다.

start라는 명령어를 입력하면 package.json의 scripts에 저장된 start에 해당하는 문자열이 터미널에 입력되어서 명령어로 수행된다. 자주 사용해야 하는 긴 명령어들을 쉬운 키워드로 바꿔둘 수 있다. (터미널에 npm start 를 쳐보도록 하자)

start가 실행됐다고 나오고 -> start는 node index.js라고 되어있으니까 node index.js가 명령어로 내려지고 index.js의 console이 수행이 되어서 정상적으로 잘 출력되고 있다.

 

** npm을 이용하여 다른 사람이 만든 모듈을 불러오기 

npmjs 구글에 검색해서 나오는 최상단 웹사이트 접속하기 

https://www.npmjs.com/

npm

 

nodejs 패키지들의 쇼핑몰이라고 생각하면 된다. 대부분 오픈소스 패키지로 제공되어서 무료로 사용할 수 있다.

예를들어 메일 발송 기능이 node에서 필요하다면 mail로 검색해서 필요한 모듈을 내려받아 사용할 수 있다

 

** 실습 예제 ** 

randomcolor라고 검색창에 입력하고 exact match라고 뜨는 모듈 상세페이지로 들어가보면, 이 모듈이 뭐고 어떻게 사용해야 되고 어떻게 다운로드 받아야하는지 등등에 대한 패키지 정보가 들어있다. 

randomcolor패키지는 랜덤한 색상 코드를 함수 한 번으로 추출해주는 모듈이다. 

모듈 상세페이지에 install 명령어가 나와있으니 터미널에 입력해서 설치하면 된다(클릭하면 복사도 됨) 

i는 install 이라는 뜻이라서 i를 install로 쳐도 상관 없다

 

현재 설치하려고 하는 모듈이 지금 내가 다루고 있는 패키지 내에서 실행이 되는 건지 확인한 후 명령어를 실행한다

npm 이라는 명령어를 install과 함께 사용해서 어떤 패키지를 다운받게 되면 지금 현재 위치한 npm node 패키지 기준으로 이 모듈을 설치하게 되는데 package.json이 그 기준이 된다. 그래서 package.json이 있는 그 위치에서 수행해야 한다는 것.

설치가 완료되면 package.json에 dependencies라는 필드가 생긴다. package.json는 어떤 외부 패키지를 설치했는지, 그 버전은 어땠는지 기록해준다. 그래서 어떤 node.js의  package.json파일을 보면 이 패키지는 어떤 외부 패키지들을 사용했는지 알 수 있다. ^는 패키지 설치할 때 패키지의 정확한 버전을 명시하는 것이 아니라 이 randomcolor라는 패키지는 0.6.2 버전 이상으로만 설치가 진행된다라고 명시했다고 생각하면 된다. 

 

 

프로젝트 폴더 아래에 node_modules라는 폴더와 package-lock.json이라는 파일이 자동으로 추가되어있을 것이다.

node_modules에는 내가 설치한 외부패키지들의 코드가 실제로 안에 들어있다. 일종의 보관소같은 역할을 한다. 

package-lock.json파일은 실제로 나의 패키지에 설치된 외부 패키지들이 정확히 어떤 버전으로 설치되었는지 기록되어있는 파일이다. ^0.6.2처럼 버전의 범위를 명시하는 것이 아니라 정확히 어떤 버전이다를 명시해준다. 

 

랜덤 컬러가 출력된걸 확인할 수 있다.