BelieveCom

요즘 많은 사람들이 Web에 사용하는 라이브러리 리액트(React) 설치 방법을 알아보겠습니다. 리액트는(React) 빠른 응답 속도로 프론트엔드(Front-End)에 많이 사용됩니다.

리액트(React)를 사용하기 위해서는 먼저 가장 기본이되는 Node.js를 설치해야 합니다.

http://www.nodejs.org 로 이동해서 최신 LTS 버전을 다운로드해주세요.

다운로드된 Node.js 설치 파일을 실행하면 Node.js 및 npm Package를 설치할 수 있습니다.

npm 버전을 확인하기 위해서 cmd 상에서 npm -v를 입력합니다. 버전은 8.1.2입니다.

이제 리액트(React)를 편집하기 위해서 Visual Studio Code를 설치합니다. 

https://code.visualstudio.com 로 이동해서 실행 파일을 다운로드해주세요.

다운로드 버튼을 클릭하면 페이지가 이동되면서 셋업 파일을 다운로드할 수 있습니다.

Visual Studio Code 설치 파일을 더블 클릭해서 설치를 실행합니다.

설치가 완료되면 Visual Studio Code가 실행됩니다. 소스 파일만 수정이 필요하기 때문에 별도 Add-in 설치는 필요 없습니다. 이제 리액트(React)를 사용하기 위한 기본 준비가 완료되었습니다.

npm 명령어를 사용해서 리액트(React) create-react-app을 설치해줍니다.

create-react-app 명령어를 사용해서 리액트(React) 프로젝트 파일을 자동으로 생성할 수 있습니다.

이제 리액트(React)를 실행하기 위한 폴더를 만들어 줍니다. 하위 폴더로 프로젝트가 생성되기 때문에 공통 이름으로 폴더를 만들면 좋습니다.

만들어진 폴더로 이동해서 명령어 창에서 cmd를 입력합니다. cmd 기본 경로가 만들어진 폴더로 이동합니다.

create-react-app react-start를 입력해서 프로젝트를 생성합니다. 명령어 뒤에 프로젝트 이름을 입력하는데 소문자만 프로젝트 생성이 가능합니다.

create-react-app을 실행하면 천 개 넘는 파일을 다운로드하면서 프로젝트 파일이 생성됩니다. 생각보다 많이 오래걸립니다.

폴더로 이동하면 node_modules, public, src 폴더를 확인할 수 있습니다. 소스 수정은 src폴더에서만 수정하면 됩니다.

소스를 확인하기 위해서 cmd 창에서 code . 를 입력하면 Visual Studio code가 실행되면서 프로젝트 파일을 로드합니다. EXPLORER에서 리액트(React) 프로젝트 파일을 확인할 수 있습니다.

이제 생성된 프로젝트 파일을 실행해보겠습니다. cmd로 생성된 프로젝트 경로로 이동 후 npm start를 입력하면 리액트(React) 코드가 컴파일되면서 설정된 기본 브라우저로 실행됩니다.

리액트(React)는 javaScript 기반이기 때문에 보안 액세스 허용을 실행해야 합니다.

브라우저(Browser)가 실행되면서 기본 리액트(React) 실행 화면을 확인할 수 있습니다.

실행을 종료하기 위해서는 cmd 창에서 Ctrl+C를 두 번 눌러주면 작업 끝내기 메시지를 확인할 수 있습니다. 여기서 'Y'를 입력하면 리액트(React)가 종료됩니다.

리액트(React) 설치는 조금 복잡하지만 프래임워크 처럼 사용하는 게 아니기 때문에 쉽게 설치할 수 있습니다. 프론트엔드(Front-end)에 관심 있다면 지금 바로 설치해보세요.

감사합니다.