Flutter 맛보기 1
직방 기술지원팀 기술공유 세미나 중 플러터를 소개한 내용입니다
[Methodology] CDD(Component Driven Development) - 계획(1/2)
CDD(Component Driven Development)란?
페이지 단위로 UI 개발이 이루어지는 것과는 반대로 UI 컴포넌트들부터 만들고 이를 기반으로 페이지를 구성.
예시 : AirBnB Dates UI Storybook
프로젝트 초기부터 UI 컴포넌트를 중심으로
<Button ... />
<Modal ... />
<Chart ... />
와 같이 개발하여 아래의 이점들을 얻기 위함이다.
- 디자인 체계화 & 디자이너와 효율적인 협업 : Storybook 같은 UI 컴포넌트 익스플러어 툴을 통해 체계적으로 관리, 디자이너와 쉽게 소통.
- 평행화 개발(Parallelize development) : 다른 프로젝트에서도 쉽게 쓰고 공유 가능.
- Decoupling : CSS, JS, I18n, UI 단위 테스트 등
글을 쓰게된 배경
회사에서 2.0 버전의 웹 서비스를 CDD 방식으로 개발할 계획이다.
나름의 설계안을 만들어 세미나 시간에 제시해보고자 한다.
현재 프론트엔드는 UI컴포넌트들이 CSS로만 정의되어 사용되고 있다(ex - Bootstrap)
이런 방식이 코드 재사용성과 UI 컴포넌트별 디커플링이 잘 안되는 문제가 있는 듯하다.
이것을 CDD답게 설계하여 다양한 제품별 웹 서비스들에 적용할 계획이다.
각 프로젝트 별로 프론트엔드 개발자가 따로 있다.
이들간의 협업 효율성과 디자이너와의 소통을 관리하는데 효율적인 방법을 위한 툴 또한 찾아보았다.
처음엔 Storybook 프로젝트를 만들어 Monorepo 방식으로 다른 프로젝트 레포에서 Storybook 레포를 가져다 쓰는 것을 생각했다.
하지만 이럴경우 Webpack설정을 잘 컨트롤해야하고 로컬에 필요없는 UI 컴포넌트들까지 불러와야하는 점이 불필요하다고 생각했다.
그래서 이 점을 보완할 수 있는 방법도 찾아보았다.
도입할 툴과 용도
- Bit : UI 컴포넌트의 라이브러리화
- 각 프로젝트에서 필요한 UI 컴포넌트만 가져옴(Tree shaking)
- 평행화 개발(Parallelize development)
- Storybook : UI 컴포넌트 익스플로러
- UI의 체계적인 관리.
- 어떤 UI컴포넌트들이 있는지 쉽게 파악
- 쉬운 비쥬얼 테스트 : 웹에 배포하여 디자이너와 쉽게 소통.
Workflow
with 디자이너 : 디바이스 스크린 규격을 확인해보며 피드백 줄 수 있도록 함.
- 회사에서 쓰는 Storybook 페이지를 만들어 모든 UI 컴포넌트를 담은 프로젝트를 웹에 배포.
- 단, 개발자들은 각각의 UI 컴포넌트 라이브러리 배포때마다 Storybook에 등록 후 재배포
with 다른 프로젝트의 프론트엔드 개발자
- 프로젝트에 필요한 UI 컴포넌트 들부터 개발
- Bit에 Publish(= npm 라이브러리 등록)
- 다른 프로젝트 개발자가 Consume(= npm install)
모든 UI를 처음부터 빌드한다기보다 참고한 라이브러리를 재가공하여 등록하는 방식으로 효율성을 높일 것 같다.
예를들어
- Element UI
- Datepicker 라이브러리
등을 커스텀 하는 수준으로 진행할 것 같다.
참고 자료
2023
2022
D3.js 차트 개발 Hands on lab
직방 기술지원팀 기술공유 세미나 중 D3.js를 소개한 내용입니다
직방이 사용자 행동 로그를 관리하는 방법. ZAMS
직방에서 작성했던 블로그 글을 공유합니다.
2019
[Tutorial] Storybook과 Bit을 활용한 UI 컴포넌트 관리(Workflow)
회사에서 프론트엔드 개발원칙을 SFC(Single File Component)에서 UI 컴포넌트를 기준으로 CDD(Component Driven Development)를 진행하려고 한다. 그래서 체계적으로 관리하기위해 Storybook과 Bit을 도입해보고자 한다. 각각의 역할은 ...
[Workflow] 프론트엔드 개발조직을 위한 워크플로 설계
작성 배경 회사의 작업구조를 페이지 중심 개발에서 UI 컴포넌트 중심 개발로 변경하면서 Workflow를 개선할만한 환경을 구성해야했다. 폐쇄망 기반에서 개발자간 UI 명세서 역할을 할 수 있는 Storybook과 그것을 공유할 Verdaccio라는 구축형 NPM Pri...
[Git] Git Command 정리
Git 시스템 이해하기
[Methodology] CDD(Component Driven Development) - 계획(1/2)
CDD(Component Driven Development)란?
GraphQL, Prisma, Apollo 공부
GraphQL? RESTful?
[ESlint & Prettier] 개발 관습 설정 in Visual Studio
회사 프로젝트를 작업하기 전 프론트엔드 개발자들 간의 코드 규칙을 Eslint와 Prettier 설정을 맞춰 관리해가는 방향을 정했다. 아직 협업을 할 경우는 없지만 미래에 인수인계 받거나 협업을 진행할 경우 코드관습이 달라 고생할 경우를 대비하기로 했다. 설정은 작업을 진행하며 ...
[CodingTest] 2019-10-26 SQL문제
공부겸 코딩테스트 사이트에서 토요일 오전 10시에 백엔드 포지션 테스트를 해준다기에 참여해봤다. SQL문제가 나왔는데 더 좋은 답이 있는것 같아 나중에 기록해두고 수정해보기로 한다.
[WebRTC] 공부
WebRTC란?
[Algorithm] 방법론 공부
동적 프로그래밍(Dynamic Programming)
Javascript 개념 정리
알고리즘 공부를 하며 부족했던 개념을 다시 정리
[CodingTest] 피보나치 수열
문제 : 피보나치 수열 제 1항부터 입력한 자연수(N)까지의 피보나치 수열 항들의 합을 구하여라.
Javascript Skills
각 반복문의 용도
[GoogleAnalytics] 자기 자신의 활동기록 제외 (prevent recording myself)
참고 5 ways to exclude your own visits from Google Analytics How to exclude your own [dynamic] ip from Google Analytics
[CodingTest] 2019 네이버 핵데이 코드테스트 문제1 with Javascript
문제1 문제를 알려줄 수 없다는 답변 받음. github에서 네이버 핵데이 검색하면 나옴.
[CodingTest] 2019 네이버 핵데이 코드테스트 문제3 with Javascript
문제3 문제를 알려줄 수 없다는 답변 받음. github에서 네이버 핵데이 검색하면 나옴.
[CodingTest] 2019 카카오 신입 공채 1차 - 2번 실패율 문제 with Javascript
오픈채팅방 문제 바로가기 링크 카카오의 설명 블로그 나의 첫답안 function solution(N, stages) { let st = stages, stats = []; for(let i=1;i<N+1;i++){ // n let selectedN...
[Syntax] 새로 알게된 파이썬 문법 정리
chaning comparison 파이썬은 chaning comparison이라는 신기한 문법이 있다. 참고 if a < b and b < c : (...) 라는 구문이 if a < b < c : (...) 으로 연산된다. 직관적인 문법이 인상적. ...
[CodingTest] i를 제외한 배열 요소들의 곱
문제 정수 배열이 주어지면 인덱스 i에 해당하는 값 이외의 모든 값들의 곱인 배열을 구하여라. 보너스 : 나눗셈을 안쓰고 풀기
[DataType] Map & Set
Set vs Array - 관련기사 Set 유일값들의 배열이 필요할때(distinct) 집합의 개념이 필요할때(차집합, 교집합 등등 자체 메서드들이 많음.) index가 필요 없을때 Array에서 중복값을 없앨때 => ...
[CodingTest] 배열의 두 값을 합하여 k값 만들기
문제 list라는 행렬과 k라는 자연수가 주어짐. list의 두 값을 합하여 k값을 만들 수 있으면 true, 없으면 false를 리턴해라. 보너스 : 한줄 표기
[CodingTest] 매일 프로그래밍 - 2019-03-26
문제 정수 배열(int array)가 주어지면 가장 큰 이어지는 원소들의 합을 구하시오. 단, 시간복잡도는 O(n).
[CodingTest] Algospot - Anagram 문제
<!– ## 설명 각 문자열의 알파벳을 재배열하였을때 같은 단어가 되는 단어들. 예시 tab - bat github - hbuitg
[CodingTest] 2019 카카오 신입 공채 1차 - 1번 오픈채팅방 문제 with Javascript
오픈채팅방 문제 바로가기 링크 카카오의 설명 블로그 나의 답안 ```javascript function solution(record) { let accounts = [], events = [], answer = []; function setEn...
[CodingTest] 별(*) 박스 만들기
문제 설명 별(*) 박스 만들기 입력값 a(rows)와 b(cols)에 해당하는 별박스 만들기
2018
SGIS-shpToGeojson
SGIS에서 받은 지도데이터(.shp)를 geojson으로 변경하는 작업 내용