19 8 프로젝트 셋업 - ChoDragon9/posts GitHub Wiki

프로젝트 시작

정책을 수립하는 단계로 코딩보단 정책을 수립하기 위한 커뮤니케이션 단계

  • 기획
    • Tiara 사용 유무
    • Git 저장소 위치
  • 디자인
    • UI 라이브러리 논의
    • 마크업 작업하지 않는 UI (차트, 캘린더, 에디터 등)
  • 마크업
    • 협업 방식 논의
    • 오픈 소스 대응 경험 유무(angular, react, vue 등)
  • 백엔드
    • 빌드&배포 논의
    • 개발 단계 논의
  • 프런트
    • Sentry 사용
    • 테스트 도입
    • 요구사항 분석 후 도구 검토
      • PDF 뷰어, 에디터, 차트, 달력 등
    • 형상 관리 정책

프런트 아키텍쳐

구조적인 설계 단계로 코드의 역할 분리를 위한 구조를 수립하고, 수립한 결과를 폴더를 통해 표현하는 단계이다.

도구 선택

  • Typescript
  • Nuxt

프로그래밍 패러다임

  • 함수형 또는 객체 지향 또는 둘다?
  • 함수형의 불변과 가변 분리 그리고 불변 데이터에 대한 사상을 따른다.
  • 상태와 행위를 가지는 컴포넌트는 객체지향 사상이 잘 어울린다고 판단하여 컴포넌트는 객체지향을 따른다.

컴포넌트 역할 분리

  • 불변과 가변을 분리하고, 가변 부분은 책임을 분리한다.
  • 불변 컴포넌트는 Atomic Design 중 일부를 따른다.
    • Atoms: 최소 단위로 분리한 컴포넌트이다. 버튼, 링크 등 최소 단위 요소를 분리했다.
    • Molecules: Atoms를 조합해서 사용한 컴포넌트이다.
  • 가변 컴포넌트는 책임에 따라 분리한다.
    • 레이아웃 컴포넌트
    • 페이지 컴포넌트
    • 페이지의 볼륨을 줄이기 위한 가변 컴포넌트

스토어

  • View
  • Backend API

플러그인 구조

  • fetch API의 Wrapper
  • FP Helper

Vue 요소

  • 필터
  • 디렉티브
  • 미들웨어

폴더 구조

설계가 완료되면 시각적으로 표현해야 한다. 구조를 시각적으로 표현할 수 있는 도구는 폴더가 가장 적절하다.

├─ components
│  ├─ atomic-design: Atomic Design
│  │  ├─ atoms
│  │  └─ molecules
│  ├─ pages: 페이지 내부에 사용할 가변 컴포넌트
│  └─ etc: 이외는 불변 컴포넌트
├─ layouts: 레이아웃 컴포넌트
├─ pages: 페이지 컴포넌트
├─ directives
├─ filters
├─ middleware
├─ constants: 상수
│  ├─ pages: 페이지 상수 정의
│  └─ store: Action, Mutation 상수 정의
├─ plugins: 플러그인 파일
├─ store
│  ├─ backend
│  └─ view
└─ types
  • 12/9 : constants/store 추가

코딩룰

컴퓨터 프로그램은 순차, 분기, 반복으로 이루어져있고, 비교 연산, 자료 구조 분해 및 할당과 같은 자주 사용하는 요소들이 존재한다. 이 과정은 구현 방법이 다양함으로 룰을 정할 필요가 있다.

순차

  • 비동기는 async 함수 사용하여 동기식으로 기술한다.
  • 에러 처리가 필요할 때, then, catch를 사용한다.

분기

반복

  • 코드에 Array.prototype.map, Array.prototype.filter를 활용하는 패턴이 보임
  • map, filter 함수 사용하여 함수 조합을 높게 해야함

비교 연산

  • 코드에서 동일한 타입의 값을 비교하는 패턴이 보임
    • ===을 사용함
  • isSame(src, target): boolean 형태로 대체

자료 구조 분해 및 할당

  • 분해는 pick, pluck 함수 활용
  • 할당은 assign 함수 사용
const obj = {key1: 'value1', key2: 'value2'}
pick(['key1'], obj) // { key1: 'value1' }
pluck(['key1'], obj) // ['value1']

assign({}, {key3: 'value3'}, obj)
// {key1: 'value1', key2: 'value2', key3: 'value3'}

선언형 함수 사용

자바스크립트 문법을 통해 작성한 기능들에 이름을 부여한 함수이다. 콜백 함수나 Array와 Object를 다루는 함수는 선언형 함수로 대체할 수 있는 기능들이 많다.

선언형으로 작성할 경우 상태와 로직을 작성해야 하지만 단어 하나의 함수로 설명이 가능하다. ES버전에 국한되지 않고 선언이 가능한 방법론이다.

참고: https://chodragon9.github.io/blog/declarative-function/

타입스크립트

  • 초기 어려웠던 점
    • 라이브러리 사용시, 타입 설치 필요
      • @types에 속한 모듈을 설치
    • 코딩하는 중에 타입을 선언해야 함, 약간의 흐름이 끊김
  • 타입스크립트를 사용하는 의미
    • 메타 데이터
    • 의존성 역전
    • 안정성/생산성
  • 사용하는 문법
    • namespace
    • interface
    • enum
    • type
    • keyof

[마지막] 문서화

지금까지 논의 후 결정했던 정책과 개발 룰에 대한 문서화를 한다. 스스로에게 메뉴얼이 될때도 있고, 인력 충원시 설명보다 문서가 도움이 된다.

  • 소스 설치 방법 및 실행 방법
  • 개발 가이드
    • Vuex 선언 방법
    • 코딩룰
  • 협업 가이드
  • 폴더 구조