[React] 리액트 프로젝트 생성

2024. 8. 13. 13:40· FrontEnd/React
목차
  1. Create React App으로 React 프로젝트 생성
  2. 프로젝트 생성
  3. 명령어
  4. 서버 실행 후, 화면
  5. Parcle 번들러로 SAP 프로젝트 생성
  6. 프로젝트 폴드 생성 및 초기화
  7. 프로젝트 구조 설정
  8. 서버 실행 후, 화면
반응형

React 애플리케이션을 만들때, 가장 많이 사용되는 도구 중 하나가 'Create React App'이다. 이 도구는 React 개발 환경을 손쉽게 설정해주며, 여러가지 유용한 기능을 기본으로 제공한다. 하지만, Parcle 번들러를 이용하여 더 간단한 설정으로 가벼운 설정과 빠른 빌드업을 하여 프로젝트를 관리할 수 있다.

 

 

Create React App으로 React 프로젝트 생성

프로젝트 생성

npx create-react-app myreact01-cra

myreact01-cra라는 이름의 프로젝트를 생성한다. 필요한 패키지와 기본 React 파일 구조가 생성된다.

 

명령어

npm run start

위 명렁어를 사용하여 개발 서버를 실행하여, 브라우저에서 애플리케이션을 확인할 수 있게 한다. 기본적으로 'localhost:3000'으로 실행된다.

 

npm run build

프로덕션 환경에 배포할 준비가 되면 빌드를 진행하여, 폴더에 최적화된 정적 파일들이 생성되고 이 파일들을 이용하여 서버에 배포한다.

 

npm run test

Jest를 사용하여 테스트 환경을 제공한다. 

 

npm run eject - 모든 설정을 직접 관리해야하기에 비추천

모든 설정을 직저 관리하고 싶다면 위 명령어를 통해서 할 수 있지만, 이 명령어는 비추천되며 한번 실행하면 되돌릴 수 없으며, Webpack, Babel, ESLint 등의 설정 파일을 프로젝트 루트에 노출 시킨다. 

 

서버 실행 후, 화면

 

 

 

Parcle 번들러로 SAP 프로젝트 생성

프로젝트 폴드 생성 및 초기화

mkdir myreact02-parcel
cd myreact02-parcel
npm install --save-dev parcel@2
npm install react@18 react-dom@18

 

프로젝트 구조 설정

src 디렉토리를 만들고, 그 안에 index.html과 index.js 파일을 생성한다.

 

index.html



<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8" />
    <title></title>
</head>
<body>

<div id="root"></div>
<script type="module" src="index.js"></script>

</body>
</html>

 

index.js

import {createRoot} from "react-dom/client";

function App() {
  return (
    <div>
      <h1>Hello React.</h1>
    </div>
  );
}

// js 단에서 리액트 컴포넌트를 렌더링할 요소를 지정
const rootEl = document.getElementById("root");
const root = createRoot(rootEl)
root.render(<App />);

 

package.json 파일 수정

처음 package 파일을 보면 scripts 부분이 없을 텐데 아래처럼 진입점을 생성해주면 된다.

port의 경우 create-react-app으로 생성하면 3000번 포트가 디폴트 값인데, parcel 번들러로 생성하면 디폴트 포트가 1234로 되어있다. 

{
  "scripts": {
    "start": "parcel src/index.html"
    //"start": "parcel src/index.html --port:3000"
  },
  "devDependencies": {
    "parcel": "^2.12.0",
    "process": "^0.11.10"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

 

 

서버 실행 후, 화면

npm run start

위 명령어를 통해서 서버를 실행해주면 아래와 같이 리엑트 서버가 동작한다. 

반응형
저작자표시 (새창열림)

'FrontEnd > React' 카테고리의 다른 글

[React] 클릭시 url 이동 - useNavigate  (0) 2024.08.26
[React] 순수 함수  (0) 2024.08.13
React 폴더, 컴포넌트, 함수 명명 규칙  (0) 2024.03.15
React 기본 명령어  (0) 2024.03.15
React의 기초개념 5가지  (0) 2024.03.15
  1. Create React App으로 React 프로젝트 생성
  2. 프로젝트 생성
  3. 명령어
  4. 서버 실행 후, 화면
  5. Parcle 번들러로 SAP 프로젝트 생성
  6. 프로젝트 폴드 생성 및 초기화
  7. 프로젝트 구조 설정
  8. 서버 실행 후, 화면
'FrontEnd/React' 카테고리의 다른 글
  • [React] 클릭시 url 이동 - useNavigate
  • [React] 순수 함수
  • React 폴더, 컴포넌트, 함수 명명 규칙
  • React 기본 명령어
Jong_seoung
Jong_seoung
기록하자, 머리는 생각하는 곳이지 저장장치가 아니다.
반응형
Jong_seoung
Today_developStory
Jong_seoung
전체
오늘
어제

블로그 메뉴

  • Home
  • Git Hub
  • 분류 전체보기 (351)
    • Theory (16)
    • Java (3)
      • 알고리즘 (2)
      • 문법 (0)
    • Spring (7)
      • 스프링 입문 (6)
      • PickTalk (0)
      • 에러처리 (1)
    • Python (80)
      • 알고리즘 - 이론 (17)
      • 알고리즘 - 내장함수, 라이브러리 등등 (3)
      • 알고리즘 - 백준 (53)
      • 나도코딩 정리 (2)
      • 기타 (5)
    • Django (159)
      • DRF (105)
      • 인프라 (46)
      • DataBases (2)
      • API Docs (6)
    • FrontEnd (22)
      • htmx (2)
      • React (8)
      • 자바스크립트 (12)
    • GIT (16)
    • 기타 (8)
      • 정리 (2)
      • Flutter (1)
      • 마이크로프로세서 - ATmega128 (2)
      • 개발환경 세팅 (3)
    • 자격증 (37)
      • 정보처리기사 (19)
      • SQLD자격증 (18)

인기 글

최근 글

태그

  • alarm
  • BFS
  • CSRF
  • Django
  • django channels
  • django sse
  • django tutorial
  • django 배포
  • django 스웨거 적용
  • Django 이미지 저장

최근 댓글

hELLO · Designed By 정상우.v4.3.0
Jong_seoung
[React] 리액트 프로젝트 생성
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.