본 글은 M1, macOS Monterey 12.0.1을 기준으로 작성되었습니다.
리액트는 다른 JavaScript 라이브러리처럼 스크립트 태그를 추가하여 바로 사용할 수도 있습니다.
하지만 본 글에서는 로컬에서 빌드할 수 있도록 개발환경을 구축해보겠습니다.
1. Node.js 설치하기
Node.js는 웹 브라우저를 통하지 않고 일반 실행파일처럼 JavaScript를 실행할 수 있도록 하는 프로그램입니다.
리액트로 개발한 소스 코드를 빌드하고 로컬 서버로 띄우는 프로그램인 create-react-app이 JavaScript로 작성되어 있어 이를 설치해야 합니다.
Node.js를 설치하는 법은 링크에서 보실 수 있습니다.
2. react-create-app 실행하기
react-create-app은 react 개발 환경을 설정하고, 최신 JavaScript를 사용하게 해주며, 좋은 개발 경험과 프로덕션 앱 최적화를 해주는 facebook에서 개발한 툴체인입니다.
쉽게 말하면 react 프로젝트를 생성해주는 패키지입니다. 프로젝트가 생성된 후에는 node.js의 명령어를 통해 프로젝트를 제어하기 때문에 사실 이 패키지는 리액트 프로젝트를 생성할 때만 필요합니다. 그래서 우리는 npx를 사용하여 react-create-app을 실행할 것입니다. 왜 이럴 때 npx를 사용하는지는 다음에 다루도록 하겠습니다.
터미널에서 프로젝트를 생성하려는 디렉토리로 이동한 후 아래 명령어를 통해 프로젝트를 생성할 수 있습니다.
npx react-create-app ${프로젝트명}프로젝트를 생성한 후 프로젝트명으로 된 디렉토리로 들어가 보면 여러 파일과 디렉토리가 생성된 것을 확인할 수 있습니다.
프로젝트 디렉토리에서 아래의 명령어를 입력하면 프로젝트를 빌드하여 웹에서 디버깅해볼 수 있습니다.
- yarn을 설치한 경우
yarn start- yarn을 설치하지 않은 경우
npm start하지만 이렇게 빌드할 경우 최적화가 되어있지 않기 때문에, 웹서버에 올리기 위해서는 아래 명령어를 통해 따로 빌드해야 합니다.
- yarn을 설치한 경우
yarn build또는
yarn run build- yarn을 설치하지 않은 경우
npm run build빌드하면 build 디렉토리에 빌드된 파일이 위치하게 되며, 이 파일을 그대로 웹서버에 올리면 서버에서 앱이 동작하게 됩니다.
