250x250
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- html
- reactjs code snippets
- 라이브러리
- gsap
- scrolly
- 네트워킹
- 데이터통신
- ArrayList
- 한빛아카데미
- 스크롤
- Algorithm
- 자바스크립트
- 알고리즘
- 백준
- 이벤트
- 자바
- prettier-code formatter
- JLPT
- JavaScript
- Node.js
- React
- quizlet
- ScrollToPlugin
- java
- 연습문제
- 함수
- 초연결사회의 데이터통신과 네트워킹
- 단어장
- 초연결 사회의 데이터통신과 네트워킹
- 일본어
Archives
- Today
- Total
umilove98의 블로그
리액트 프로젝트 생성하기 #4 create-react-app 본문
반응형
create-react-app은 리액트 프로젝트 생성 시 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 바로 프로젝트 작업 환경을 구축해 주는 도구입니다.
터미널을 열고 프로젝트를 만들고 싶은 디렉터리로 이동합니다.
저는 바탕화면에 react라는 폴더를 생성한 후 이곳에 프로젝트를 생성해 보기로 했어요
그 후 명령어를 입력하여 리액트 프로젝트를 생성합니다.
yarn create react-app hello-react
여기서 hello-react는 자신이 원하는 프로젝트 이름을 써 주면 됩니다
그러면 이거 뭐 잘못된 거 아닌가 싶은 느낌으로 엄청나게 긴 메시지들이 출력되면서 프로젝트가 생성됩니다.
저는 총 51.87초가 걸렸네요
이렇게 생성이 완료 된 후에는 프로젝트 디렉터리로 이동 후 리액트 개발 전용 서버를 구동하겠습니다.
cd hello-react
yarn start
잠시 기다리면
터미널 창이 이렇게 바뀌면서 브라우저가 자동으로 열리며 리액트 페이지가 나옵니다.
만약 열리지 않는다면 상기 이미지에 나와있는 대로
http://localhost:3000 을 주소창에 입력하여 열어주세요
드디어 리액트 프로젝트 생성이 끝났네요 ㅎㅎ
반응형
'language,framework,library > React' 카테고리의 다른 글
리액트 프로젝트 생성하기 #3 yarn 설치 (0) | 2022.09.30 |
---|---|
리액트 프로젝트 생성하기 #2 VS Code 에디터 설치 (1) | 2022.09.30 |
리액트 프로젝트 생성하기 #1 Node.js 설치 (1) | 2022.09.30 |