출처 : 소플의 처음 만난 리액트
# create-react-app
= CRA
React로 웹 애플리케이션을 개발하는 데 필요한 모든
설정이 되어 있는 상태로 프로젝트를 생성해 주는 도구입니다
create-react-app을 실행하기 위해서는,
이전 포스트에서 개발환경을 설정할 때 설치했던 Node.js와 npm이 필요합니다
+VS Code를 설치하지 않은 분들은 꼭 VS Code까지 설치하시기 바랍니다
# npx
create-react-app은 npx를 명령어를 이용해서 실행할 수 있습니다.
npx 명령어는 npx = execute npm package binaries,
npm 패키지를 설치한 이후에 곧바로 실행 - execute 까지 해주는 명령어입니다.
패키지를 정해진 위치에 설치하고 또 찾아서 실행하려면 번거롭기 때문에 간편하게 한번에 처리하기 위해 사용하는 것이죠.
새로운 react application을 만들기 위해서는 다음과 같이 입력하고 뒤에 생성할 프로젝트의 이름을 넣어 주면 됩니다.
# 사용법
npx create-react-app <your-project-name>
#실제 사용 예제
npx create-react-app my-appVS Code 터미널에서 코드를 입력하고 실행합니다
❗ 실행 후 no such file or directory 에러가 발생할 경우 해결방법 :
파일 혹은 디렉토리가 없어서이기 때문에 해당 위치에
npm 디렉토리를 만들어주면 에러를 해결할 수 있습니다. (make directory)mkdir "C:\Users\[user_name]\AppData\Roaming\npm"[user_name] 부분에 본인의 컴퓨터 이름을 넣으면 됩니다.
이 방법을 통해 해당 경로에 npm 디렉토리를 만들고나서
create-react-app 커맨드가 정상적으로 실행되는지 확인합니다.
명령어를 실행 했을 때 create-react 패키지를 설치해야한다고 물어보면
y를 입력하여 계속 진행하면 됩니다.
이후에 이것저것 필요한 패키지를 자동으로 설치하고
아래와 같이 react web application 이 생성된 것을 확인할 수 있습니다.
프로젝트 생성이 완료되면 위에 보이는 것처럼 application을 실행할 수 있는 명령어를 친절하게 안내해줍니다.
해당 명령어들을 따로 살펴보도록 하겠습니다.
# 실행하기
# 경로 변경 (change directory)
cd my-app
# 애플리케이션 실행
npm start> cd my-app
첫번째 명령인 cd my-app 에서 cd 는 change directory 의 약자로
현재 커맨드라인 도구가 위치한 경로를 변경하는 역할을 합니다.
Mac의 finder나 Windows의 탐색기에 비유하자면
폴더를 더블클릭해서 안으로 들어가거나, 뒤로가기 버튼을 눌러서 폴더를 빠져나오는 역할을 하는 것이죠.
> npm start
그리고 npm start 는 실제로 애플리케이션을 실행시키는 명령어입니다.
먼저
cd명령어를 사용해서 우리가 생성한 my-app 프로젝트 폴더 안으로 들어가고, 이후에npm start명령어를 통해 react 애플리케이션을 실행하게됩니다.
실행화면
명령어를 실행하고 조금 기다리면
자동으로 브라우저가 열리며 localhost 3000번 포트( http://localhost:3000/ )로 접속하게 됩니다. 여기서 localhost 라는 것은 현재 내가 사용하고 있는 컴퓨터를 의미합니다.
현재 react 애플리케이션이 로컬 개발 환경에서 실행된 것이라고 보면 됩니다. 화면과 같이 react 로고가 나오는 것을 볼 수가 있습니다. 
📍정리
이렇게 create-react-app 을 사용해서 간단하게 react 웹 애플리케이션을 생성하고 실행해보았습니다.
create-react-app: react 애플리케이션을 생성해주는 명령어npx: npm 패키지를 설치하고 execute 해주는 명령어npx create-react-app my-app
cd my-app: 생성한 my-app 으로 이동하는 명령어npm start: react 애플리케이션을 실행해주는 명령어
더 알아보기
create-react-app 에 대해서 더 자세한 내용이 궁금한 분들은
https://reactjs.org/docs/create-a-new-react-app.html
공식 문서 링크를 참고하시기 바랍니다.
해당 링크에 접속하면 react 앱을 생성하는 방법에 대한 자세한 내용들을 살펴볼 수 있습니다.
