리액트 스터디 : Node.js 기초

Node.js란?

React.js를 배우는데 Node.js는 왜 이야기하냐??

Node.js를 알아야 하고 배워야 하는 이유?

리액트가 자바스크립트의 라이브러리이기 때문

 

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

(Safari : Nitro, Firefox : Spider Monkey , Chrome : V8, Edge : Chakra, Opera : Presto)

브라우저에 내장된 자바스크립트 엔진을 사용해야 하기 때문에, 자바 스크립트는 웹 브라우저에서만 실행될 수 있다.

크롬 브라우저에서 V8 엔진을 떼어와서 자바스크립트가 브라우저가 아닌 어디에서든 실행할 수 있도록 하는 것

 

Node.js : 자바 스크립트를 브라우저가 아닌 곳에서도 실행시켜보자 : 자바스크립트의 실행환경 : Javascript's Runtime

 

요청(Request) : 클라이언트 → 서버

응답(Response) : 클라이언트 ← 서버

 

서버에서 보내는 응답의 형태가 웹이라면
: 웹 서버

서버에서 보내는 응답의 형태가 미디어(영상, 이미지, 파일)라면
: 미디어 서버

서버에서 보내는 응답의 형태가 채팅이라면
: 채팅 서버

 

어떤 것을 주고받을지에 따라서 이름이 정해진다고 생각하면 된다.

요청하는 주체 : 클라이언트

요청을 받아서 데이터를 반환하는 주체 : 서버

 

Node.js로 웹 서버를 만들 수 있다.

요청(Request) / URL → (Node.js)

Browser Web Server

←응답 (Response) 웹사이트

응답(Response)

Jaascript CSS HTML

 

우리가 평소에 사용하던 URL이 웹 서버의 URL이었다는 것을 생각해볼 수 있겠다.

Node.js를 이용해서, JavaScript 언어를 이용해서 웹 서버를 만들 수도 있고, 웹 서버는 도메인 주소를 요청받아서 알맞는 웹 파일을 던져주는 역할을 한다.

 

리액트 : 브라우저에서 동작하는 복잡하고 여러 가지 기능을 가진 자바스크립트 파일을 쉽게 만들어내는 기술

리액트만 활용해서 만들어낸 웹 페이지는 마치 프로그램처럼 돌아간다. 웹 어플리케이션 또는 리액트 어플리케이션이라고 부르기도 한다.

리액트는 Node.js 기반으로 해서 사용할 수 있는 기술이기 때문에 Node.js 없이는 사용하기 어렵다.

Node.js & VsCode 설치하기

node -v : 현재 설치된 node.js의 버전 확인
npm -v : 현재 설치된 npm의 버전 확인
prettier 설치 → Ctrl + Shift + P

Node.js Hello World & Common JS

Graphic User Interface : GUI

아이콘 : 더블 클릭 : 이거 실행해 : window

Command Line Interface : CLI

ㅤ>_ : 명령어 입력 : window

명령어 : node index.js

node한테 index.js 파일 실행하라고 해

하나의 js 파일에서 정의된 함수를 다른 js 파일에서 사용하기 위해서는 내보내기라는 작업을 해줄 것이다. 뭘 내보낼 것이냐? 모듈을 내보낼 것이다.

모듈 : 어떤 기능을 담당하는 분리된 파일

module.exports = {
  moduleName : "calc module",
  add: add,
  sub: sub,
};

내보낸 모듈의 이름을 지칭하는 moduleName..

이렇게 module.exports로 내보내고, 내보낸 모듈을 require과 경로를 명시해서 불러오는 이런 모듈 시스템은 node.js가 기본적으로 제공하는 모듈 js인 common js라는 모듈 시스템이다. common js 말고도 es module이라는 모듈도 존재한다.

모듈 : 함수 같은 기능을 제공해주는 시스템이라고 생각하면 된다.

node.js에서 모듈 단위로 데이터를 내보내고, 받아와서 사용할 수 있다.

require이라는 내장 함수와 module.exports라는 내장 함수는 node.js에 있는 내장 함수이기 때문에 우리가 기존에 사용하던 바닐라 js에서는 이용이 제한된다는 점 알아두면 좋을 것 같다.

Node.js 패키지 생성 및 외부 패키지 사용하기

npm : Node Package Manager

Node.js의 패키지 관리 도구

 

Package?

로그인 모듈(패키지)

전화인증 모듈(패키지)

메일 발송 모듈(패키지)

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

 

 

Ctrl + Shift + ` : New Terminal

package.json

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

main : 진입 파일

이 패키지를 실행할 때 어떤 파일을 실행해야 하는지

scripts : 스크립트

패키지를 개발하며 자주 사용해야 하는 명령어를 사전에 정의해 둘 수 있는 곳

 

 

Error: Cannot find module '경로\index.js'

패키지에 index.js를 만든 적이 없기 때문에 당연히 발생하는 오류이다.

npmjs.com

node.js 패키지들의 쇼핑몰

패키지를 설치할 때 package.json을 기준으로 설치되므로 설치 경로를 잘 확인해주도록 하자.

package.json은 우리가 어떤 외부 패키지를 설치했는지, 그 패키지의 버전은 어땠는지를 기록하고 있다.

^ 표시 : ^0.6.2 : 0.6.2 버전 이상으로만 설치가 된다.

node_modules

: 우리가 설치한 외부 패키지들의 코드가 실제로 이 안에 들어오게 되는, 외부 패키지 보관소이다. 여기 안에 있는 패키지 또한 패키지이므로, package.json이 또 있다.

package-lock.json

: 실제로 우리 패키지에 설치된 외부 패키지들이 정확히 어떤 버전으로 설치되었는지 기록되어 있는 곳

package.json에서는 범위 버전이 기록되어 있었지만, package-lock.json에서는 정확한 버전이 명시되어 있다.

npm install을 통해 다운로드 받은 외부의 모듈은 경로를 명시할 필요 없이 그냥 작성해주면 된다.

 

해당 게시글은 인프런 - <한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지> 강의 내용을 기반으로 작성되었음을 알립니다.