1) CRA란?
- Create React App의 약자로, Javascript 기반의 언어인 React App을 뜻한다.
(1) CRA 초기 셋팅 방법
-
1) 터미널 켜기
사진과 같이 터미널을 켜서 터미널의 상태를 확인해준다. -
1-1) 프로젝트 폴더 생성하기
mkdir [생성하고 싶은 프로젝트 폴더 이름]
예)
mkdir react-practice-
mkdir 명령어를 이용해 생성하고 싶은 폴더를 생성시켜준다.
다음 사진과 같이 Desktop에 react-practice라는 프로젝트 폴더가 생성됨을 확인할수 있다. (단 cd Desktop 으로 먼저 접근한 뒤에 폴더를 생성해야 한다)
(빠른 이해를 위해 사진을 첨부하였습니다.😊) -
1-2) 생성한 폴더에 react-app 설치하기
$ npx create-react-app [프로젝트명]
예)
npx create-react-app react-practice-
터미널에서 생성한 프로젝트 폴더에 진입하여, React를 설치하고자 하는 폴더에 있는지 확인한 후, 아래와 같은 명령어를 입력하여 리액트 프로젝트를 설치해준다.
-
🚨 주의사항
프로젝트 이름은 대문자로 작성하거나 ~'!()*^등의 일부 특수문자를 포함하면 에러가 생기기 때문에 소문자로 작성하여 React 프로젝트를 설치해준다. -
1-3) router, sass(scss) : Third-Party Library 설치하기
- Third-Party Library 설치를 위해 생성한 프로젝트 폴더에 진입해준다.
cd [프로젝트명]- Router - (Routing) : SPA(Single Page Application) 페이지 이동 기능을 구현하는 라우팅 기능을 추가하기 위해, 많이 사용되고 있는 react-router-dom을 설치한다.
npx install react-router-dom- sass(scss) : css와 똑같은 스타일링 전처리기로 css에서 구현하기 어려운 기능을 좀더 섬세하게 작업할수 있는 기능을 추가하기 위해 sass를 설치한다.
$ npm install sass2) CRA 초기 폴더 및 파일 구성
- CRA를 통해 프로젝트를 설치하면 데모를 위한 기본 파일이 존재한다. 이때, CRA에서 필수적으로 필요한 public 폴더의 index.html, src 폴더의 index.js, package.json 를 제외하고, 나머지 파일은 데모를 위한 파일이므로 삭제가 가능하며, 이외에 폴더 및 파일은 프로젝트의 기획에 맞게 새롭게 구성할 수 있다. (해당 페이지는 CRA에서 기본으로 초기 셋팅된 파일과 폴더에 대한 내용을 설명하는 페이지 이므로 Git 파일은 밑에 있는 경로로 들어가가면 확인할 수 있다.)
Git 파일 & 경로 종류에 대한 내용은 여기를 클릭 해주세요.
(2-1) node_modules, .gitignore, package.json
1) node_modules
- npm으로 다운받은 패키지들의 소스 코드가 존재하는 폴더로, CRA에서는 기본 세팅 때 개발 환경에 필요한 패키지를 설치해주기 때문에 이미 여러 가지 패키지 폴더가 존재한다. 추가로 패키지를 설치할 때의 실제 코드는 node_modules 폴더 하위에 생성된다.
2) .gitignore
- 용량, 보안 등 여러가지 문제로 Github에 올리면 안되는 파일을 추가할 수 있는 파일이며, .gitignore 파일에 추가된 폴더와 파일은 Git으로 추적하지 않는다.
3) package.json
- CRA 기본 패키지 외에 추가로 설치된 라이브러리 혹은 패키지의 종류, 버전 등의 정보가 기록되는 파일로, 모든 프로젝트마다 package.json파일은 하나씩 존재한다. 만일 외부 라이브러리와 패키지를 npm으로 설치하면, package.json의 dependencies에 라이브러리 혹은 패키지의 정보가 자동으로 추가된다.
예시)
{
"name": "wereads",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.20.0",
"react-scripts": "5.0.1",
"sass": "^1.69.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-prettier": "^5.0.1",
"prettier": "^3.1.0"
}
}(1) dependencies : npm을 통해서 설치한 모든 패키지 리스트와 버전 확인이 가능하며, 관련된 패키지의 실제 코드는node_modules 폴더에 존재한다.
(2) scripts : 리액트 프로젝트를 실행하기 위해서 사용할 수 있는 명령어를 관리한다. 예를 들어 로컬 서버를 띄우기 위해서 npm (run) start 명령어를 사용하는데, start라는 개발 모드를 실행하기 위한 명령어를 통해서 개발 서버를 열게 해준다.
(3) package-lock.json : npm을 사용해서 패키지를 설치하거나 업데이트하면 자동으로 생성되거나 수정되는 파일이다. 이 파일 안에는 설치된 패키지의 정확한 버전이 명시되어 있다.
(2-2) index.html, index.js, App.js
1) public/index.html
- React는 MPA 방식과 다르게 SPA(Single Page Application) 방식으로 개발하기 때문에, 하나의 index.html이 존재하며, 웹 브라우저에 보여지는 파일을 뜻한다. 또한, index.html 파일에서 직접 수정하고 제작하는 것이 아니라, index.js 파일을 통해 index.html 파일의 id가 root인 div 내부에 코드를 추가하여 화면에 그려지게 됩니다.
예시)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>참고사항)
- 우리가 프로젝트를 개발하고 개발한 프로젝트를 CRA로 배포했을 때 실제 서버에 배포될 수 있도록 관리하는 폴더가 public 폴더이다.
- 예를 들어서,
/images/logo.jpg파일을 만들어두면, 서버에 접속해서 해당 파일에 절대경로로 접근할 수 있게된다. 실제로http://localhost:3000/images/logo.jpg를 브라우저 주소창에 입력하면 브라우저상에서 해당 이미지를 볼 수 있게되는 것이다.
2) src/index.js
- React의 시작점인 Entry Point의 시점으로 시작되는 파일이다. 주로 index.js를 통해 Router와 연결해서 SPA로 웹페이지를 보여줄 수 있도록 구성할 수 있는 것이다.
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root')); // 1
root.render(<App />); // 2(1) index.js에서는 document.getElementById로 index.html안에 id가 root인 요소에 접근한다
(2) html 요소, 또는 리액트 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering)이라고 하는데 index.js에서 render()안에 App 컴포넌트가 렌더링 되어 보여준다.
초기셋팅시 App 컴포넌트로 셋팅되어 있지만 Router.js로 연결할 경우 App 컴포넌트 대신 Router 컴포넌트로 연결해 랜더링 할 수 있다.
3) App.js
- 웹 애플리케이션의 첫 화면에 그려지고 있는 파일로 데모를 위한 초기 컴포넌트이다.
