feat(webpack): webpack initial setting with react

[citron03]

PR Type

Enhancement

---

Description

• React 애플리케이션 초기 Webpack 설정 추가

• Babel 및 React Refresh 플러그인 구성

• 개발 및 빌드 스크립트 정의

• ESLint Node.js 전역 변수 지원

---

Diagram Walkthrough

flowchart LR
  HTML_ENTRY["apps/webpack/index.html"] --> REACT_APP["apps/webpack/index.tsx"]
  WEBPACK_CONFIG["apps/webpack/webpack.config.js"] --> REACT_APP
  PACKAGE_JSON["apps/webpack/package.json"] --> WEBPACK_CONFIG
  ESLINT_CONFIG["eslint.config.js"] --> ESLINT_CONFIG

Loading

File Walkthrough

	Relevant files
Enhancement	index.tsx React 애플리케이션 초기 컴포넌트 및 렌더링 설정                                                        apps/webpack/index.tsx React 애플리케이션의 진입점 역할을 하는 App 컴포넌트를 정의했습니다. createRoot를 사용하여 root DOM 요소에 React 애플리케이션을 렌더링하도록 설정했습니다. +11/-0    index.html React 애플리케이션을 위한 기본 HTML 파일 생성                                                      apps/webpack/index.html React 애플리케이션이 마운트될 root div를 포함하는 기본 HTML 구조를 생성했습니다. 번들된 JavaScript 파일(app.js)을 defer 속성으로 로드하도록 스크립트 태그를 추가했습니다. +12/-0
Configuration changes	webpack.config.js Webpack 및 Babel을 이용한 React 개발 환경 설정                                            apps/webpack/webpack.config.js Webpack 개발 모드, 소스맵, 확장자 처리(.js, .jsx, .ts, .tsx)를 설정했습니다. Babel 로더를 사용하여 JSX/TSX 파일을 처리하고, @babel/preset-env, @babel/preset-react, @babel/preset-typescript를 포함했습니다. ReactRefreshWebpackPlugin을 추가하여 HMR(Hot Module Replacement)을 활성화했습니다. devServer를 구성하여 개발 서버, HMR, 자동 브라우저 열기 기능을 제공합니다. +64/-0    eslint.config.js ESLint Node.js 전역 변수 지원 추가                                                              eslint.config.js ESLint가 Node.js 전역 변수를 인식하도록 globals.node를 추가했습니다. +1/-0
Dependencies	package.json Webpack 빌드 스크립트 및 종속성 정의                                                                  apps/webpack/package.json start:dev, start:prod, build:dev, build:prod 스크립트를 추가하여 Webpack 개발 및 빌드 명령어를 정의했습니다. react, react-dom 및 Webpack 관련 개발 종속성(@pmmmwh/react-refresh-webpack-plugin, babel-loader, webpack, webpack-cli, webpack-dev-server)을 추가했습니다. +28/-0

---

[github-actions]

PR Reviewer Guide 🔍

(Review updated until commit 382d3ee)

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review 명시적인 Entry 경로 Webpack 설정에서 entry 포인트로 ./index를 사용하고 있는데, resolve.extensions 덕분에 index.tsx로 잘 해석되지만, 명시적으로 ./index.tsx로 지정하면 코드를 처음 보는 동료들이 더 쉽게 이해할 수 있을 것 같아요! 작은 디테일이지만 가독성을 높일 수 있답니다! 😉 app: ['./index'],

[github-actions]

PR Code Suggestions ✨

Latest suggestions up to 382d3ee

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	createRoot 호출 전 null 확인 document.getElementById('root')가 null을 반환할 수 있으므로, createRoot를 호출하기 전에 container 요소의 존재 여부를 명시적으로 확인해야 합니다. 현재 ! (non-null assertion) 연산자는 런타임에 null이 아님을 보장하지 않아 애플리케이션 충돌을 유발할 수 있습니다. null 체크 로직을 추가하여 안정성을 높이세요. apps/webpack/index.tsx [8-9] const container = document.getElementById('root'); -const root = createRoot(container!); +if (!container) { + throw new Error('Root element not found'); +} +const root = createRoot(container); Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies a potential runtime error if the root element is not found, which the non-null assertion operator ! does not prevent. Adding an explicit null check improves the robustness of the application.	Medium

---

Previous suggestions

Suggestions up to commit fd08e78

Category	Suggestion	Impact
Possible issue	루트 요소 존재 여부 확인 document.getElementById('root')가 null을 반환할 경우, container!와 같이 비-null 단언 연산자를 사용하면 런타임 오류가 발생할 수 있습니다. createRoot를 호출하기 전에 container 요소의 존재 여부를 확인하는 것이 안전합니다. apps/webpack/index.tsx [8-9] const container = document.getElementById('root'); -const root = createRoot(container!); +if (!container) { + throw new Error('ID가 "root"인 루트 요소를 문서에서 찾을 수 없습니다.'); +} +const root = createRoot(container); Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies a potential runtime error if document.getElementById('root') returns null. Adding a check for the container element's existence improves the robustness and error handling of the application.	Medium
General	개발 스크립트 실행 방식 수정 dev 스크립트에서 build:dev와 start:dev를 동시에 실행하는 것은 의도치 않은 동작을 유발할 수 있습니다. webpack serve (start:dev)는 개발 서버를 시작하고 메모리에서 빌드를 처리하므로, 별도의 build:dev 명령을 병렬로 실행하는 것은 불필요하며 충돌을 일으킬 수 있습니다. 개발 시에는 start:dev만 실행하는 것이 일반적입니다. apps/webpack/package.json [12] -"dev": "pnpm run build:dev & pnpm start:dev" +"dev": "pnpm run start:dev" Suggestion importance[1-10]: 8 __ Why: Running build:dev and start:dev concurrently is redundant and can cause conflicts, as webpack serve (used in start:dev) already handles the development build in memory. The suggestion correctly streamlines the development workflow.	Medium
	진입점 파일 확장자 명시 resolve.extensions에 확장자가 포함되어 있어도, 진입점 파일에 명시적으로 확장자를 지정하는 것이 좋습니다. 이는 설정의 명확성을 높이고, 잠재적인 파일 이름 충돌이나 해석 순서 변경에 대한 견고성을 향상시킵니다. apps/webpack/webpack.config.js [11-15] entry: { // 입력 - app: ['./index'], + app: ['./index.tsx'], // 파일 내부에서 다른 파일을 호출한다면, webpack이 자동으로 이를 파악해준다. 따라서 entry에 추가하지 않아도 된다. }, Suggestion importance[1-10]: 6 __ Why: While resolve.extensions handles the file extension, explicitly stating .tsx in the entry configuration enhances clarity and maintainability, making the configuration more robust against potential resolution ambiguities.	Low

Suggestions up to commit 2ebf1cc

Category	Suggestion	Impact
Possible issue	루트 요소의 존재 여부를 확인합니다 document.getElementById('root')가 null을 반환할 경우 createRoot(container!)에서 런타임 오류가 발생할 수 있습니다. container가 존재하는지 확인하고, 존재하지 않을 경우 적절한 오류 처리 로직을 추가하는 것이 좋습니다. apps/webpack/index.tsx [8-9] -const root = createRoot(container!); +const container = document.getElementById('root'); +if (!container) { + throw new Error('Root element not found'); +} +const root = createRoot(container); Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies a potential runtime error if document.getElementById('root') returns null. Adding an explicit check improves the robustness and error handling of the application.	Medium
General	사용되지 않는 Webpack 플러그인을 제거합니다 LoaderOptionsPlugin은 Webpack 4/5에서 더 이상 사용되지 않는(deprecated) 플러그인입니다. 해당 플러그인의 debug 옵션 기능은 이제 mode 설정에 따라 자동으로 처리되므로 제거하는 것이 좋습니다. apps/webpack/webpack.config.js [2-44] -const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin'); +// const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin'); ... - new LoaderOptionsPlugin({ debug: true }), + // new LoaderOptionsPlugin({ debug: true }), Suggestion importance[1-10]: 6 __ Why: LoaderOptionsPlugin is deprecated in Webpack 4/5, and its debug option is automatically handled by the mode configuration. Removing this deprecated plugin improves the cleanliness and maintainability of the Webpack configuration.	Low
	사용되지 않는 Babel 플러그인 의존성을 제거합니다 @babel/plugin-proposal-class-properties 플러그인은 더 이상 사용되지 않으며, @babel/preset-env가 이미 클래스 속성을 처리하므로 이 의존성은 불필요합니다. package.json에서 해당 플러그인을 제거하는 것이 좋습니다. apps/webpack/package.json [19] -"@babel/plugin-proposal-class-properties": "^7.18.6", +// "@babel/plugin-proposal-class-properties": "^7.18.6", Suggestion importance[1-10]: 6 __ Why: The @babel/plugin-proposal-class-properties plugin is deprecated and its functionality is already covered by @babel/preset-env. Removing this unnecessary dependency improves project hygiene and simplifies the dependency tree.	Low

Suggestions up to commit 9658177

Category	Suggestion	Impact
Possible issue	더 이상 사용되지 않는 Babel 플러그인 교체 @babel/plugin-proposal-class-properties 플러그인은 더 이상 사용되지 않습니다. 대신 @babel/plugin-transform-class-properties를 사용하여 최신 Babel 구성을 유지하고 잠재적인 호환성 문제를 방지해야 합니다. package.json의 devDependencies도 함께 업데이트해야 합니다. apps/webpack/webpack.config.js [39] -'@babel/plugin-proposal-class-properties', +['@babel/plugin-transform-class-properties', { loose: true }], Suggestion importance[1-10]: 8 __ Why: @babel/plugin-proposal-class-properties는 더 이상 사용되지 않으므로, @babel/plugin-transform-class-properties로 교체하는 것은 올바른 개선입니다. package.json의 devDependencies도 함께 업데이트해야 합니다.	Medium
	루트 요소 존재 여부 확인 document.getElementById('root')의 결과가 null일 수 있으므로, createRoot를 호출하기 전에 container 요소의 존재 여부를 확인하는 것이 중요합니다. 이는 런타임 오류를 방지하고 애플리케이션의 견고성을 높입니다. apps/webpack/index.tsx [9] -const root = createRoot(container!); +if (!container) { + throw new Error('Root element not found'); +} +const root = createRoot(container); Suggestion importance[1-10]: 8 __ Why: document.getElementById('root')가 null을 반환할 가능성이 있으므로, createRoot를 호출하기 전에 container 요소의 존재 여부를 확인하는 것은 런타임 오류를 방지하고 애플리케이션의 견고성을 높입니다.	Medium
General	더 이상 사용되지 않는 Webpack 플러그인 제거 LoaderOptionsPlugin은 Webpack 4부터 더 이상 사용되지 않으며, 로더 옵션은 직접 구성하는 것이 좋습니다. babel-loader의 debug 옵션은 이미 @babel/preset-env 설정 내에서 처리되고 있으므로, 이 플러그인은 제거하여 구성을 간소화할 수 있습니다. apps/webpack/webpack.config.js [48] -new LoaderOptionsPlugin({ debug: true }), +// new LoaderOptionsPlugin({ debug: true }), Suggestion importance[1-10]: 7 __ Why: LoaderOptionsPlugin은 Webpack 4부터 더 이상 사용되지 않으며, babel-loader의 debug 옵션은 이미 @babel/preset-env 설정 내에서 처리되고 있습니다. 이 플러그인을 제거하여 구성을 간소화하는 것은 좋은 개선입니다.	Medium

[github-actions]

Persistent review updated to latest commit 2ebf1cc

[github-actions]

Persistent review updated to latest commit fd08e78

[github-actions]

Persistent review updated to latest commit 382d3ee