on&on
[React] create-react-app에서 리액트 기본 파일만 설치하기 (cra-template-basic-react) 본문
npx create-react-app 사용 시, 기본 파일만 설치하기
처음 React를 사용하는 사람이라면 자주 만나게 되는 명령어인 npx create-react-app
npx create-react-app my-app명령어를 통해 설치를 하고 나면 기본적인 React 프로젝트 형태가 갖춰진다.
처음 설치하는 사람이라면 폴더 목록을 보고 당황할 것이 당연한 파일 목록....
너무 많은 파일이 생성된다... 이 중에 사용하지 않는 파일이 사용하는 파일보다 더 많다...
실질적으로 사용하는 index.html, index.js, App.js 코드를 바꾸고, 다른 파일을 삭제하는 데 시간이 너무 오래 걸린다.
그래서 create react app에서 제공하는 사용자가 직접 커스텀하고 템플릿을 만들 수 있는 Custom Templates 기능을 활용해서 리액트를 사용하는 사람들이 간편하게 사용할 수 있는 모듈을 제작했다.
리액트 기본 파일만 설치하기
powershell 명령어
npx create-react-app {생성할 폴더명} 뒤에 --template basic-react를 함께 적으면 basic-react라는 템플릿의 구조로 설치된다.
$npx create-react-app file_name --template basic-react
폴더 구조
public과 src에서 사용하지 않는 파일은 모두 제외하고 index.html, App.js, index.js만 설치되도록 설정했기 때문에 기본적인 파일만 설치된다.
my-app
┣ node_modules
┃ ┗ ...
┣ public
┃ ┗ index.html
┣ src
┃ ┣ App.js
┃ ┗ index.js
┣ README.md
┣ package-lock.json
┗ package.json파일 내에 코드도 사용자가 수정하기에 간편한 형태로 설정했다.
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>index.js
import React from "react";
// import ReactDOM from 'react-dom'; // 구버전
import { createRoot } from "react-dom/client";
import App from "./App";
const container = document.getElementById("root");
const root = createRoot(container);
root.render(<App />);App.js
function App() {
return (
<div>
hello world
</div>
);
}
export default App;App.js에서 필요한 부분만 수정하면 된다.
그동안 설치하고 삭제하는 과정이 귀찮았다면 이 친구로 간편하게 리액트 시작하기🥹
실행 명령어도 npx create-react-app와 동일하게 사용 가능하다.
각 기능에 대한 설명은 여기에서 확인할 수 있다.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},🚨 하지만 App.test.js도 (TDD를 하지 않는 경우 필요하지 않기 때문에) 삭제했기 때문에 test를 할 것이라면 따로 파일을 추가해야 한다는 점은 유의해야 한다...
우하핫 그럼 다들 편안한 코딩하세요 💻💪
✔️ 사용하는 데 문제가 있거나... 수정할 부분이 필요해 보인다면 피드백 적극 반영 예정 !
cra-template-basic-react
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).. Latest version: 1.0.1, last published: 7 days ago. Start using cra-template-basic-react in your project by running `npm i cra-template-basic-react`. There
www.npmjs.com
'React' 카테고리의 다른 글
| [React] react-hook-form의 setFocus, reset 활용하기 (0) | 2023.02.04 |
|---|---|
| [React] styled-components로 커스텀한 버튼 Link에 적용하기 (0) | 2023.02.01 |
| [React] Create React App에서 제공하는 Custom Templates 활용하기 (0) | 2022.12.08 |
| [React] props, defaultProps, propTypes의 정의, 꼭 사용해야 하나? (0) | 2022.11.30 |
| [React] Each child in a list should have a unique "key" prop 에러, key 값 설정하기 (1) | 2022.11.30 |
