[ edward.kk ] 프로젝트 세팅 문서 정의

[bepyan]

No CRA / React + Typescript + Webpack

최종 결정한 프로젝트 스팩입니다.

역할
프레임워크	react
언어	typescript
빌드도구	webpack + tsconfig
스타일도구(css-in-js)	stitches
코드 컨벤션	eslint + prettier
디랙토리 컨벤션	VAC 패턴
전역 상태 관리	Context API

커밋 컨벤션

feat. 버튼 마크업 구현

코드
feat	기능을 구현한 커밋에 사용
fix	기능에 갖고 있는 버그를 고침
style	현 로직에 변동을 주지않는 코드 컨벤션(style)를 변경
chore	라이브러리를 추가
refector	디랙토리 구조를 변경

할 일

• [x] 프로젝트 스펙 설정하기
• [x] 프로젝트 webpack typescript 세팅하기
• [x] feature issue 정리하기

[bepyan]

Webpack & Babel 관련 설정

• typescript를 사용하기에 babel 설정을 하지않고 tsconfig를 사용

• awesome-typescript-loader vs ts-loader

  • awesome-typescript-loader로 babel설정과 ts설정을 병행할 수 있음
  • awesome-typescript-loader가 더 무겁고 현재 사용하지 않는 추세
  • js를 쓰지 않을거 같아서 ts-loader 사용

• dev webpack

  • devServer를 통해 편리하게 개발 내용을 웹페이지에서 확인
  • static 서비스할 정적 파일 경로를 명시
  • compress gzip 압축
  • hot 빠른 리로드
  • historyApiFallback 유요하지 않는 경로를 main 디랙토리/로 다이랙팅

• prod wepback

  • optimization 수행. (추후에 더 조사)

[bepyan]

css-in-js 라이브러리 선택

• 직접 개발하기?

  • https://celsiusnotes.com/javascript-template-literals/
  • https://blog.eunsukim.me/posts/introducing-css-in-js#solution
  • 타임스크립트로 감당해낼 자신이 없다..

• Runtime CSS-in-JS

  • styled-component, emotion
  • 사용해봤기에 새로운 도전을 하고 싶다.

• Zero Runtime CSS-in-JS

  • 런타임에 css를 생성하지않아 페이지를 로드할 때 더 빠를 수 있다.
  • 이번 프로젝트 CRA를 사용하고 있지 않아 webpack 설정하여 적용하기 용이하다.
  • linaria, vanilla-extract
    • linaria 같은 경우 styled-component 문법 그대로 사용할 수 있어서 러닝커브가 없을 것 같다.
    • vanilla-extract같은 경우 tagged template literals를 지원하지 않는다.

• Near Runtime CSS-in-JS

  • stitches
    • runtime overhead와 zero-runtime의 제약을 해결한다.
    • SSR 환경에서도 잘 동작이 되도록 최적화 되어 있다.
    • Stitches는 CSS in JS인데 런타임에서 각각의 CSS 프로퍼티가 Atomic CSS처럼 적용한다.
      • 반복되는 스타일에 대해 atomics class로 변환하여 같은 class를 사용할 수 있도록 최적화한다.
    • CSSStylesSheet.insertRule 을 사용하여 CSSOM에 직접 삽입한다.
      • Emotion은 같은 CSS 코드가 중복적으로 삽입되는 OOCSS 방식 사용한다.

stitches를 써보자. linaria는 2017에 나온 라이브러리인데 나는 완전 최신 기술을 맛보고 싶다. vanilla-extract은 2021에 나왔고 stitches는 2020에 나왔다. vanilla-extract는 .css.ts 파일을 작성을 권장하는데 파일 분리하기는 싫다. VAC 패턴으로 구현해볼 생각이기에. stitches의 variants는 스타일 관리하기 용이해보이고 현재 SSR이 각광 받는 가운데 한번 경험하면 나중에 도움이 될 것 같다.

• 참고
  • https://so-so.dev/web/css-in-js-whats-the-defference/
  • https://velog.io/@asdhugh1/Styling-with-Linaria
  • https://www.javascript.christmas/2020/15
  • https://velog.io/@hseoy/Zero-Runtime-CSS-in-JS-feat.-Linaria

[bepyan]

설계 패턴 및 디랙토리 구조

디랙토리구조는 개발하면서 계속 리팩토링할 생각.

presentational & container 패턴에서 VAC 패턴를 적용해보고 싶다.

• View 로직(UI 기능, 상태 관리)과 렌더링(JSX)의 관심사 분리가 목적이다.
• https://kyung-a.tistory.com/m/35
• https://www.stevy.dev/react-design-guide
• https://wit.nts-corp.com/2021/08/11/6461
• https://velog.io/@holim0/React-Design-Pattern

[bepyan]

협업을 진행하지 않기에 storybook은 사용하지 않는다. 리소스 낭비가 심할 것 같다.

[bepyan]

Feature 정리

---

• 디자인 시스템 구축
  • 폰트, 색상, 아이콘
• 이슈목록 화면

• 새로운 이슈 작성 화면
• 이슈 상세 화면

• 이슈목록 / 필터링
• 이슈목록 / 다중선택

• 레이블 목록
• 마일스톤 목록

• 로그인 화면
  • github OAuth 연동