React 프로젝트 생성

리액트는 뭘까?

리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다.

리액트는 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용될 수 있다. 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야 한다.

프로젝트 생성

1. node.js 다운받기
   (최신 버전으로 다운받거나, 안정화 버전으로 다운받는다.. 16.x 버전 이후 버전을 추천한다.

2. 프로젝트 생성

npx create-react-app [프로젝트명]

React 프로젝트 실행

npm start

빌드 및 실행

npm run build // 빌드
serve -s build -l 3000

⚡Vite로 만들어 보기

Vite는 Esbuild를 기반으로 만들어진 프론트엔드 빌드툴입니다.

Vite는 브라우저에서의 네이티브 ES 모듈 활용과 compile-to-native 언어로 작성된 자바스크립트 툴이라는 새로운 발전을 통해 더 나은 개발자 경험을 제공합니다.

ES 모듈 활용 덕에 자바스크립트 코드를 모두 번들할 필요 없이 브라우저에서 자바스크립트 어플리케이션을 작동시킬 수 있어요.

Vite의 핵심은 간단합니다. ES 모듈을 사용하여 브라우저가 필요로 하는 어플리케이션 코드의 일부분만 변환하고 제공하는 겁니다.

개발 모드로 빌드를 할 때, Vite는 자바스크립트 모듈을 두 가지 카테고리로 나눕니다. 하나는 의존성 모듈, 다른 하나는 소스 코드.

의존성 모듈은 node_modules 폴더로부터 import 되는 자바스크립트 모듈이며 개발하는 동안엔 자주 바뀌지 않는 편입니다. 이 모듈은 esbuild를 사용하여 처리됩니다. Webpack이 브라우저의 요청 이전에 모든 자바스크립트 모듈을 처리하는 반면, Vite는 브라우저 요청 전에 의존성 모듈만 미리 번들링합니다.

소스코드는 .jsx, .vue, .scss와 같은 라이브러리 관련 확장자를 포함할 수도 있으며, 자주 수정되는 파일입니다. 또한 소스코드 전체는 동시에 로드될 필요가 없다는 특징이 있습니다.

Vite는 native ESM을 통해 소스코드를 제공합니다. 이는 브라우저로 하여금 번들러의 작업 일부를 넘겨 받게 합니다. Vite는 브라우저의 요청이 있을 시에만 소스코드를 변환하고 제공합니다.

⚡Vite 만들기 및 실행

• 프로젝트 생성

npm create vite@latest ProjectName // 최신버전으로 생성
cd ProjectName
npm i

• 프로젝트 실행

npm run dev

• 빌드하기

npm run build

• 빌드후 실행하기

npm run preview

package.json 파일 수정

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 8080"
  },

• scripts 부분을 수정하여, 실행 하는걸 바꿔줄수 있다. 위에는 포트를 예제로 바꿔보았다.

.....
FastApi와 리액트vite를 이용한 프로젝트를 만들어 보면 좋을것 같다..