Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/taeuk-gang/taeuk-template

taeuk's template
https://github.com/taeuk-gang/taeuk-template

custom-elements firebase lit-html mocha shadow-dom storybook wct webcomponents

Last synced: 24 days ago
JSON representation

taeuk's template

Host: GitHub
URL: https://github.com/taeuk-gang/taeuk-template
Owner: taeuk-gang
Created: 2019-06-26T06:44:49.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2023-01-07T06:44:28.000Z (almost 2 years ago)
Last Synced: 2023-03-07T21:04:53.836Z (over 1 year ago)
Topics: custom-elements, firebase, lit-html, mocha, shadow-dom, storybook, wct, webcomponents
Language: JavaScript
Homepage: https://taeuk-project.web.app/app
Size: 2.78 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 34
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # 태욱이의 프로젝트 템플릿

[![Build Status](https://travis-ci.org/taeuk-gang/taeuk-template.svg?branch=master)](https://travis-ci.org/taeuk-gang/taeuk-template) [![codebeat badge](https://codebeat.co/badges/fa88fd81-fc65-45a7-8618-d3314ef87c21)](https://codebeat.co/projects/github-com-taeuk-gang-my-project-master) ![GitHub](https://img.shields.io/github/license/taeuk-gang/taeuk-template.svg) ![GitHub closed pull requests](https://img.shields.io/github/issues-pr-closed/taeuk-gang/taeuk-template.svg) ![GitHub package.json version](https://img.shields.io/github/package-json/v/taeuk-gang/taeuk-template.svg)

## :memo: 요약

> 나의 기본이 되는 프로젝트 구조 설정

> #### 목표

>

> - [x] 프로젝트 구조 설정

> - [x] Lit-html 프로젝트 사용

> - [x] 일관성 있는 Commit 메세지 작성

> - [x] Storybook.js를 이용한 UI 테스트 모델 환경 구성

> - [x] ESLint 엄격한 사용 (Complexity와 CodeQuaility 관리) 

>

>   - [ ] 모든 설정 번역 하기(아직 1/4 진행...)

> - [x] Webpack 사용

> - [x] Web-dev-server 사용

>

>   - [ ] 나중에 도메인 연결시 Proxy 설정

>   - [x] Git pages 기능 사용

> - [x] 커스텀 엘리먼트 + Proxy() 를 이용한 가상 엘리먼트 VanilaJS 프로젝트 구성 ([참고1](https://dev-momo.tistory.com/entry/javascript-ES6-Proxy), [참고2](https://stackblitz.com/edit/2-way-bind-exapmle?file=index.js), [참고3](https://meetup.toast.com/posts/158))

> - [x] 자동 배포 및 빌드 환경 구축 - Travis CI (서버가 필요없는 CI 환경 구성)

> - [x] 브라우저 호환성 검사하기 - [참고사이트](https://caniuse.com/#feat=shadowdomv1)

>   - [x] README.MD에 FlowChart, Mermaid 사용하기 - [참고](https://baemincheon.tistory.com/29)

> - [ ] 라우팅 관리하기 - [참고사이트](https://poiemaweb.com/js-spa) -필수(2)

> - [x] 원격 DB 사용 - Firebase -필수(3)

>

>     - [ ] Security rule 짜기

> - [x] Auth 로그인 구현

>   - [x] 서버리스 프로그래밍하기 - Google Cloud Functions -필수(1)

> - [x] 오픈소스로 만들 것 (오픈소스에 대한 이해 필요) - [참고](https://janelia-flyem.github.io/licenses.html)

> - [x] 문서화 양식 제작

> - [x] i18n - 다국어처리

> - [ ] Foundation 프레임워크 사용

>     - [ ] 이건 굳이 안사용 될 것 같은 느낌도 있음

> - [ ] FE 가이드를 참고하기

> - [ ] Clean code -javascript 참고하기

> - [ ] Toast UI 가이드 참고하기

> - [x] PostCss - Autoprefixer 연결하기

>     - [x] 번들링시, 자동

> - [ ] Docker 사용

>     - [ ] 깃허브 연결법 조사

> - [x] SCSS 사용하기

>

> --------------------

>

> #### 깃허브에서 하기 힘든 것

>

>  - [ ] 쿠버네틱스가 사용 가능한가?

>   - [ ] SOP 회피하기 - CROS 고려 - [Heroku로 프록시 우회 서버 만들기](https://github.com/Rob--W/cors-anywhere)

## :mag: 참고자료

- [프로젝트 구조](https://joshua1988.github.io/web-development/vuejs/vue-structure/)

- [깃관련 명령 모음](https://github.com/mingrammer/git-tips/blob/master/README.md#%EC%B6%A9%EB%8F%8C%EB%90%9C-%EB%AA%A8%EB%93%A0-%ED%8C%8C%EC%9D%BC-%EB%82%98%EC%97%B4%ED%95%98%EA%B8%B0)

- [웹 컴포넌트 - lit-html](https://kyu.io/%EC%9B%B9-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B85%e2%80%8a-%e2%80%8alit-html%EB%A1%9C-%EB%A6%AC%EC%97%91%ED%8A%B8%EC%B2%98%EB%9F%BC-%EC%BD%94%EB%94%A9%ED%95%98%EA%B8%B0/)

- [github-odo-web-components](https://github.com/kyuwoo-choi/todo-web-components)

- [github-webcompoents-polyfills](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs#how-to-use)

- [Shadow DOM은 무엇일까?](https://wit.nts-corp.com/2019/03/27/5552)

- [Storybook.js - UI 테스트](https://release-3-4--storybooks-polymer.netlify.com/?selectedKind=Welcome&selectedStory=Welcome&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Fstories%2Fstories-panel)

- [Redux zero - Store 관리](https://github.com/redux-zero/redux-zero)

- [코드 퀼리티 검사 사이트](https://codebeat.co/projects/github-com-taeuk-gang-my-project-master)

- [ESLint Rules](https://eslint.org/docs/rules/)

- [Webpack 설정 및 webpack-dev-server](https://www.daleseo.com/webpack-development/)

- [브라우저 호환성 검사 사이트](https://caniuse.com/#feat=shadowdomv1)

- [웹 개발자 로드맵 - 항상 신기술 체크](https://github.com/devJang/developer-roadmap)

- [바벨 설정](https://babeljs.io/docs/en/babel-register)

- [Travis CI 환경 구축](https://d2.naver.com/helloworld/2564557)

- [Toast UI 가이드](https://ui.toast.com/weekly-pick/ko/)

- [FE Guid](https://ui.toast.com/fe-guide/ko/)