리액트 시작하기

리액트를 시작하기 위한 사전 준비 ! 📖

Node.js

• Node.js 는 자바스크립트가 브라우저 밖에서도 동작하게 하는 환경을 의미합니다. 리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만 프로젝트를 개발하는데 필요한 주요 도구들(ex. 바벨, 웹팩)이 Node.js 기반이기 때문에 반드시 설치해야 합니다.

npm

• node 기반의 패키지를 사용하기 위해서는 npm (node package manager) 패키지가 필요합니다.

$ npm -v

Babel 바벨

• 자바스크립트 코드를 변환해주는 컴파일러로, 최신 자바스크립트 문법을 지원하는 환경에서도 최신 문법을 사용할 수 있게 해준다. 또한, 코드에서 주석을 제거하거나 코드를 압축할 때에도 사용되고 리액트에서는 JSX 문법을 사용하기 위해 바벨을 사용한다.
  바벨 설치를 위해 package.json 설치를 해야한다.

npm init -y

이후 아래와 같이 입력

npm install @babel/core @babel/cli @babel/preset-react

Webpack 웹팩

• 다양한 기능을 제공한다. 파일 내용을 기반으로 파일 이름에 해시값을 추가하여 효율적으로 브라우저를 캐싱할 때 이용할 수 있다. 또한, 사용되지 않은 코드를 제거하거나 자바스크립트를 압축하고 js에서 css, json, 텍스트 파일 등을 일반 모듈처럼 불러오기가 가능하다!
  여기서 웹팩을 사용하는 가장 큰 이유는 ! 모듈 시스템 (commonJS, ESM) 사용을 위해서이다!!!

즉 , 배경은 자바스크립트 코드가 많아지면서 하나의 파일로 관리하는데 한계가 생겼다. 그렇다고 여러개 파일을 브라우져에서 로딩하는 것은 그만큼 네트워크 비용을 치뤄야한다는 단점이 있다. 뿐만 아니라 각 파일은 서로의 스코프를 침범하지 않아야 하는데 잘못 작성할 경우 변수 충돌의 위험성도 있다.

Create React App

react를 사용하다보면 ES의 최신버전까지 사용해야 하는 경우가 존재합니다. 하지만 몇몇 브라우저에서는 특히 IE에서는 최신 버전을 지원해주지 않습니다.그렇기 때문에 webpack, babel 등과 같은 몇몇 방법들이 필요합니다.

설치 명령어

npm create-react-app <프로젝트 명>

npm start 명령어 입력시 프로젝트가 실행됩니다.