[React] 프론트 프로젝트 생성하기

 

cd pcompass_front
brew install yarn
yarn global add create-react-app
create-react-app <프로젝트명>

cd <프로젝트명>
yarn init //package.json 파일 만들기
yarn start //서버 실행하기

 

이까지 해주면 아래 화면이 뜨며 로컬에서 프론트 서버가 실행된다.

 

그리고 vscode에서 언어는 javascript를 선택한 후, ctrl + ~ 를 눌러주면 터미널이 실행된다.

 

기본 세팅되어있는 것에서 삭제할 것을 삭제하고 다음과 같이 초기세팅 상태를 만들어준다.

---

[App.js]

import React from 'react';
import { BrowserRouter as Router} from 'react-router-dom';

function App() {
  return (
< Router></Router>
  );
}

export default App;

---

[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(
  <>
    <App />
  </>
);

 

---

필요한 패키지 설치하기

npm install react-router-dom
npm start

 

이제 npm start 명령어를 실행해보면 리액트 로고가 없어진 흰 하면이 나오고 정상적으로 서버가 동작하는 것을 볼 수 있다.

이제 본격적으로 프론트 작업을 수행하면 된다.