728x90
Create React App
boilerplate
React 프로젝트 개발에 필수요소를 자동으로 구성하는 방법
완제품을 구매한다.
📌 CRA 프로젝트 세팅
$ ls #현재 내가 위치하고 있는 곳이 어디인지 확인해보세요.
$ cd 폴더이름 #리액트 프로젝트를 생성하고 싶은 폴더로 들어갑니다.
$ yarn create react-app week-1 #프로젝트 생성!
오류 발생...
$ yarn create react-app week-2
yarn create v1.22.19
[1/4] Resolving packages...
warning create-react-app > tar-pack > tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-react-app@5.0.1" with binaries:
- create-react-app
Creating a new React app in C:\Users\xxxxh\OneDrive\바탕 화면\react\week-2.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
'yarnpkg' is not recognized as an internal or external command,
operable program or batch file.
Aborting installation.
yarnpkg add --exact react react-dom react-scripts cra-template --cwd C:\Users\xxxxh\OneDrive\바탕 화면\react\week-2 has failed.
Deleting generated file... package.json
Deleting week-2/ from C:\Users\xxxxh\OneDrive\바탕 화면\react
Done.
error Command failed.
Exit code: 1
Command: C:\Users\xxxxh\AppData\Local\Yarn\bin\create-react-app
Arguments: week-2
Directory: C:\Users\xxxxh\OneDrive\바탕 화면\react
Output:
info Visit https://yarnpkg.com/en/docs/cli/create for documentation about this command.
📌 npx로 실행
$ npx create-react-app@latest week-1
성공!!!
Creating a new React app in C:\Users\xxxxh\OneDrive\바탕 화면\react\week-1.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
added 1434 packages in 38s
234 packages are looking for funding
run `npm fund` for details
Initialized a git repository.
Installing template dependencies using npm...
added 62 packages, and changed 1 package in 5s
234 packages are looking for funding
run `npm fund` for details
Removing template package using npm...
removed 1 package, and audited 1496 packages in 2s
234 packages are looking for funding
run `npm fund` for details
6 high severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
Created git commit.
Success! Created week-1 at C:\Users\xxxxh\OneDrive\바탕 화면\react\week-1
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd week-1
npm start
Happy hacking!
📌 서버 구동
$ cd week-1
$ yarn start
생성파일 살펴보기
📄 public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
...
<div id="root"></div>
</body>
</html>SEO관련 내용, 엔진 로봇은 이 id root로 리액트 찾음.
public/index.html → src/index.js → src/App.js
즉, 우리의 Play Ground는 src/App.js !!
📌 상대경로
📄 src/App.js
import './App.css'; // relative path 상대경로
root 경로에 mkdir jsconfig.json
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
📄 src/App.js
import 'App.css';'JavaScript > React' 카테고리의 다른 글
| State (0) | 2023.06.06 |
|---|---|
| JSX, Props (2) | 2023.06.04 |
| React Component (0) | 2023.06.04 |
| React 개발 환경 세팅 (0) | 2023.06.03 |
| React 소개 및 JavaScript 문법 (0) | 2023.06.03 |
