[Legacy][React] CRA를 이용하여 React 프로젝트 생성하기 및 기본 설정 (절대경로)

[React] CRA를 이용하여 React 프로젝트 생성하기 및 기본 설정 (절대경로)

이전 게시글에서 이어지는 내용입니다. 이전 게시글을 보지 않았다면 확인하세요. 이동하기

이번 게시글에서는 CRA(create-react-app)을 통해 react 프로젝트를 생성하고 가장 기본적인 설정 하는 방법을 알아보겠습니다.

CRA (create-react-app)

우선 CRA 명령어를 사용하기 전, 항상 최신 CRA를 사용하고 싶은 경우 npx가 필요합니다. npx가 설치되어 있지 않은 경우 설치를 해주세요. 명령어 : yarn global add npx or npm install npx -g

설치가 다 되었다면 프로젝트를 생성할 폴더로 이동한 후 명령어 npx create-react-app 프로젝트명 을 입력해주시면 됩니다. 저는 npx create-react-app react-study 를 입력하여 프로젝트를 생성하였습니다.

프로젝트가 생성되었다면 생성한 프로젝트로 이동하여 vscode로 해당 프로젝트를 실행해주세요. 실행한 경우 아래 이미지와 같이 프로젝트 폴더구조가 되어 있을텐데 필요없는 항목을 모두 삭제해줍니다. (이미지에 선택되어 있는 6개 항목입니다. App.css App.test.js index.css logo.svg reportWebVitals.js setupTests.js)

이후 App.js 파일과 index.js 파일의 내용을 변경해주어야 합니다. 우선 App.js 파일을 변경해줍니다.

// App.js
const App = () => {
  return <div>React 뿌시기</div>;
};
export default App;

이후 index.js 파일의 내용을 변경해줍니다.

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

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

모두 변경하고 명령어 yarn start 를 입력하면 아래 이미지와 같이 React 프로젝트가 실행될 것입니다. 벌써 첫번째 프로젝트를 생성하였습니다. 이후 여기에 몇 가지만 더 하면 이쁜 프로젝트가 완성될 것입니다.

지금까지는 프로젝트 정리를 해주었고, 이제 간단한 절대경로 설정을 해주어야 합니다. 해당 설정하는 방법을 알아보겠습니다.

React 절대경로 설정하기

절대경로를 src로 맞추어 줄 것입니다. 이 방법은 매우 간단합니다. 해당 게시글을 참고하셔서 설정하시면 됩니다. 이동하기

절대경로를 src로 맞추는 이유는 해당 작업을 하지 않으면 상대경로를 표현하여 찾아가야 하는데 절대경로를 src로 맞추어주면 더 편하게 import를 할 수 있습니다. 이건 이후 개발하면서 눈으로 확인하시면 됩니다.

 

이번 게시글은 여기까지입니다. 잘 되지 않는 경우 해당 github 주소에 들어가셔서 자신의 코드와 비교해보세요. 이동하기

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다.