React App 매뉴얼 구성

프로젝트 구성에 앞서

1. React는 반드시 Webpack과 함께 사용해야 할까요?

그렇지는 않습니다. 하지만 함께 사용할 수 있습니다. Webpack과 React는 서로 다른 작업을 수행합니다. 그러므로 Webpack 없이 React를 사용하는 것이 가능합니다.

2. Webpack을 사용하는 이유가 뭘까요?

Webpack은 JavaScript 모듈 번들러로 JavaScript 모듈 번들링에 사용되는 NPM 모듈입니다. 애플리케이션 모듈 종속성을 해결해 웹 브라우저에서 이해할 수 있는 방식으로 모듈을 연결하고 컴파일, 번들링 → 빌드합니다.

3. Webpack은 프레임 워크 인가요?

아닙니다. 프레임 워크는 보다 편리하고 다른 방식으로 코드를 작성하거나, 새로운 기능을 도입 할 수 있는 것을 말합니다. Webpack은 그 중 어떤 것도 수행하지 않습니다. 대신 코드를 최적화 하고 브라우저 환경에 맞게 조정합니다.

4. 다른 모듈 번들러를 사용해도 되나요?

네. React 애플리케이션을 작성하기 위해 다른 모듈 번들러(Parcel 등)를 사용하거나, 번들링 없이 구성할 수 있습니다.

Webpack + React 구성

디렉토리 생성 → 에디터 열기

명령어를 사용해 디렉토리(폴더)를 생성하고 생성된 디렉토리로 이동한 후 내부에 public, src 디렉토리를 만듭니다. code 명령을 사용해 Visual Studio Code에서 디렉토리를 엽니다.

mkdir <디렉토리_이름> && cd $_
mkdir public src
code .

code 명령을 사용할 수 없다면? 에디터에서 직접 디렉토리를 "열기(Open...)" 합니다.

index.html 파일

React 앱이 렌더링 될 HTML 페이지를 public 디렉토리 안에 만듭니다.

<!DOCTYPE html>
<html lang="ko-KR">

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React App 매뉴얼 구성</title>
  </head>

  <body>

    <div id="root"></div>

  </body>

</html>

Previous이미지 파일 크기 최적화 NextWebpack 초기 구성

Last updated 3 years ago