본 기사는 macOS에서의 React 환경 구축을 해설한 기사입니다.

Windows를 이용하고 있는 분은 이쪽을 봐 주세요.
React 환경 구축 【Node.js의 인스톨로부터 Create React App까지】 ~Windows편~

그 밖에도 프로그래밍 학습에 도움이 되는 정보를 발신하고 있습니다! 계정 팔로우 기다려주세요!

Node.js 환경 구축(macOS)

웹 애플리케이션 개발을 시작할 때 Node.js를 설치합니다.

이미 Node.js가 설치되어 있는지 여부는 다음 명령으로 확인할 수 있습니다. 터미널을 열고 아래 명령을 입력해 봅시다.

$ node -v

아래와 같이 설치되어 있는 Node.js의 버젼이 표시되면, 이미 인스톨이 끝났으므로, 본 파트는 읽어 주세요.

v12.16.0

Node.js 설치

아래 링크에서 Node.js를 설치합니다.

Node.js

위의 링크에 접속하면 아래와 같은 화면이 표시되므로 「권장」이라고 기재되어 있는 좌측의 버튼을 클릭해 주세요. .pkg 파일 다운로드가 시작됩니다.

※아래와 같은 화상에 있는 버전은, 2020년 7월 시점의 버전이 되어, 아래와 같은 화상에 있는 버전과는 다른 버전이 표시되고 있을 가능성은 있습니다.



.pkg 파일이 다운로드되면 파일을 실행합시다.

아래와 같은 화면이 나타나면 "계속"버튼을 클릭하십시오.



아래와 같이 사용권 계약 화면이 나타나면 "계속"버튼을 다시 클릭하십시오.



그런 다음 '동의' 버튼을 클릭합니다.



다음에 설치처를 설정합니다만, 특별한 조건이 없으면, 그대로 「인스톨」버튼을 클릭해 주세요.



그런 다음 Mac 로그인 암호를 입력하고 "소프트웨어 설치"버튼을 클릭합니다. 설치가 시작됩니다.



설치가 완료되면 아래와 같은 화면이 표시되므로 닫기 버튼을 클릭하십시오.



Node.js가 설치되었는지 확인합시다.
터미널을 열고 아래 명령을 입력합니다.

$ node -v

아래와 같이 설치한 Node.js의 버젼이 표시되면 성공입니다.

v12.18.2

이상으로 Node.js를 설치할 수있었습니다.

React 프로젝트 만들기

React 프로젝트를 만들려면 다음과 같은 명령을 실행합니다.

$ npx create-react-app <プロジェクト名>

여기서는 techpit-react-app라는 이름으로 작성해 봅시다.

$ npx create-react-app techpit-react-app

아래와 같이 표시되면 성공입니다.

$ npx create-react-app techpit-react-app

//省略

We suggest that you begin by typing:

  cd techpit-react-app
  yarn start

Happy hacking!

표시된 대로 cd 명령으로 이동합니다.

$ cd techpit-react-app

개발 서버 시작

이제 npm 명령을 사용하여 개발 서버를 시작해 보겠습니다.

npm start

http://localhost:3000/로 이동하여 다음 화면이 표시되는지 확인하십시오.



이것으로 React의 환경 구축은 종료입니다.

참고