• 1. 기존의 웹 개발 방식과 React 개발 방식의 차이
• 2. React 개발을 위한 필수 작업
• React 개발 작업을 비유로 이해하기
• 3. React 개발환경 설정
• 3.1. React를 라이브러리로 설치
• 3.1.1.Vite
• 3.1.2.Parcle
• 3.2. React를 프레임워크로 설치

1. 기존의 웹 개발 방식과 React 개발 방식의 차이

1. 기존 웹 개발 방식:HTML 파일에 CSS와 JavaScript 파일을 삽입하여 웹 페이지를 제작.
• 예: <script> 태그로 JavaScript를 추가하고 <link> 태그로 CSS를 불러옴.
2. React 개발 방식:JavaScript 파일에서 HTML(JSX), CSS, 기타 파일을 모두 포함하여 작업.
• 이렇게 작업한 코드는 브라우저에서 바로 실행되지 않으므로, 배포 전에 HTML 파일로 변환해야 한다.

2. React 개발을 위한 필수 작업

React로 작성한 코드를 브라우저가 이해할 수 있는 형태로 만들기 위해 다음 과정이 필요하다.

1. 모듈 번들링(Module Bundling)여러 파일(HTML, CSS, JS 등)을 하나로 묶어 효율적으로 관리한다.
2. 빌드(Build)묶인 파일을 최적화해 브라우저에서 빠르게 실행할 수 있도록 변환한다.
3. 트랜스파일링(Transpiling)최신 JavaScript 문법과 JSX를 구형 브라우저가 이해할 수 있는 코드로 변환한다.

React 개발 작업을 비유로 이해하기

1. 모듈 번들링: 여러 재료(파일)를 모아 한 접시에 요리(완성된 파일)로 만드는 과정이다.
2. 빌드: 요리를 간단하고 보기 좋게 정리해 손님에게 빠르게 제공할 준비를 한다.
3. 트랜스파일링: 외국 손님이 이해할 수 있도록 메뉴판을 번역한다.

React는 개발자들이 작업하기 편리한 환경을 제공하지만, 브라우저에서 실행 가능한 형태로 변환해야 하기 때문에 위 과정이 필수적이다.

3. React 개발환경 설정

3.1. React를 라이브러리로 설치

3.1.1.Vite

아래의 링크에서부터 시작한다.

1. https://ko.vite.dev/guide/#scaffolding-your-first-vite-project

3.1.2.Parcle

3.2. React를 프레임워크로 설치

Next.jsRemixGatsbyExpo (for native apps)Bleeding-edge React frameworksNext.js (App Router)

• Next.js
• Remix
• Gatsby
• Expo (for native apps)
• Bleeding-edge React frameworks
• Next.js (App Router)