[React] NodeJs & React[1] (한입 크기로 잘라먹는 리엑트)

Node.js

Udemy 리엑트 챌린지 2주차 는 모듈 시스템과 패키지에 대한 실습을 하면서 Node.js 가 무엇인지 간단하게 알 수 있고, React 기본 개념과 함께 사용하는 이유와 장점에 대해 알 수 있었습니다.

Node.js ??

React.js 의 기본 환경 Node.js

자바스크립트는 자바스크립트 엔진 위에서 동작

일반적으로 자바스크립트는 웹 브라우저 위에서 html 의 버튼 클릭 이벤트를 처리하는 등의 interaction 외의 할 수 있는 일이 없었다.

그래서 브라우저 내부에서만 사용할 수 있었던 자바스크립트를 C++ 로 이루어진 V8 엔진을 통해 외부 에서 독립하여 사용할 수 있도록 Node.js 라는 이름의 프로젝트를 시작했다.

즉, Node.js 는 자바스크립트의 실행환경이며 Javascript’s Runtime 이라고 부른다.

javascript 가 Node.js 를 이용해서 브라우저 외부 에서 독립적으로 사용할 수 있기 때문에 카카오톡이나 ppt 와 같은 pc 프로그램을 만들 수 있을 뿐만 아니라 Web Sserver 도 만들 수 있다.

Web Server 는 도메인 주소로 요청을 받아서 알맞는 웹 파일을 제공해준다.

기본적으로 React 는 복잡하고 여러가지 기능을 가진 자바스크립트 파일들을 쉽게 만들어내는 기술

마치 프로그램처럼 돌아가는 react로 만든 웹사이트를 web 어플리케이션 또는 react 어플리케이션이라고도 부른다.

react 는 Node.js 기반으로 사용할 수 있는 기술이므로, Node.js 의 기본 개념과 사용법을 알아야 한다.

Node.js & VsCode 설치 및 환경 설정

Node.js 설치

Node.js 홈페이지
다운로드 바로가기

default 설정으로 설치를 진행해준다.

명령 프롬프트 (cmd) 창을 통해 node.js 제대로 설치되었는지 확인

node -v // node 버전 확인
npm -v // npm 버전 확인

javascript editor 설치 (VS Code)

VS Code 홈페이지
다운로드 바로가기

default 설정으로 설치를 진행해준다.

VS Code 편집기를 활용해서 프로젝트를 만들 때 기능별로 Javascript 파일들을 여러개로 나누어서 관리한다.

Extensions

1. Prettier

   VsCode 들여쓰기를 자동으로 예브게 해주는 플러그인

   Ctrl + Shift + p : Preperences Open Settings(UI)

   
   

   

   format on save 검색 후 체크 박스 체크 → 저장 시 소스코드 들여쓰기를 자동으로 정렬

2. material icon

   파일의 확장자에 따라 아이콘을 변경해주는 플러그인

   Ctrl + Shift + p : Material Icons: Activate Icon Theme 클

   
   

   

   Node.js 기본 & Common JS 모듈 시스템

   node 명령어로 자바스크립트 파일 실행

   node index.js // index.js 파일 실행

   Common JS 모듈 시스템

   모듈

   프로젝트에서 확장성과 유지 보수 측면에서 기능별로 소스파일을 분류 해놓은 각각의 파일

   //calc.js 파일
   
   const add = (a,b) => a + b;
   const sub = (a,b) => a - b;
   
   module.exports = {
       moduleName : "calc module",
       add: add,
       sub: sub
   }

   //index.js 파일
   
   const calc = require('./calc');
   
   console.log(calc);
   console.log(calc.add(1,2));
   console.log(calc.add(4,5));
   console.log(calc.sub(10,2));

   module.exports 로 내보내고 require 로 불러오는 모듈 시스템

   
   
   

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

   NPM(Node Package Manager)

   

   NPM 은 다른사람들이 만들어 놓은 모듈들을 받아서 사용할 수 있게 도와주거나 프로젝트를 관리하는데 큰 도움을 주는 도구

   Package

   

   누군가 따로 만들어 놓은 node.js 모듈을 의미

   Package 생성

   1. 새로운 폴더를 만들고 VsCode 로 열기
   2. index.js 파일 생성
   3. Package 초기 설정

      npm init

   4. package.json 파일 scripts 수정

      

   5. npm start 명령어 실행

      npm start // index.js 파일 실행

   다른 Package 사용

   Node.js 의 Package 들을 검색하여 사용
   홈페이지 바로가기