📌 1. 프로젝트 설치
프로젝트 설치에 앞서 nodejs를 필수적으로 설치한다.
터미널에서 CRA로 Desktop(바탕화면)에 내 이름(jihye)으로 프로젝트를 설치하였다.
npx create-react-app 프로젝트이름
요렇게 되면 설치를 잘 한거다^^ㅎ
🙋⭐ 여기서 주의할 점은 프로젝트 이름을 영문 소문자로 해야한다는 것!
완료가 됬으면 cd 프로젝트이름 으로 경로를 해당 프로젝트로 지정하고 npm start 를 입력해서 확인해보자.
그러면 이렇게 브라우저를 통해 React App이 생성된다.
📌 2. 불필요한 파일 삭제
public
1. 초기 구성에서 index.html 을 제외한 파일을 삭제한다.
index.html에서
<!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" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
로 바꿔준다.
2. images 폴더를 생성한다.
public
└── images
└── profile.pngsrc
1. index.js를 제외한 파일을 삭제한다.
index.js 에서
import React from 'react';
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);로 바꿔준다.
2. assets 폴더를 생성하고 그 안에 Main 과 Login 폴더를 만든다.
src
└── assets
└── Main
└── heart.jpgcss에서는 public 폴더에 접근하는 게 불가능하므로 background-image에 활용해야 하는 이미지들은 src/assets/에서 관리하고, 절대 경로 혹은 상대 경로로 지정해주어야 한다.
3. styles 폴더 생성 공통으로 관리하기 위한 스타일은 styles 폴더 하위에서 관리한다.
src
└── pages
├── Login
│ ├── Login.js
│ └── Login.css
└── Main
├── Main.js
└── Main.css예를 들면 reset.css(기본 css속성 초기화)나 common.css(공통으로 사용하는 css속성)
4. pages 폴더 생성
src 폴더 안에 pages 폴더를 생성하고, 아래와 같이 폴더 및 파일을 생성하고, 기존에 작성했던 코드를 옮긴다.
src
└── pages
├── Login
│ ├── Login.js
│ └── Login.css
└── Main
├── Main.js
└── Main.css작성했던 파일을 화면에 그려주기 위해 index.js 파일을 열어서
Login.js와 Main.js를 import 해준다.
import React from 'react';
import ReactDOM from 'react-dom/client';
import Login from './pages/Login/Login';
import Main from './pages/Main/Main';
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />); // 초기 설정
// Main 컴포넌트 확인 시에는 root.render(<Main />);
// Login 컴포넌트 확인 시에는 root.render(<Login />);일단 프로젝트 하나 만드는 것도 엄청 버벅대고, 어찌어찌 했는데 다음에 혼자 만들어보려면 개념 정리를 해야 할 것 같다는 생각이 들었다.
