# React App 매뉴얼 구성 ## 프로젝트 구성에 앞서 #### 1. React는 반드시 Webpack과 함께 사용해야 할까요? 그렇지는 않습니다. 하지만 함께 사용할 수 있습니다. Webpack과 React는 서로 다른 작업을 수행합니다. 그러므로 Webpack 없이 React를 사용하는 것이 가능합니다. {% embed url="" %} React, ReactDOM + @Babel/standalone {% endembed %} #### 2. Webpack을 사용하는 이유가 뭘까요? Webpack은 JavaScript 모듈 번들러로 JavaScript 모듈 번들링에 사용되는 NPM 모듈입니다. 애플리케이션 모듈 종속성을 해결해 웹 브라우저에서 이해할 수 있는 방식으로 모듈을 연결하고 컴파일, 번들링 → 빌드합니다. #### 3. Webpack은 프레임 워크 인가요? 아닙니다. 프레임 워크는 보다 편리하고 다른 방식으로 코드를 작성하거나, 새로운 기능을 도입 할 수 있는 것을 말합니다. Webpack은 그 중 어떤 것도 수행하지 않습니다. 대신 코드를 최적화 하고 브라우저 환경에 맞게 조정합니다. #### 4. 다른 모듈 번들러를 사용해도 되나요? 네. React 애플리케이션을 작성하기 위해 다른 모듈 번들러([Parcel](https://v2.parceljs.org/) 등)를 사용하거나, 번들링 없이 구성할 수 있습니다. ## Webpack + React 구성 ![](https://1127883942-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTbexhuB2p5ev8QaGgg%2F-MTuHFNSwUtlF4SufcMQ%2F-MTuKybiQ2ycyOGlDro1%2Fimage.png?alt=media\&token=247f4572-cbb1-4529-8958-70753702c145) #### 디렉토리 생성 → 에디터 열기 명령어를 사용해 디렉토리(폴더)를 생성하고 생성된 디렉토리로 이동한 후 내부에 **public**, **src** 디렉토리를 만듭니다. `code` 명령을 사용해 Visual Studio Code에서 디렉토리를 엽니다. {% tabs %} {% tab title="CLI" %} ```bash mkdir <디렉토리_이름> && cd $_ mkdir public src code . ``` {% endtab %} {% endtabs %} {% hint style="warning" %} code 명령을 사용할 수 없다면? **에디터에서 직접 디렉토리를 "열기(Open...)" 합니다.** {% endhint %} ![](https://1127883942-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTbexhuB2p5ev8QaGgg%2F-MTuHFNSwUtlF4SufcMQ%2F-MTuO5uzr_1YrlBPYVfV%2Fimage.png?alt=media\&token=9cbe0f3f-e580-4254-88eb-55fe63498e39) #### index.html 파일 React 앱이 렌더링 될 HTML 페이지를 `public` 디렉토리 안에 만듭니다. {% tabs %} {% tab title="public/index.html" %} ```markup React App 매뉴얼 구성
``` {% endtab %} {% endtabs %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://yamoo9.gitbook.io/webpack/react/create-your-own-react-app.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.