[react][npm] 리액트-node.js-npm-프런트엔드 개념 알기

"Do it! 리액트 모던 웹 개발 with 타입스크립트" 책을 정리하는 포스트입니다.

우분투 환경에서 진행함

 

React

react, 리액트는 2013년 페이스북에서 발표한 프런트엔드 오픈소스 자바스크립트 프레임워크이다. ( 정확히는 라이브러리가 맞다..!)

*프런트엔드: 웹 브라우저를 대상으로 사용자에게 보여지는 부분을 자바스크립트 언어로 작성

*백엔드: 프런트엔드에서 요구하는 데이터를 제공하는 형태의 개발

 

백엔드 ↔ 프런트엔드 통신: JSON 데이터로 통신

*JavaScript Object Notation (JSON): Javascript 객체 문법을 따르는 문자 기반의 데이터 포맷

 

따라서 리액트는 백엔드에서 받은 JSON 데이터를 해석하여 화면을 생성한다.

즉, DOM을 조작할 수 있는 프론트엔드 프레임워크!

 

Node.js

Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임 환경이다.

 

Node.js는 웹 브라우저가 아닌 컴퓨터/서버에서 자바스크립트를 실행할 수 있게 해준다!

 

구현된 모듈 및 라이브러리들을 간편하게 사용하기 위해서 Node.js를 설치한다. React를 더 쓰게 편하게 해주는 도구를 제공함.

 

npm(node package manager) 

Node.js 프로젝트에서 개발에 필요한 자바스크립트 오픈 소스 라이브러리들을 쉽게 설치/사용할 수 있게 해주는 프로그램

package.json 파일이 있는 디렉터리에서 실행하는 명령이다.

라이브러리를 설치하면 node_modules 폴더에 라이브러리를 내려받아 저장하고, package.json 파일에 정보를 적어 저장한다.

 

 

추가 출처

 

https://chucoding.tistory.com/86

React 개발에 왜 Node.js가 필요할까??

https://velog.io/@stella6767/React%EC%99%80-Node.js%EC%9D%98-%EA%B4%80%EA%B3%84

React와 Node.js의 관계