이번 주에는 지금까지 만들어왔던 cli 프로그램을 npm에 배포하는 작업을 해봤다. 아래 레포지토리에 현재까지 작업해 왔던 cli 프로그램이 있다.https://github.com/ghdtjgus76/design-system-cli 아무래도 우리가 원하는 동작들이 shadcn과 상당히 유사하기도 하고, npm에도 배포되어 있는 shadcn 패키지가 디자인 시스템 코드들이 아니라 cli 프로그램이기 때문에 npm 배포 관련 코드들을 많이 참고해서 이번 주 과제를 진행했다. shadcn ui npm 배포 설정 파일먼저 아래 코드는 shadcn에서 cli 프로그램을 배포할 때 사용한 설정 파일들이다.// ui/packages/cli/package.json{ "name": "shadcn-ui", "versi..

일단, cli 관련해서 계속해서 공부하다 보니, 노드 파일 시스템에 대한 제대로 된 이해 없이는 확실하게 이해하지 못할 거 같다는 생각이 들었다.그래서 이번 주는 노드 파일 시스템 공부부터 시작했다. 노드 파일 시스템전체를 다 알아보진 않을 거고 중요한 부분들 위주로 알아보도록 하자. 파일 시스템 모듈은 컴퓨터에 있는 파일 시스템이 작동하게 한다.파일 생성, 삭제, 읽기, 쓰기 등 수행 가능하다고 보면 된다. 이 파일 시스템 모듈은 fs가 가지고 있다.import fs from "fs"; 이는 동기 방식으로 파일 시스템 모듈을 불러온 것이고, fs 자체에서도 Promise를 지원한다.파일 시스템을 다루다 보면 비동기 방식으로 코드를 짜는 일이 많을 텐데, 항상 callback 함수로만 처리하다 보면, 콜..

일단, 저번 글에서도 봤겠지만, 우리 디자인 시스템은 cli 관련 기능을 제공하기로 했다.그 중에서 나는 init과 add cli 명령어 실습을 해봤다. shadcn에는 init, add, diff 이렇게 세 가지 명령어가 있다.간단하게 설명하자면, init 명령어에서는 사용하는 공통 의존성 등의 설치 여부를 판단해 설치해주는 기본 작업을 진행한다.add 명령어에서는 사용자가 컴포넌트를 선택하면 해당 컴포넌트 관련 의존성을 설치하고 해당 컴포넌트 자체 파일을 사용자가 지정한 경로에 생성해준다.diff 명령어는 사용자가 사용하고 있던 각 컴포넌트 파일과 업데이트된 파일이 있는지 확인하고 변경 사항이 있다면 이를 정리해서 알려주는 명령어이다. 사실, 이 실습을 처음 진행하려 했을 때는 add 명령어를 메인으..

우리가 결국 완성하고자 하는 디자인 시스템은 shadcn이라고 생각했다.이는 shadcn이 컴포넌트별로 의존성을 다운로드하는데, 다른 라이브러리들과는 다르게 전체 패키지를 가져오지 않아 상당히 매력적이라고 생각했기 때문이었다. 그래서 shadcn에 대해서 깊이 이해하는 시간이 없어서는 안 된다고 생각했고, 이 과정에서 우리가 이때까지 의문이었던 점들을 해결해 나갈 수 있을 것 같다는 생각이 들었다.shadcn을 가장 우선적으로 파악을 하려고 했는데, shadcn 자체가 radix ui에 상당히 의존적인 라이브러리이기 때문에 radix ui를 분석하고 난 후 shadcn을 분석할 수 있었다. 몇 주 안 됐지만 디자인 시스템 리서치를 하면서 가장 신기하고 의미 있었던 시간이 이번 주였던 것 같다.사실, 이번..

이번 3주차 과제는 css 라이브러리 분석이었다.우리가 기술 스택을 정함에 있어 이유가 있어야 한다고 생각했다.남들이 많이 쓰니까 말고 이 라이브러리를 써야 하는 이유가 있어야 한다고 생각했기 때문에 그에 초점을 맞춰서 과제를 진행했던 것 같다.한 명이 한 라이브러리를 깊게 알아오는 방식으로 이번 과제가 진행되었다. tailwind css, stylex, stitches, panda css 이렇게 네 가지 라이브러리를 알아오기로 했었는데, 그 이유는 우리가 추후 이 디자인 시스템 컴포넌트들을 사용해서 Next.js 페이지를 만들 것이기 때문에 제로 런타임 css 라이브러리들로 선택했었다.이와 관련된 얘기들은 본문에 추후 작성할 예정이다. 나는 이전부터 관심이 있었던 panda css를 알아보기로 했다.사..

2주차 과제는 바로 각자가 생각하는 디자인 시스템에 대한 정리 및 리서치였다.생각보다 다들 다 다른 내용으로 구성해 와서 그거마저 의미 있는 시간이었던 것 같다.디자인 시스템에 대한 본인만의 철학을 가져온 사람도 있었고, 딥하게 리서치해온 분도 있었다.나도 꽤 리서치를 많이 해갔었는데, 다들 다른 관점으로 리서치를 해와서 인사이트를 얻을 수 있는 시간이었던 것 같다. 디자인 시스템 정의일단, 나는 디자인 시스템 정의부터 알아봤다. 디자인 시스템이란 다양한 페이지와 채널을 걸쳐 공통의 언어와 시각적 일관성을 만들고 반복되는 작업을 줄임으로써, 규모에 맞게 디자인을 관리하기 위한 표준 집합이다. 라고 권위 있는 UX 컨설팅 기업 Nielsen Norman Group이 정의했다고 한다. 디자인 시스템 구성 요..

결국, CMC 수료를 해버렸다.수료 후, CMC에서 만난 프론트엔드 세 친구와 함께 디자인 시스템, 그리고 이를 활용해서 팀 블로그를 만들기로 했다. 우리 팀잠깐 우리 팀에 대해서 말해보자면, 넷 다 열정 가득이다.이 팀이라면 장기적으로 프로젝트를 해도 정말 좋겠다는 생각이 드는, 그런 팀이다.다들 매일 디스코드에서 모여서 작업하는데, 진짜 매일 온다.서로 에러도 해결해주고 질문도 받아줘서 그런가 상당히 편하다. 그래서, 이 친구들과 함께 장기적으로 디자인 시스템부터 팀 블로그까지 함께 만들어보는 경험을 해보기로 했다.사실, 프로젝트를 하면서는 설계에 시간을 들이기보다 단순히 부딪히며 코드를 짠 경험이 훨씬 많다.이번에는 설계에도 상당히 많은 시간을 들일 예정이고, npm 배포 경험, 코드 단에서의 개선..

이번에는 배열 관련 유틸 함수를 쭉 알아보려 한다. 사실 프로젝트에서 사용할 만한 유틸 함수들 위주로만 글을 적어보려고 했는데, 이 함수도 알아보면 좋을 만한 내용이 있어서 가져오게 되었다. 이번에는 arrayIncludes 함수이다. 아래 사진은 해당 함수 설명 문서이다. 해당 함수는 string과 같이 넓은 타입으로 정의된 요소가 문자열 리터럴 타입 같이 좁은 타입 요소로 이루어진 배열에 존재하는지 타입 단언 없이 판단하는 함수라고 생각하면 된다. 그래서 함수의 구현체를 살펴보도록 하자. export const arrayIncludes = ( array: T[] | readonly T[], item: unknown, fromIndex?: number ): item is T => { return arr..