[Workflow] 프론트엔드 개발조직을 위한 워크플로 설계

작성 배경

회사의 작업구조를 페이지 중심 개발에서 UI 컴포넌트 중심 개발로 변경하면서 Workflow를 개선할만한 환경을 구성해야했다.
폐쇄망 기반에서 개발자간 UI 명세서 역할을 할 수 있는 Storybook과
그것을 공유할 Verdaccio라는 구축형 NPM Private Registry를 도입하면 좋겠다는 생각에 아래의 내용을 팀에 제안했다.
또한 기존의 프로젝트 중심에서 Task중심으로 업무프로세스를 변화하여 애자일에 적합하게 Workflow를 구성해보았다.

UI 컴포넌트 모듈관리 : Storybook

시연 : 스토리북 시연
설명
- Ant, materialize 같은 사이트처럼 문서 기능(UI 컴포넌트 개발 명세서)
- 회귀 테스트 가능(ex- 디바이스 크기별 체크가능 / 중국어, 영어등 외국어 일경우 UI 변화도 체크가능 등등)

목표

Page기반 → UI 컴포넌트 기반으로 전환 과정에서 개발 & 디자인 Work flow 개선
- 구조도
- 구조도 상세 설명
  - 프로젝트 중심 → Task 중심
  작업과정
  
  공유 과정
- 쓰임세
  - 개발 : 공통 디자인 컴포넌트 관리, UI 컴포넌트 명세서
  - 디자인 : 실제 웹 상에서의 시각 테스트(Storybook)
장점

단, 디자인 / 개발 파트의 효용성을 계속 생각하며 고도화해야 함.
- 회귀 테스트(모바일, 태블릿, 데스크탑 화면 조정 가능)
  - 함께 쓰면 좋은 크롬 확장프로그램 : chrome toogle device topbar, stylebot, colorpick eyeDroper
- 디자인적인 효용성
  - 실제 웹에선 어떻게 나오는지를 확인할 수 있음. → 하지만 실제 구현 페이지에서는 다르게 보일 수 있음. 결국은 실제 서비스 페이지에서 확인해야함.
  - 해당 UI를 마음대로 값을 조정하여 변수들을 체크해볼 수 있음.
  - 국제화 표준값을 변경해보며 UI 확인이 가능.
- 개발적인 효용성
  - UI 코드 명세서(어떻게 생겼고 어떻게 사용해야하는지)
  - 단위 테스트에 적합(인터렉티브한 UI에 한해서만 해야함.)
  - 프로젝트 중심 → Task 중심으로 조금은 바꿀 수 있음. 스프린트도 가능.

위험성

디자인 파트
- 제플린같은 디자인 툴을 사용하는 편이 더 나을 때가 많음. 실제 웹에서 어떻게 구현되는가를 컴포넌트별로 체크할때만 효용성이 있음.
개발 파트
- 오버 엔지니어링 : 단위테스트가 필요없을 정도로 마이너한 일들은 명세서의 역할만 할 정도로 개발. → 모듈화가 필요할때마다 개발 구성원 모두가 검토하는 프로세스가 필요함
- 개발기한 → 지금은 UI 컴포넌트 개발과 프론트앤드 기능개발을 병렬적으로 해야함.
- 아래의 그림처럼 운영하는 웹 어플리케이션들에서 막상 공유되는것이 없거나 적을 경

[모듈화 위험 있음]

[모듈화 적합]

계획

개발 구성원들이 다 바빠서 실제 활용은 내년 예상.
일단 구조부터 만들기. - 승현
xxxx.github.io 에 Storybook 배포
디자인에 맞춰서 도입이 필요 없을 경우엔 Skip.

기능 모듈 공유 : Verdaccio

기능 모듈 공유 : Verdaccio (구축형 NPM Private to 개발서버)

설명

npm install 시에 https://registry.npmjs.org 에서 기본적으로 패키지를 가져옴.
이것을 개발 서버에 구축형(Verdaccio)으로 만든다.
UI 컴포넌트, 기능 모듈을 각각 1개씩 레포를 만든다. 각 레포는 Mono 레포의 구조로 모듈들을 관리한다.

시연

UI 컴포넌트 공유

도입의 장점

작업 구조의 변화
- 프로젝트 중심으로 개발자 개인이 하나씩 맡아서 돌아가는 구조를 Task 중심으로 바꿀 수 있지 않을까. → 코드 퀄리티, 개인의 업무 과중 해소.
- ex) A개발자는 프로젝트 a와 b 라는 인풋이 주어질 경우 c라는 결과물만 나오는 기능 작업

참고자료

NPM 명령어

2023 1
2022 2
2019 45
2018 1

2023

Flutter 맛보기 1

3 분 소요

직방 기술지원팀 기술공유 세미나 중 플러터를 소개한 내용입니다

2022

D3.js 차트 개발 Hands on lab

5 분 소요

직방 기술지원팀 기술공유 세미나 중 D3.js를 소개한 내용입니다

직방이 사용자 행동 로그를 관리하는 방법. ZAMS

최대 1 분 소요

직방에서 작성했던 블로그 글을 공유합니다.

2019

[Tutorial] Storybook과 Bit을 활용한 UI 컴포넌트 관리(Workflow)

1 분 소요

회사에서 프론트엔드 개발원칙을 SFC(Single File Component)에서 UI 컴포넌트를 기준으로 CDD(Component Driven Development)를 진행하려고 한다. 그래서 체계적으로 관리하기위해 Storybook과 Bit을 도입해보고자 한다. 각각의 역할은 ...

[Scaffold] Scaffold Module 개발

최대 1 분 소요

도입 이유

[Workflow] 프론트엔드 개발조직을 위한 워크플로 설계

2 분 소요

작성 배경 회사의 작업구조를 페이지 중심 개발에서 UI 컴포넌트 중심 개발로 변경하면서 Workflow를 개선할만한 환경을 구성해야했다. 폐쇄망 기반에서 개발자간 UI 명세서 역할을 할 수 있는 Storybook과 그것을 공유할 Verdaccio라는 구축형 NPM Pri...

[Git] Git Command 정리

3 분 소요

Git 시스템 이해하기

[Design Pattern] Monorepo 공부

2 분 소요

결론

[Methodology] CDD(Component Driven Development) - 테스트(2/2)

1 분 소요

Intro

[Methodology] CDD(Component Driven Development) - 계획(1/2)

1 분 소요

CDD(Component Driven Development)란?

GraphQL, Prisma, Apollo 공부

2 분 소요

GraphQL? RESTful?

[CodingTest] Combination(조합) 문제풀이 2

최대 1 분 소요

문제

[CodingTest] Combination(조합) 문제풀이 1

1 분 소요

문제

[ESlint & Prettier] 개발 관습 설정 in Visual Studio

1 분 소요

회사 프로젝트를 작업하기 전 프론트엔드 개발자들 간의 코드 규칙을 Eslint와 Prettier 설정을 맞춰 관리해가는 방향을 정했다. 아직 협업을 할 경우는 없지만 미래에 인수인계 받거나 협업을 진행할 경우 코드관습이 달라 고생할 경우를 대비하기로 했다. 설정은 작업을 진행하며 ...