『Server 03 』 [React] 프로젝트 생성 + 불필요한 파일 정리

☂️ 개요

SERVER UI를 책임질 React를 생성하자.

create-react-app으로 프로젝트를 생성하고 불필요한 파일을 정리해볼 것이다.
 

💻 React 프로젝트 생성 

프로젝트 생성에 앞서 node와 npm이 설치되어있는지 확인한다. (실행이 안된다면 node js를 설치하면 된다.)

node -v
npm -v

 
npx create-react-app 앱이름 으로 프로젝트를 생성한다. (앱이름의 폴더명이 생성된다.)

npx create-react-app 0913

성공적으로 실행되었다면 앱 이름으로 된 폴더가 생성된다. 해당 폴더로 들어가서 npm start 또는 yarn start로 실행할 수 있다.

cd 0913
npm start

다음과 같이 나오면 성공!!

❌ 불필요한 파일 제거

기본 폴더 구조는 다음과 같은데, 정리를 해보자! (폴더와 파일이 많아지면 관리하기 어렵고 복잡하기 때문!)

public 폴더에 있는 index.html을 제외하고 다 삭제한다.
src 폴더는 App.js, index.js 를 제외한 나머지 파일들을 삭제한다.
(나는 App.js를 라우터 개념으로 사용해서 삭제 안하는데, 따로 구성할 분은 삭제해도 된다.)

 
깔끔하게 정리됐다.

 
 

✔️ 코드 정리

 
파일을 지워서 npm start로 실행 시키면 에러가 날 것이다. 따라서 소스코드를 수정해보자!~

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

//App.js
function App() {
  return (
    <div className="App">
      NANI WORLD
    </div>
  );
}

export default App;

수정 후 다시 실행 시키면 정상적으로 나온다!~

 
 

☂️ 마무리

 
이렇게 프론트앤드를 책임질 React 초기 구성이 끝났다. 😉