1. Node.js 설치 https://nodejs.org/en
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
2. Yarn 설치 https://classic.yarnpkg.com/en/docs/install#windows-stable
Yarn
Fast, reliable, and secure dependency management.
classic.yarnpkg.com
3. Vscode 설치 https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
4. Git Bash 실행
- 설치확인
//node.js 버전 확인
$ node --version
//yarn 버전 확인
$ yarn --version
- 파일생성
//현재 디렉토리 확인
$ pwd
//디렉토리 생성, 디렉토리 이동
$ mkdir react-diretory
$ cd react-diretory
//react-diretory에 start-react 파일 생성
$ npx create-react-app start-react
** 파일생성시 에러 날 경우
[React] 리엑트 파일 생성 에러(npx create-react-app 설치 에러)
$ npx create-react-app start-react start-react라는 파일을 생성하려는데 자꾸 이러한 에러가 날 때 두가지 방법이 있다. npm ERR! code ENOENT npm ERR! syscall lstat npm ERR! path C:\Users\aaa\AppData\Roaming\npm npm ERR! errno -4058
dbelle.tistory.com
- yarn 실행
"Yarn 으로 실행"
//start-react 파일 확인
$ ls
//start-react에 이동
$ cd start-react
//yarn 실행
$ yarn start
//yarn 종료
ctrl+c
"Vscode 로 실행"
- vscode 상단 <보기> -> <터미널>
- 터미널에 입력
> yarn start
- yarn 종료
ctrl+c -> Y
'FRONT' 카테고리의 다른 글
[React] JSX의 기본 규칙 (0) | 2023.07.17 |
---|---|
[React] 리액트 컴포넌트 만들기(기본) (0) | 2023.07.17 |
[Thymeleaf] header footer side 나누기 (타임리프 기반) (0) | 2023.07.13 |
[Thymeleaf] 타임리프 란? (0) | 2023.07.10 |
[JavaScript 자바스크립트] - 현재 날짜, 시간 가져오기 (2) | 2022.09.23 |