태욱이의 프로젝트 템플릿

📝 요약

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

목표

• 프로젝트 구조 설정

• Lit-html 프로젝트 사용

• 일관성 있는 Commit 메세지 작성

• Storybook.js를 이용한 UI 테스트 모델 환경 구성

• ESLint 엄격한 사용 (Complexity와 CodeQuaility 관리)

  • 모든 설정 번역 하기(아직 1/4 진행...)

• Webpack 사용

• Web-dev-server 사용

  • 나중에 도메인 연결시 Proxy 설정
  • Git pages 기능 사용

• 커스텀 엘리먼트 + Proxy() 를 이용한 가상 엘리먼트 VanilaJS 프로젝트 구성 (참고1, 참고2, 참고3)

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

• 브라우저 호환성 검사하기 - 참고사이트

  • README.MD에 FlowChart, Mermaid 사용하기 - 참고

• 라우팅 관리하기 - 참고사이트 -필수(2)

• 원격 DB 사용 - Firebase -필수(3)

  • Security rule 짜기

• Auth 로그인 구현

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

• 오픈소스로 만들 것 (오픈소스에 대한 이해 필요) - 참고

• 문서화 양식 제작

• i18n - 다국어처리

• Foundation 프레임워크 사용

  • 이건 굳이 안사용 될 것 같은 느낌도 있음

• FE 가이드를 참고하기

• Clean code -javascript 참고하기

• Toast UI 가이드 참고하기

• PostCss - Autoprefixer 연결하기

  • 번들링시, 자동

• Docker 사용

  • 깃허브 연결법 조사

• SCSS 사용하기

---

깃허브에서 하기 힘든 것

• 쿠버네틱스가 사용 가능한가?
• SOP 회피하기 - CROS 고려 - Heroku로 프록시 우회 서버 만들기

🔍 참고자료

• 프로젝트 구조

• 깃관련 명령 모음

• 웹 컴포넌트 - lit-html

• github-odo-web-components

• github-webcompoents-polyfills

• Shadow DOM은 무엇일까?

• Storybook.js - UI 테스트

• Redux zero - Store 관리

• 코드 퀼리티 검사 사이트

• ESLint Rules

• Webpack 설정 및 webpack-dev-server

• 브라우저 호환성 검사 사이트

• 웹 개발자 로드맵 - 항상 신기술 체크

• 바벨 설정

• Travis CI 환경 구축

• Toast UI 가이드

• FE Guid