{"id":16586340,"url":"https://github.com/heech1013/cleaner-react-boilerplate","last_synced_at":"2026-05-07T05:37:51.635Z","repository":{"id":125640065,"uuid":"418051738","full_name":"heech1013/cleaner-react-boilerplate","owner":"heech1013","description":"튜토리얼: 미니멀 Webpack + Babel + React + ESLint/Prettier 보일러플레이트","archived":false,"fork":false,"pushed_at":"2021-10-17T07:23:40.000Z","size":75,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-15T22:52:32.897Z","etag":null,"topics":["babel","boilerplate","react","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/heech1013.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-17T07:16:14.000Z","updated_at":"2021-10-18T06:05:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"e0952fd1-951d-42dc-9dae-d9e7cae8e78d","html_url":"https://github.com/heech1013/cleaner-react-boilerplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/heech1013/cleaner-react-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heech1013%2Fcleaner-react-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heech1013%2Fcleaner-react-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heech1013%2Fcleaner-react-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heech1013%2Fcleaner-react-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/heech1013","download_url":"https://codeload.github.com/heech1013/cleaner-react-boilerplate/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heech1013%2Fcleaner-react-boilerplate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32725002,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-07T02:14:30.463Z","status":"ssl_error","status_checked_at":"2026-05-07T02:14:29.405Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","boilerplate","react","webpack"],"created_at":"2024-10-11T22:51:16.236Z","updated_at":"2026-05-07T05:37:51.621Z","avatar_url":"https://github.com/heech1013.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cleaner React Boilerplate\n\nReact 컴포넌트를 렌더링할 수 있는 최소한의 설정으로 구성된 보일러플레이트\n\n- Webpack\n- Babel\n- React\n- ESLint + Prettier\n\n---\n\n## 튜토리얼\n\n해당 보일러플레이트를 설정하는 과정을 따라가봅니다.\n\n### 의존성 초기화\n\n```bash\n$ npm init -y\n```\n\n- `-y`: 모든 설정을 default 값으로 설정(means \"yes\")\n\n### 바벨 설정\n\n\u003e - 바벨은 그 자체만으로는 아무것도 하지 않는다. preset과 plugin을 통해 바벨이 무언가 동작하도록 만든다.\n\u003e - 각각의 preset과 plugin들은 npm 라이브러리를 가지고 있다.\n\u003e - preset은 plugin들의 집합(콜렉션)이다. preset은 수많은 plugin들을 일일이 추가하고 관리하는 불편함을 해결해준다.\n\n--\n\n```bash\n$ npm i -D @babel/core @babel/preset-env @babel/preset-react\n```\n\n- 바벨은 개발 단계에서만 사용하기 때문에 devDependencies에 추가한다.\n- `@babel/core`: babel compiler core\n- `@babel/preset-env`: ES6+의 최신 문법을 별도의 변환 작업 없이도 편하게 사용할 수 있도록 해준다. (ES6+ 문법을 ES5로 컴파일해준다.)\n- `@babel/preset-react`: 리액트 어플리케이션을 만들 때 필요한 plugin들의 모음(JSX 코드를 createElement 함수 코드로 변환해주는 plugin 등).\n\n--\n\n```json\n{\n  \"presets\": [\"@babel/preset-env\", \"@babel/preset-react\"]\n}\n```\n\n- 바벨 설정 파일 `.babelrc`에 preset을 추가\n\n### 웹팩 설정\n\n```bash\n$ npm i -D webpack webpack-cli webpack-dev-server\n```\n\n- `webpack`: 웹팩 라이브러리\n- `webpack-cli`: 웹팩의 커맨드라인 인터페이스\n- `webpack-dev-server`: 웹팩 빌드 결과물을 확인할 수 있는 개발 서버를 제공한다.\n\n--\n\n```jsx\n// webpack.config.js\nmodule.exports = {\n  mode: \"development\",\n  entry: \"./src/index.js\",\n  output: {\n    filename: \"bundle.[fullhash].js\",\n  },\n  resolve: {\n    extensions: [\".js\", \".jsx\"],\n  },\n};\n```\n\n- 웹팩 설정 파일: `webpack.config.js`\n- `mode`: 모드 설정. 웹팩이 설정한 모드에 적합한 최적화를 진행한다.  \n  (`string = 'production: 'none' | 'development' | 'production'`)\n- `entry`: 어플리케이션 진입점을 설정.\n- `output`: 번들된 파일을 저장할 경로 설정.\n  - `filename`: 번들된 파일의 이름 설정. `[fullhash]`는 웹팩에서 생성한 해시를 사용한다.\n- `resolve`: 모듈을 해석하는 방식을 설정한다.\n  - `extensions`: 명시하는 확장자를 순서대로 해석한다. 사용자가 `import`할 때 확장자를 생략할 수 있도록 해준다. (default 설정은 jsx를 명시하지 않아 오류가 발생한다.)\n\n--\n\n### 웹팩 loader 설정\n\n```jsx\nmodule: {\n  rules: [\n    {\n      test: '빌드할 파일 확장자 정규식'\n      exclude: '제외할 파일 정규식'\n      use: {\n        loader: '사용할 로더 이름'\n        option: '로더 옵션'\n      }\n    }\n  ]\n}\n```\n\n- loader는 `module` - `rules` 키워드로 추가할 수 있다.\n\n--\n\n```bash\n$ npm i -D babel-loader html-loader\n```\n\n- `babel-loader`: 바벨을 웹팩에서 사용할 수 있도록 해준다.\n- `html-loader`: 웹팩이 HTML을 읽을 수 있도록 해준다.\n\n--\n\n```jsx\n// webpack.config.js\nmodule.exports = {\n// ...\n\tmodule: {\n\t    rules: [\n\t      {\n\t        test: /\\.(js|jsx)$/,\n\t        exclude: /node_modules/,\n\t        use: {\n\t          loader: 'babel-loader',\n\t        },\n\t      },\n\t      {\n\t        test: /\\.html$/,\n\t        use: [\n\t          {\n\t            loader: 'html-loader',\n\t            options: {\n\t              minimize: true,\n\t            },\n\t          },\n\t        ],\n\t      },\n\t    ],\n\t  },\n// ...\n```\n\n- 설치한 loader들을 위와 같이 `webpack.config.js` 파일에 추가해준다.\n\n--\n\n### 웹팩 plugin 설정\n\n```bash\n$ npm i -D html-webpack-plugin\n```\n\n- `html-webpack-plugin`: `script` 태그를 사용하여 `body`에 모든 webpack 번들을 포함하는 HTML5 파일을 생성한다.\n\n--\n\n```jsx\n// webpack.config.js\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\nmodule.exports = {\n// ...\n  plugins: [\n    new HtmlWebpackPlugin({\n      template: 'public/index.html',\n    })\n  ],\n// ...\n```\n\n- plugin에 `new HtmlWebpackPlugin()`을 추가하는 것만으로 기본 세팅이 완료된다. (아래와 같이 번들을 포함하는 HTML 파일이 생성된다)\n  ```jsx\n  \u003c!DOCTYPE html\u003e\n  \u003chtml\u003e\n    \u003chead\u003e\n      \u003cmeta charset=\"UTF-8\" /\u003e\n      \u003ctitle\u003ewebpack App\u003c/title\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n      \u003cscript src=\"index_bundle.js\"\u003e\u003c/script\u003e\n    \u003c/body\u003e\n  \u003c/html\u003e\n  ```\n- 위 HTML 파일은 `HtmlWebpackPlugin`의 default HTML 파일이다. 만일 직접 생성한 HTML 파일을 템플릿으로 사용하고 싶다면, `template` 옵션을 지정한다. (`id`가 `root`인 `div`에 `App` 리액트 컴포넌트를 렌더링해야 하므로, 템플릿 옵션 설정은 필수에 가까울 것이다.)\n\n### 웹팩 개발 서버 설정\n\n\u003e `webpack dev server`의 결과물은 `webpack` 명령어(dist 내부에 번들 파일 생성)와는 다르게 메모리에 저장된다. 개발 서버를 종료하면 결과물도 사라진다.\n\n--\n\n```jsx\n// package.json\n// ...\n\"scripts\": {\n  \"start\": \"webpack-dev-server\",\n},\n// ...\n```\n\n- `script` - `start`에 `webpack-dev-server` 명령어 추가\n\n--\n\n```jsx\n// webpack.config.js\nconst port = process.env.PORT || 3000;\n\nmodule.exports = {\n  // ...\n  devServer: {\n    host: \"localhost\",\n    port: port,\n    open: true,\n  },\n};\n```\n\n- `host`: 개발 서버의 url 설정\n- `port`: 개발 서버의 port 설정\n- `open`: 서버가 실행될 때 자동으로 브라우저를 열어줄지 여부 설정\n\n--\n\n### 리액트 설정\n\n```bash\n$ npm i react react-dom\n```\n\n--\n\n```jsx\n// src/index.js\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./App\";\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById(\"root\"));\n\n// src/App.js\nimport React from \"react\";\n\nconst App = () =\u003e \u003cdiv\u003eHello, Webpack!\u003c/div\u003e;\n\nexport default App;\n```\n\n```html\n\u003c!-- public/index.html --\u003e\n\u003chtml lang=\"ko\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003ctitle\u003e웹팩 with 리액트 보일러 플레이트\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n- 정상적으로 결과물이 빌드되는지 확인할 수 있도록 파일을 간단히 작성한다.\n\n--\n\n### ESLint \u0026 Prettier 설정\n\n\u003e ESLint와 Prettier 같이 사용하기\n\u003e\n\u003e - 기본적으로 ESLint는 코드 퀄리티에, Prettier는 코드 포맷팅에 특화되어 있지만 ESLint는 코드 포맷팅과 관련된 rule 또한 일부 포함한다.\n\u003e - 이로 인해 별도의 조치 없이 ESLint와 Prettier를 함께 사용하면, ESLint와 Prettier의 rule이 서로 충돌하는 상황이 발생한다.\n\u003e - 이러한 상황에 대응하기 위한 일반적인 솔루션으로 크게 3가지가 있다: `prettier-eslint`, `eslint-plugin-prettier`, `eslint-config-prettier`\n\u003e\n\u003e 1. `prettier-eslint`: prettier를 실행하고 난 후의 코드를 eslint로 fix하는 npm 라이브러리. prettier를 단독으로 실행하는 것보다 훨씬 느리다는 단점이 있다. (`prettier-eslint`의 메인테이너가 2017년에 해당 패키지를 더 이상 사용하지 않는다고 밝혔다.)\n\u003e 2. `eslint-plugin-eslint`: prettier를 eslint의 rule로써 동작하게 만든다. 속도가 느리며, 포맷팅 문제가 eslint 오류로 인식되어 오류 메시지가 지나치게 많아진다는 단점이 있다.\n\u003e 3. `eslint-config-prettier`(권장) eslint의 rule 중 prettier와 충돌할 수 있는 rule을 모두 비활성화한다. 속도가 가장 빠르고, ESLint는 코드 퀄리티만을, Prettier는 코드 포맷팅만을 담당하도록 관심사를 분리할 수 있기 때문에 권장되는 방법이다. (Kent C. Dodds도 이 방법을 사용하는 것이 낫다고 밝혔다.)\n\n—\n\n```bash\n$ npm i -D eslint prettier eslint-config-prettier\n$ npx eslint --init\n```\n\n- 관련 모듈을 설치한 후, eslint 프로젝트 초기 설정을 시작한다.\n\n—\n\n```\n✔ How would you like to use ESLint? · style\n✔ What type of modules does your project use? · esm\n✔ Which framework does your project use? · react\n✔ Does your project use TypeScript? · No / Yes\n✔ Where does your code run? · browser\n✔ How would you like to define a style for your project? · guide\n✔ Which style guide do you want to follow? · airbnb\n✔ What format do you want your config file to be in? · JavaScript\n```\n\n- ESLint 설정을 위해 필요한 질문들에 원하는 대로 답변한다.\n\n—\n\n```\neslint-plugin-react@^7.21.5 eslint-config-airbnb@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.22.1 eslint-plugin-jsx-a11y@^6.4.1 eslint-plugin-react-hooks@^4 || ^3 || ^2.3.0 || ^1.7.0\n✔ Would you like to install them now with npm? · No / Yes\n```\n\n- 선택한 ESLint rule(airbnb)에 필요한 모듈을 자동으로 설치해준다.\n\n—\n\n```jsx\nmodule.exports = {\n  env: {\n    browser: true,\n    es2021: true,\n  },\n  extends: [\"plugin:react/recommended\", \"airbnb\"],\n  parserOptions: {\n    ecmaFeatures: {\n      jsx: true,\n    },\n    ecmaVersion: 11,\n    sourceType: \"module\",\n  },\n  plugins: [\"react\"],\n  rules: {},\n};\n```\n\n- 위와 같은 모습으로 초기 `.eslintrc.js` 파일이 생성된다.\n\n—\n\n```jsx\n// .eslintrc.js\n{\n  \"extends\": [\n\t\t// ...\n    \"prettier\"\n  ]\n}\n```\n\n- `.eslintrc.js` 파일의 `extends`에 `\"prettier\"`를 추가해 `eslint-config-prettier` 모듈을 적용한다.\n\n—\n\n```jsx\n// package.json\n\"scripts\": {\n\t// ...\n\t\"lint\": \"eslint \\\"src/**/*\\\" --fix\",\n}\n```\n\n- `package.json` 파일의 `scripts`에 lint 명령어를 추가한다. 위 명령은 `src` 폴더 내의 모든 파일에 대해 lint 검사를 수행한다.\n\n—\n\n```json\n{\n  \"editor.formatOnSave\": true,\n  \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n}\n```\n\n- 코드를 저장할 때 자동으로 prettier 포맷팅이 적용되도록 VS CODE의 `setting.json`을 설정한다.\n- ESLint rule 관련 경고줄이 보이지 않을 경우, VS CODE를 껐다 킨다.\n\n--\n\n- script 명령어 `$ npm start`로 테스트할 수 있다.\n\nFIN.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheech1013%2Fcleaner-react-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheech1013%2Fcleaner-react-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheech1013%2Fcleaner-react-boilerplate/lists"}