{"id":16396522,"url":"https://github.com/minje-98/react-template","last_synced_at":"2026-04-10T00:50:57.902Z","repository":{"id":109476507,"uuid":"486870669","full_name":"MINJE-98/React-Template","owner":"MINJE-98","description":null,"archived":false,"fork":false,"pushed_at":"2022-07-04T08:18:02.000Z","size":61,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-23T06:14:24.957Z","etag":null,"topics":["babel","react","typescript","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/MINJE-98.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-04-29T07:02:05.000Z","updated_at":"2022-06-28T11:06:06.000Z","dependencies_parsed_at":"2023-05-21T19:45:41.815Z","dependency_job_id":null,"html_url":"https://github.com/MINJE-98/React-Template","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MINJE-98/React-Template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MINJE-98%2FReact-Template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MINJE-98%2FReact-Template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MINJE-98%2FReact-Template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MINJE-98%2FReact-Template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MINJE-98","download_url":"https://codeload.github.com/MINJE-98/React-Template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MINJE-98%2FReact-Template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273955498,"owners_count":25197578,"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","status":"online","status_checked_at":"2025-09-06T02:00:13.247Z","response_time":2576,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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","react","typescript","webpack"],"created_at":"2024-10-11T05:07:40.552Z","updated_at":"2025-12-30T21:28:59.704Z","avatar_url":"https://github.com/MINJE-98.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Code Convention\n\n\u003e 기본적인 코드 컨벤션입니다.\n\n# Github\n\n## 형상 관리\n\ngit flow, git-hub flow, git-lab flow중 프로젝트에 맞는 형상 관리를 채택합니다.\n\n## Commit message\n\n[Conventional Commits](https://www.conventionalcommits.org/ko/v1.0.0-beta.4/)을 준수합니다\n\n## Merge History\n\n[Squash and Merge ( Linear History )](https://tilog.io/argon1025/46)를 준수합니다\n\n## Issue\n\n정확한 정보와 근거를 바탕으로 리뷰합니다.\n\n## PR\n\n쉽게 읽을 수 있어야 합니다\n하나의 PR은 하나의 단위 기능만 개발해야 합니다\n\n## eslint\n\n[eslint-config-airbnb](https://github.com/apple77y/javascript/tree/master/react)를 사용합니다.\n\n- eslint-config-airbnb-typescript를 확장합니다.\n\n- [ReactV17의 JSX의 Transform 방식](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)으로 인해 plugin:react/jsx-runtime를 확장합니다.\n\n- prettier를 확장합니다.\n\n- 프로젝트에 따라 룰을 수정합니다.\n\n# 패키지 관리\n\n\u003e 이 섹션은 패키지 관리 규칙에 대해 다룹니다.\n\n## 패키지 매니저\n\n패키지 매니저는 `yarn` 을 사용합니다.\n\n## 패키지 의존성\n\n[devDependencies](https://docs.npmjs.com/cli/v8/configuring-npm/package-json#devdependencies)와 [dependencies](https://docs.npmjs.com/cli/v8/configuring-npm/package-json#dependencies)를 구분하여 패키지를 관리합니다.\n\n### peerDependencies warn이 발생한 경우\n\n1. PeerDependencies 패키지가 이미 설치 되어 있는지 확인합니다.\n2. 메이저 업데이트를 제외한 업데이트가 필요할 시 업데이트합니다.\n3. 작업을 PR에 명시합니다.\n\n### 버전 범위 지정\n\n버전 범위 지정를 통해 모든 팀이 동일한 환경으로 개발하는 것을 보장합니다.\n\n→ [https://semver.org/lang/ko/](https://semver.org/lang/ko/)\n\n## 패키지 파일 접근\n\nPackage.json, yarn.lock 파일은 직접 수정하지 않고 패키지 관리자 명령어를 통해 수정합니다.\n\n→ [npm command](https://docs.npmjs.com/cli/v8/commands), [yarn command](https://classic.yarnpkg.com/en/docs/cli/)\n\n# Typescript\n\nstrict 모드를 활성화합니다.\n\nprops가 2개이상인 경우 interface를 해당 파일 위에 생성합니다.\n\n각 객체간의 메세지를 주고받을 때 반드시 typeSafe 하게 타입을 정의합니다.\n\n# 파일 네이밍 컨벤션\n\ntsx,jsx 파일은 파스칼 케이스를 준수합니다.\n\n그밖의 다른 파일들은 카멜 케이스를 준수합니다.\n\n폴더 이름은 케밥케이스를 준수합니다.\n\n# Import 정렬\n\n외부 라이브러리 → 컴포넌트 → 타입\n\n순으로 Import를 정렬합니다.\n# 파일 구조\n\n```tsx\n+ src\n+ components\n\t+ atom\n\t\t+ button\n\t\t\t| HeadLogin.tsx\n\t\t\t| ModalLogin.tsx\n\t\t\t| index.ts\n\t\t| Input.tsx\n\t\t| Image.tsx\n\t+ alri..\n\t\t+ login\n\t\t\t| hooks\n\t\t\t| interface\n\t\t\t| style.css\n\t\t\t| test.ts\n\t\t\t| index.tsx\n+ pages\n\t| login.tsx\n\t| home.tsx\n+ hooks\n\t+ react-query\n\t\t| index.ts\n\t+ custom-hook\n+ context\n+ services\n\t+ api\n\t\t+ core\n\t\t\t| interface\n\t\t\t| core.ts\n\t\t\t| index.ts\n\t\t+ exception\n\t\t\t| interface\n\t\t\t| exception.ts\n\t\t\t| index.ts\n\t+ message\n\t\t| sussess\n\t\t| loading\n\t\t| error\n+ interface\n+ constants\n\t+ environment\n\t\t| host.ts\n\t\t| index.ts\n+ utility\n\t+ date\n\t+ ramdom-image\n index.tsx\n```\n\n# 목표\n\n각 역할에 맞게 폴더를 분리하여 서로 의존성을 낮추도록 유도합니다.\n\n# 타입\n\n인터페이스가 필요하면 interface를 먼저 작성합니다.\n\ninterface를 공유해야 할 경우 전역 interface를 만들고 각 객체의 interface의 폴더에 확장하여 interface를 사용합니다.\n\n# 상태\n\n## 내부 상태\n\n각 컴포넌트의 내부적인 상태는 컴포넌트에 해당하는 hooks에서 관리합니다. \n\n## 전역 상태\n\n전역으로 관리가 되어야하는 상태는 최상위 폴더의 hooks에서 관리합니다.\n\ncontext 또한 최상위 폴더에서 관리됩니다.\n\n## 서버 상태\n\n서버 상태는 항상 최상위 폴더인 hooks에서 관리합니다.\n\n# 서비스\n\n서버와 통신하기 위한 모듈들을 설정하는 레이어입니다.\n\n# 상수\n\n환경변수, 프로젝트의 상수값을 담당하는 레이어입니다.\n\n# 유틸리티\n\n애플리케이션에서 필요한 모듈을 레핑하여 애플리케이션에 필요한 형태로 반환하는 레이어입니다.\n\n# Article\n\n## webpack에서 BabelConfig를 구성하지않고 babel.config.js를 따로 구성하는 이유\n\nwebpack에서 option으로 설정하게 되면 webpack에서만 babel을 사용할 수 있고, 다른 babel을 사용하는 라이브러리는 따로 설정을 해줘야하기 때문이다.\n\n[참고](https://stackoverflow.com/questions/43206062/why-do-i-have-to-put-babel-presets-inside-babelrc-and-webpack-config-js/43208353#43208353)\n\n## polyfill을 따로 설정하는 걸까?\n\nE11, 오래된 브라우저는 아래와 같은 JS문법을 지원하지 않는다.\n\n- Promises\n- Map\n- Set\n- Symbol\n- Weakmap\n- Weakset\n- Array.from, Array.includes, Array.of, Array#find, Array.buffer, Array#findIndex\n- Object.assign, Object.entries, Object.values\n\nes5로 변환이 되어도 위의 문법을 지원하지 않는 오래된 브라우저를 위해 polyfill을 사용하여 추가적으로 동작할 수 있게 해야한다.\n\n[참고](https://levelup.gitconnected.com/why-you-should-add-babel-polyfill-for-every-react-application-1997bdb8a524)\n\n## ts-loader vs babel-typeScript\n\n트렌스파일링을 할때 타입을 체크하고 싶으면 ts-loader를 webpack에서 설정해준다.\n\n트렌스파일링을 빠르게 하여 빌드 속도를 높히고 싶다면 babel-typeScript를 사용한다.\n\nbabel-typeScript를 사용하게 되면 타입체크를 하지않기 때문에 ts compiler로 타입을 체크하고, 빌드해야함.\n\n[참고1](https://evanlouie.github.io/posts/typescript-babel-preset-typescript-ts-loader)\n[참고2](https://stackoverflow.com/questions/38320220/how-to-setup-typescript-babel-webpack)\n[참고3](https://www.typescriptlang.org/ko/docs/handbook/babel-with-typescript.html)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminje-98%2Freact-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fminje-98%2Freact-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminje-98%2Freact-template/lists"}