[React] 1. Node.js

1) Node.js란?

 

 

자바스크립트는 톡립적인 언어가 아닌 스크립트 언어로써, 본래는 웹 브라우저 프로그램 안에서만 작동합니다.

즉, 웹 브라우저가 없으면 자바스크립트를 사용할 수 없고, 자바스크립트를 실행시키기 위해서는 브라우저에 내장된 자바스크립트 엔진이 필요합니다. 

 

* 스크립트 언어: 특정한 프로그램 안에서 동작하는 언어. 다른 응용 프로그램에 삽입되어 동작하는 프로그래밍 언어.

 

이러한 자바스크립의 태생적인 한계를 극복하고 브라우저가 외의 다른 어느 곳에서도 자바스크립트를 실행하기 위한 프로그램이 Node.js입니다.

Node.js의 가장 주요한 특징 중 하나는 서버를 제작할 수 있다는 것입니다.

 

Node.js: 자바스크립트의 실행 환경(runtime). node.js를 이용해서 자바스크립트를 웹 브라우저가 아닌 PC에서도 독립적으로 실행할 수 있다. 

 

 

앞으로 학습할 React는 Node.js를 기반으로 운용되기 때문에 React를 이용하기 위해서는 Node.js를 설치해야 합니다. 

 

https://nodejs.org/ko/

Node.js

 

* Node.js가 제대로 설치됐는지 확인하기 

명령 프롬프트  →  'node -v' 와 'npm -v' 를 각각 입력  →  버전 정보가 뜨면 제대로 설치된 것. 

 

---

2)  Node.js 기초

 

 

① 터미널

 

에디터에서 작성한 자바스크립트 파일을 node.js에서 실행시키기 위해 필요한 것이 터미널입니다. 터미널을 통해 node.js 실행을 명령합니다. 

 

* GUI: Graphic User Interface. 아이콘 같은 그래픽을 기반으로 하여 마우스 더블 클릭만으로 운영체제에 명령을 내리는 방식. 

* CUI: Command Line Interface. 직접 텍스트로 타이핑하여 운영체제에 명령을 내리는 방식. 이때 명령을 내리는 곳이 터미널. 

 

 

에디터에서 터미널을 열어 파일을 node.js에서 실행시켜 보겠습니다.

 

(vs code에서 터미널 열기)

단축키: Ctrl + J 

 

노드에 파일 실행을 명령:  node 파일명

 

 

* node.js를 통해 자바스크립트 파일을 실행하면 터미널에 실행결과가 출력됩니다. 

 

---

② 모듈 시스템 (Common JS)

 

 

node.js에서는 모듈 단위로 파일 또는 어떤 요소를 내보내고 다른 파일에서 그것을 불러와서 사용하는 것이 가능합니다. 

즉, 각각의 분리된 자바스크립트 파일끼리 서로 접근할 수 있는 것입니다.

 

이렇게 기능별로 파일을 분리하고, 모듈을 내보내기 & 불러오기 하여  사용할 수 있는 기능을 제공하는 시스템이 모듈 시스템입니다.

 

* 모듈(module): 어떤 기능을 담당하는 각각의 분리된 파일 또는 어플리케이션을 구성하는 개별적 요소. 

 

 

[모듈 내보내기 내장함수] -  객체 단위로 모듈을 내보낼 수 있음. 

module.exports = {....};

 

[모듈 불러오기 내장함수]

require("경로");

 

 

---

3) 패키지(Package)

 

npm을 이용해서 패키지를 만들어보고 외부 패키지도 사용해보겠습니다.

 

NPM: Node Package Manager.  node.js의 패키지 관리 도구. 

패키지(Package): 누군가 따로 만들어 놓은 node.js 모듈.

 

---

 

① 패키지 생성하기

 

[패키지 초기화] 

npm init  → 패키지 이름 입력  

 

터미널에 'npm init' 명령을 입력한 후, 패키지 이름을 입력하고 쭉 엔터를 눌러주면 package.json 파일이 생성됩니다. 

package.json 파일은 우리가 만들 패키지의 정보를 기록하는 환경 설정 파일입니다. 

 

package.jaosn

↳ main: 진입 파일. 여러 개의 파일 중 어떤 파일을 실행해야 하는지를 명시 .

↳ script: 자주 실행하는 명령어를 사전에 정의.

               위 사진을 보면 "start"라는 명령어를 정의하여 "start"라는 키워드만으로 "node index.js" 명령이 실행되도록

               하고 있습니다.  

 

* json에서는 주석을 지원하지 않습니다. 

 

---

② 외부 패키지 사용하기 

 

[패키지 설치]

 

npm을 이용하여 패키지를 설치하면 누군가 만들어 놓은 복잡하거나 여러 기능들을 하는 모듈들을 그냥 불러와서 사용할 수 있습니다. 

 

외부 패키지 다운로드(오픈소스 패키지를 무료로 제공) - https://www.npmjs.com/

npm

 

 

외부 패키지를 다운 받아 사용해보겠습니다.

 

위 사이트로 접속하여 검색창에 'randomcolor'라고 입력한 후 가장 상단에 뜨는 패키지를 선택합니다. 

 

해당 패키지를 선택하여 상세 페이지로 접속하면 페이지 우측 상단에 패키지 설치 방법이 나와있습니다. 

명시된 설치 명령문을 복사하여 터미널에 입력하면 설치가 진행됩니다. 

이 때, 명령문이 우리가 다루고 있는 패키지에서 실행되는 것이 맞는지 확인해야 합니다. 

 

* 패키지 설치 CLI

npm i 패키지 이름  (== npm install 패키지 이름)

 

 

패키지 설치를 완료한 후의 모습입니다. 

화면 좌측을 보면 새로운 폴더들이 추가되어 있고, package.js 파일을 보면 "dependencies" 필드가 추가되고, 그곳에 설치한 패키지 정보가 기록되어 있습니다.

 

* package.jason 파일에는 패키지 버전의 범위가 기록되고, package-lock.jason 파일에는 정확한 버전 정보가 명시되어 있습니다. 

 

 

[패키지 사용]

 

패키지 설치를 완료했으니 이제 설치한 패키지를 사용해보겠습니다. 

 

보통 많은 사람들이 사용하는 패키지들은 패키지 상세페이지에 기본적인 사용법이 나와있습니다. 

 

 

위의 사용법을 보고 코드를 작성한 후 파일을 실행시키면 랜덤 색상이 텍스트로 출력되는 것을 확인할 수 있습니다.

* 외부 패키지의 경우, require 내장함수를 사용할  때 경로명을 명시하지 않아도 됩니다.