{"id":18032831,"url":"https://github.com/syakuis/react-dev-base","last_synced_at":"2026-04-15T19:39:10.111Z","repository":{"id":65483215,"uuid":"103737984","full_name":"syakuis/react-dev-base","owner":"syakuis","description":"React 앱을 개발하기 위한 개발 환경 구성 - React development environment.","archived":false,"fork":false,"pushed_at":"2018-10-19T08:02:01.000Z","size":1090,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-01T11:58:55.180Z","etag":null,"topics":["babel","es6","eslint","javascript","js","lerna","react","stylelint","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/syakuis.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}},"created_at":"2017-09-16T08:37:00.000Z","updated_at":"2020-10-08T06:06:01.000Z","dependencies_parsed_at":"2023-01-25T11:15:27.494Z","dependency_job_id":null,"html_url":"https://github.com/syakuis/react-dev-base","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/syakuis/react-dev-base","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syakuis%2Freact-dev-base","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syakuis%2Freact-dev-base/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syakuis%2Freact-dev-base/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syakuis%2Freact-dev-base/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/syakuis","download_url":"https://codeload.github.com/syakuis/react-dev-base/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syakuis%2Freact-dev-base/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262239990,"owners_count":23280437,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","es6","eslint","javascript","js","lerna","react","stylelint","webpack"],"created_at":"2024-10-30T10:15:57.787Z","updated_at":"2026-04-15T19:39:05.058Z","avatar_url":"https://github.com/syakuis.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Development Environment\n\n## 설명\n\n리액트 기반으로 프로그램을 개발하기 위한 기본적인 개발 환경을 구성을 제공한다. 바벨 설정은 ie 11 이상으로 설정하였다.\n\n## 설치\n\n```\n$ wget https://github.com/syakuis/react-dev-base/archive/master.zip\nor\n$ git clone https://github.com/syakuis/react-dev-base.git\n\n$ npm install\n\n# 멀티 프로젝트 사용시\n$ sudo npm -i -g lerna@latest\n$ lerna init\n$ lerna bootstrap\n```\n\n## 사용된 라이브러리 설명\n- webpack \u0026 webpack-dev-server\n- babel\n- react \u0026 react-dom\n- editorconfig  \n  에디터 파일 타입에 따라 간격이나 언어셋등을 설정한다.  `.editorconfig` 파일에 설정한다.\n  vscode 플러그인 : `EditorConfig for VS Code`\n- eslint  \n  vscode 플러그인 : ESLint\n  설정에서 아래의 소스 이외에 설정은 제거해도 된다.\n  ```\n  rules: {\n    'prettier/prettier': ['error'],\n    'import/no-unresolved': ['error', { commonjs: true, amd: true }],\n    'import/extensions': ['error', 'never', { packages: 'always' }],\n    'import/no-extraneous-dependencies': [\n      'error',\n      { devDependencies: true, peerDependencies: true },\n    ],\n    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],\n  }\n  ```\n- prettier  \n  vscode 플러그인 : `Prettier - Code formatter` 단축키 `option + command + l` 자동으로 코드를 정리합니다.\n- eslint-config-airbnb\n- jest  \n  vscode 플러그인 : Jest\n- stylelint  \n  vscode 플러그인 : stylelint\n- lerna\n- vscode Debug\n  vscode 플러그인 : [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)\n\n## 패키지 구동\n\n```\n$ npm install\n\n$ npm run build  // 소스 빌드\n$ npm run start   // 서버 구동\n```\n\n## 다중 프로젝트 관리\n\npackages 폴더에 프로젝트를 생성하면 된다.\n\n```\n$ sudo npm install -g lerna@latest\n\n$ lerna init\n$ lerna bootstrop\n\n$ lerna build\n$ lerna exec -- npm run dev\n```\n자세한 설명은 lerna 사이트에서 확인하기.\n\n## 할일\n- [x] babel lerna 의 멀티 프로젝트에서도 정상적으로 작동하기\n  - leran success\n- [x] 다양한 환경에서 빌드되도록 webpack 설정 세분화 하기\n  - webpack success\n  - leran success\n- [x] webpack.resolve.alias eslint 에서 `import/no-unresolved` 오류가 발생되지 않게 구현.\n  - webpack success\n  - leran success\n- [ ] jest test 구현\n  - webpack success\n  - lerna wait\n- [ ] vscode Debug 환경 구현하기\n  - webpack success\n  - lerna wait\n- [ ] 다양한 패키지 배포 설정하기\n\n## 문제점 정리\n\n- [x] lerna 다중 프로젝트 관리 설정 추가하기.\n  - packages 에서 `webpack.resolve.alias` 사용하여 import 하면 eslint 의 `import/no-unresolved` 오류가 발생됨.\n  - `.eslintrc.js` 설정에서 prod 설정을 제거하여 문제 해결됨. `eslint-plugin-import` 어떤 방식으로 작동되는 지 이해해야 함. 현재로서 근본적인 문제의 원인과 왜 이렇게 하면 문제가 해결되는지 짐작하기 어려움.\n  ```\n  settings: {\n    'import/parser': 'babel-eslint',\n    'import/resolver': 'webpack',\n    'import/resolver': {\n      webpack: { \n        config: './webpack.config.dev.js',\n      },\n    },\n    --- 제거\n    'import/resolver': {\n      webpack: { \n        config: './webpack.config.prod.js',\n      },\n    },\n    ---\n  },\n  ```\n- [x] `webpack.resolve.alias` 설정을 사용하면 eslint 에서 `import/no-unresolved` 오류가 발생됨.\n  - `eslint-import-resolver-webpack` 에서 설정된 webpack.config.js 를 찾지 못해서 발생한 문제.\n  - 웹팩에서 사용한 설정 파일을 직접 넣어줘야 한다. 아니면 기본 설정 `webpack.config.js` 파일을 사용하면 된다.\n  ```js\n  // 참고 .eslintrc.js\n  // 프로젝트 경로에서 시작된다. 결국 웹팩 설정 파일을 설정해주면 해결 된다.\n  settings: {\n    // 'import/resolver': 'webpack',\n    'import/resolver': {\n      webpack: { \n        config: './build/webpack.config.dev.js'\n      },\n    },\n    'import/resolver': {\n      webpack: { \n        config: './build/webpack.config.prod.js'\n      },\n    },\n    'import/parser': 'babel-eslint',\n  },\n\n  ```\n- [x] sudo 없이 npm 접근할 수 없는 문제. 시스템 영역이기 때문에 sudo 를 사용해야 하고 어떤 경우에 의해 root 권한으로 폴더나 파일이 생성된 문제로 그럴 수 있음.\n- [ ] test 환경 설정 추가하기.\n- [ ] 배포 방법 정리 및 설정 개선. es, umd 등등 \n- [ ] webpack.config.js 같은 설정에서 env. 사용하면 빌드시 오류가 발생하는 데 이유를 찾지 못했다.\n  ```js\n  // 파일 ./build/webpack.config.js\n  // 여기서 env.development 사용할 수 없었다.\n  if (development === true) {\n    return dev(env, newArgs);\n  }\n\n  return prod(env, newArgs);\n  ```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyakuis%2Freact-dev-base","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsyakuis%2Freact-dev-base","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyakuis%2Freact-dev-base/lists"}