React는 자바스크립트 라이브러리로 오직 View만 신경쓰는 라이브러리 입니다.
React는 DOM을 복사해서 Virtual DOM을 만들고 변화가 생겼을 때 페이지 전체를 렌더링 하지않고, 변화한 부분만 실제 DOM에 적용하는 방식을 사용합니다.
Babel, Webpack등을 사용하기 위해 NodeJS와 npm 설치가 필요합니다.
아래 URL에서 다운 가능합니다.
https://nodejs.org/ko/download/
설치를 완료하고 버전을 확인합니다.
node -v
명령과 npm -v
명령으로 node.js와 npm 버전 확인이 가능합니다.
npm은 의존하는 라이브러리 개수가 많으면 속도가 매우 저하 되기때문에 yarn 도구도 설치해줍니다.
아래 URL에서 windows용 다운 가능합니다.
https://yarnpkg.com/en/docs/install#windows-stable
yarn 역시 yarn -v
명령으로 버전확인이 가능합니다.
해당 명령이 실행되지 않을 경우
yarn이 설치되어있는 경로 \bin폴더 까지 환경변수를 잡아주시면 됩니다.
Visual Studio Code는 에디터 이지만, javascript 외에도 확장 프로그램을 설치하면 C, Java, Spring boot 등 다양한 언어도 사용 가능해서 간편합니다.
아래 URL에서 설치 다운 가능 합니다.
https://code.visualstudio.com/download
npm, yarn 도구 둘다 설치 가능합니다.
저는 yarn을 이용해서 전역으로 설치했습니다.
터미널에 다음과 같이 입력해서 설치합니다.
yarn global add create-react-app
create-react-app 도구를 이용해서 프로젝트를 생성합니다.
터미널에 다음과 같이 입력해서 설치합니다.
create-react-app 프로젝트 명
프로젝트명으로 대문자는 사용이 불가합니다.
작업 환경에 따라서 1분~3분정도 소요됩니다.
프로젝트가 생성되었으면, 해당 프로젝트로 이동 후
터미널창에 다음과 같이 입력하면 yarn start
빌드후 로컬 서버가 실행됩니다.
로컬서버는 기본으로 3000번으로 열립니다.
파일이 수정될때마다 자동으로 다시 빌드 페이지를 리로드합니다.