개발환경 정보
-
Visual Studio Code
![](https://velog.velcdn.com/images/i_am_heeeun/post/00632e02-cace-4bca-8539-92e222639748/image.jpeg)
-
React
![](https://velog.velcdn.com/images/i_am_heeeun/post/b5a9739b-110d-46d3-9bfd-a95406406dec/image.png)
-
Node.js
![](https://velog.velcdn.com/images/i_am_heeeun/post/3aaa4859-be92-4fb3-9ba4-30150c5f9828/image.png)
- yarn
- Node.js 자바스크립트 런타임 환경을 위해 페이스북이 2016년 개발한 소프트웨어 패키지 시스템
![](https://velog.velcdn.com/images/i_am_heeeun/post/a64b9e05-b7e9-4822-927f-2b795c0458c3/image.png)
설치시작~!
1. Node.js
1.1. 구글에 Node.js 검색한 후 홈페이지 들어가서 LTS버전 다운받기
클릭하여 Node.js홈페이지로 이동
![](https://velog.velcdn.com/images/i_am_heeeun/post/e97a39ed-2e9e-4796-a51a-e8cc6e427642/image.png)
1.2. 설치파일을 클릭하여 설치해주기
![](https://velog.velcdn.com/images/i_am_heeeun/post/bef48e0a-ca3d-41fc-815e-8e283a91cce1/image.png)
계속 Continue 눌러주면 설치 끝!!
2. Visual Studio Code
2.1. 구글에 Visual Studio Code를 검색한 후 홈페이지 들어가서 Download클릭
클릭하여 공식홈페이지로 이동
![](https://velog.velcdn.com/images/i_am_heeeun/post/1bd26685-5c7a-42ac-a2e0-7dcf01decaa1/image.png)
2.2. 다운받은 파일을 클릭하면 자동으로 visual studio code가 다운받아진다.
![](https://velog.velcdn.com/images/i_am_heeeun/post/1cc9feba-0736-4453-b202-8f9838f3c32f/image.png)
2.3. 자신이 만들고 싶은 프로젝트 위치에 폴더 생성
![](https://velog.velcdn.com/images/i_am_heeeun/post/3b4a07d6-a26b-4cf1-84d0-9560d1379c4f/image.png)
2.4. Visual Studio Code를 실행
파일- Open Folder를 선택한 후 내가 만든 폴더를 연다.
![](https://velog.velcdn.com/images/i_am_heeeun/post/0717dd20-39f4-4bf9-b753-5361febe2c55/image.png)
4. Yarn
4.1. brew를 이용해서 yarn 다운받기
brew install yarn
![](https://velog.velcdn.com/images/i_am_heeeun/post/6359faa0-cdc1-4770-bb9a-054cd059e164/image.png)
끝!
5. React 프로젝트 파일생성
5.1. 리액트 프로젝트에 필요한 패키지들을 묶어 생성해주는 도구는 create-react-app를 다운받는다
yarn global add create-react-app
5.2. 터미널에서 create-react-app "프로젝트명" 명령어를 입력하여 프로젝트 생성
create-react-app study
![](https://velog.velcdn.com/images/i_am_heeeun/post/2f3cea09-1581-464d-8931-63aefc9207a8/image.png)
근데 package.json파일을 찾을 수 없다는 에러가 발생하여 구글링 해봤는데 yarn init 해주면 해결된다고 한다.
![](https://velog.velcdn.com/images/i_am_heeeun/post/08a7eeb9-6be6-424f-810d-6ce802d539e4/image.png)
질문에 열심히 답하면 package.json을 만들어줌
다시 create-react-app study를 입력하면 프로젝트가 생성된다.
![](https://velog.velcdn.com/images/i_am_heeeun/post/feb083a2-0bba-4c3c-9296-d2d0c8f1439a/image.png)
6. 실행
6.1. 터미널에 yarn start를 하면 실행이 잘되는걸 볼수있다.
yarn start
![](https://velog.velcdn.com/images/i_am_heeeun/post/218b9621-2315-4b94-b314-818e2c74565c/image.png)
끝~!!!