create-react-app
커맨드를 이용해 리액트 프로젝트를 생성하는 방법에 대해 정리하고자 한다.
crate-react-app 커맨드란?
create-react-app
커맨드는 리액트 프로젝트에 필요한 기본 설정들을 자동으로 생성해주는 커맨드이다. 리액트 어플리케이션을 만드는데 필요한 많은 script와 기본 사전 설정들을 자동으로 만들어준다.
create-react-app
커맨드를 통해 리액트 프로젝트를 생성하면 아래와 같은 기본적인 기능들을 제공한다.
- 개발 서버 접근
- 자동 새로고침
- 어플리케이션 내 필요한 기본 script 및 setting 자동 생성
위에 적은 것 이외에도 많은 기능들을 제공한다.
node.js 설치
create-react-app
커맨드를 사용하기 위해서는 node.js를 설치해야 한다.
node.js는 아래 사이트에서 다운받을 수 있다.
설치 파일을 다운받은 후 설치가 완료되면 터미널(cmd 혹은 powershell)을 열어 node -v
커맨드가 정상적으로 실행되는지 확인한다.
node.js가 정상적으로 설치되었다면 해당 컴퓨터에 설치되어 있는 node.js의 버전이 출력될 것이고, 에러가 출력된다면 정상적으로 설치된 것이 아니니 node.js를 클린삭제 후 컴퓨터를 재시작하여 다시 설치한다.
이후 npx
커맨드도 정상적으로 실행되는지 확인한다.
node -v
커맨드와 npx
커맨드가 정상적으로 실행된다면 node.js가 정상적으로 설치된 것이다.
새로운 리액트 프로젝트 시작
새로운 리액트 프로젝트를 시작하기 위해서는 터미널(cmd 혹은 powershell)을 실행한 후, 프로젝트 디렉토리를 생성할 위치로 이동한다.
위치로 이동하면 아래와 같이 create-react-app
커맨드를 이용하여 리액트 프로젝트를 생성한다.
npx create-react-app {project_name}
{project_name}
부분에 본인의 프로젝트 이름을 입력하면 된다. (프로젝트 이름은 해당 리액트 프로젝트 파일들이 위치할 폴더명이 된다.) 만약 react-start
라는 리액트 프로젝트를 만든다면, npx create-react-app react-start
라고 입력하면 된다.
프로젝트 폴더를 vscode에서 열고, vscode 터미널에서 npm start
명령어를 입력하면 node.js를 이용한 local server를 실행할 수 있다.
프로젝트에서 실행할 때 필요한 모든 파일이 위치하는 곳은 src
폴더이다. 이 src
폴더 내에서도 index.js
파일과 app.js
파일이 가장 기본이 되는 파일이다.
index.js
파일은 public/index.html
파일에 페이지 렌더를 위한 자바스크립트 파일이다. 이 파일을 이용하여 리액트 프로젝트가 웹페이지에 렌더링되는 것이다. app.js
는 <App />
컴포넌트가 위치하는 파일이다. <App />
컴포넌트는 쉽게 가장 최상단에 위치하는 컴포넌트라고 생각하면 되며, 리액트 프로젝트의 전체적인 구조를 담당하고 있다고 보면 된다.
추후 리액트 프로젝트의 파일구조에 대해 자세히 알아볼 기회가 있다면 다시 정리하도록 하겠다.
'Development > React' 카테고리의 다른 글
리액트 | styled-components를 이용한 React 스타일링 (with. styled-reset) (0) | 2024.01.29 |
---|---|
리액트 | Vite를 이용한 React 프로젝트 생성 (설치부터 프로젝트 생성까지) (0) | 2024.01.25 |
리액트 | 리액트 프로젝트 GitHub page로 배포하기 (0) | 2024.01.17 |
리액트 | useState Hook 간단하게 이해하기 (0) | 2024.01.15 |
리액트 | StrictMode가 무엇이길래 console.log()가 두 번씩 출력 될까? (1) | 2024.01.06 |