프로젝트 개발일지 썸네일형 리스트형 [warrr-ui 디자인 시스템 개발기] 아이콘 자동화 피그마 플러그인 개발 이번 주 과제는 아이콘 자동화 피그마 플러그인 개발이었다.이거까지 하게 될 줄은 몰랐는데, 당근, 채널톡 코드들을 좀 살펴보니 그렇게까지 무리한 도전은 아닐 거 같아서 그냥 시작해 버렸다. 일단, 피그마 플러그인이 돌아가는 로직에 대한 가벼운 이해가 필요해 그거부터 알아보도록 하자. 피그마 플러그인 로직다음 사진은 피그마 플러그인이 돌아가는 로직을 한눈에 파악할 수 있는 좋은 레퍼런스이다.간단히 말하자면, 피그마 플러그인은 두 계층에서 동작한다.sandbox와 iframe인데 여기서 sandbox는 피그마 플러그인 관련 로직, 즉 비즈니스 로직 쪽과 관련이 있고, iframe은 우리가 보는 UI와 관련이 있다.중요한 점은 sandbox에서는 브라우저 API 같은 건 호출하지 못하고 플러그인 API는 호출.. 더보기 [와우 디자인 시스템 개발기] 타입스크립트 선언 파일에서 절대 경로가 변환되지 않는 문제 해결 컴포넌트 개발을 마치고 빌드 후 docs에서 테스트해 보면서 알게 된 사실이 있다. 바로,,, 타입 에러를 제대로 잡아주지 못한다는 것이었다. wow-ui의 기존 롤업 설정에서는 아래와 같이 절대 경로를 변환해 주는 플러그인을 도입해 놨기 때문에 문제가 없을 거라 생각했다. 그리고 이 플러그인을 도입했을 때 styled-system 경로도 잘 변환됐기 때문에 당연히 src/types 즉 공통 타입 파일들도 문제없이 변환해 줄 거라 생각했다.alias({ entries: [ { find: "@", replacement: path.join(__dirname, "./src") }, { find: "@styled-system", replacement: path.join(__dirname, "./styled-sy.. 더보기 [와우 디자인 시스템 개발기] 컴포넌트 빌드 전 entry point 자동 생성 스크립트 개발 및 개선 바로 전 글에서 배럴 파일을 사용하는 것보다 컴포넌트별로 multiple entry point를 지정해서 우리 디자인 시스템을 관리하고 있다고 했다. 이때, 자동화할 것이 아니라면 그냥 배럴 파일 쓰는 게 나을 수 있다고 얘기했었다. 아래 예시를 한 번 보자. 배럴 파일은 index.ts 파일에 아래와 같이 export하고 싶은 컴포넌트는 export 구문만 적어주면 된다.export type { TextField1Props } from "./TextField1"; export { default as TextField1 } from "./TextField1"; export type { TextField2Props } from "./TextField2"; export { default as TextFiel.. 더보기 [와우 디자인 시스템 개발기] 번들링 및 성능 최적화 (barrel file vs multiple entry point) 프로젝트를 진행하며 처음에 프로젝트 세팅한 거에서 조금 더 개선해 볼 만한 것들이 있어 번들링 최적화를 진행하게 되었다. 번들링 최적화처음에 내가 세팅한 wow-ui 폴더를 살펴보도록 하자. 아래와 같이 components 폴더 내부에 각각 컴포넌트별 폴더를 생성했고, 이를 index.ts라는 배럴 파일을 통해 export 하도록 세팅했었다.export { default as Box } from "./Box";export { default as Button } from "./Button"; package.json 쪽에도 살펴보자면, 아래와 같았다.즉, 모든 타입, cjs 방식, esm 방식 각각 다 하나의 파일에서 export 하도록 되어 있었다."exports": { "./styles.css": .. 더보기 [와우 디자인 시스템 개발기] 롤업 번들링 시 use client 주석 삭제하는 문제 해결 우리는 이 디자인 시스템을 결국 next.js 14 버전에서 쓰려고 개발하고 있었다.그래서, 개발하는 컴포넌트마다 맨 위에 use client라는 주석을 달아주고 있었는데, 이는 리액트 훅 등의 클라이언트 단에서 쓰는 로직들을 문제없이 인식하도록 하기 위한 것이었다. 그런데, 디자인 시스템 컴포넌트들을 next.js 14 버전 프로젝트에서 실행해보니 아래와 같은 에러가 난다는 코드 리뷰를 받았다. 분명 나는 스위치 컴포넌트를 개발하면서 맨 위에 use client 주석을 달아줬었는데 왜 그런 거지?라는 생각에 좀 더 찾아보게 되었다.결국 문제는 롤업 번들링 과정이었는데, 지금 우리 디자인 시스템에서는 번들 크기를 조금이라도 더 줄이기 위해서 terser라는 플러그인을 사용하고 있었다.이 terser를 사.. 더보기 [와우 디자인 시스템 개발기] svg 파일 리액트 컴포넌트 변환 자동화 스크립트 작성 이번엔 svg 파일을 리액트 컴포넌트 방식으로 변환시켜 주는 자동화 스크립트를 작성했다. 이걸 한 이유는... svg 파일을 일일이 컴포넌트 방식으로 변환시켜 주는 게 너무 번거로워서 자동화할 방법이 없을까 싶어서였다.하고 보니까 너무 편하더라.그리고, 사실 스크립트 작성하면서 로직을 많이 생각해보는 과정에서 많이 공부할 수 있었던 거 같다.처음에는 단순히 svg 파일을 리액트 컴포넌트 파일로 변환만 하는 스크립트를 작성했었는데, svg 파일을 삭제하고 나서 다시 스크립트를 실행시켜도 기존에 변환된 컴포넌트 파일은 삭제되지 않아서 이 부분을 고려하는 과정에서 자료구조도 생각해 보고 로직도 개선했던 거 같다. 주요 로직내가 작성한 스크립트 파일은 generateReactComponentFromSvg라는 파.. 더보기 [warrr-ui 디자인 시스템 개발기] 토큰 배포 및 자동화 이번 주 과제는 토큰 관리 방법 및 자동화에 대해서 생각해 보는 시간이었다. GDSC 와우 디자인 시스템에서도 warrr-ui처럼 panda css를 사용해서 개발하고 있었기 때문에 와우 디자인 시스템의 토큰 관리 방법을 많이 참고해서 생각해 볼 수 있었다. 와우 디자인 시스템 토큰 관리 방법일단, 와우 디자인 시스템에서는 wow-tokens라는 패키지에서 토큰 값들을 객체나 다른 구조가 아니라 string 값으로 관리하고 있다. 이는, 사용자가 원하는 대로 커스텀해서 사용하기 용이하게 하기 위해서 그렇다. 아래 링크를 들어가보면 어떤 방식으로 관리하고 있는지 한 번에 알아챌 거다. https://github.com/GDSC-Hongik/wow-design-system/tree/main/packages/.. 더보기 [warrr-ui 디자인 시스템 개발기] 아이콘 배포 및 자동화 이번 주는 아이콘에 대해서 자세히 알아보는 시간을 가졌다.아이콘 npm 배포 및 자동화할 수 있는 방법이 있는지에 대해서 공부했다. 일단, 내가 GDSC 디자인 시스템을 개발하며 느꼈던 아이콘 관련 문제 상황은 다음과 같다.1. svg 파일들을 일일이 내 프로젝트에 넣어 두어야 한다.2. 해당 svg 파일을 리액트 컴포넌트 방식으로 변환해야 한다. 이 작업들을 수작업으로 하려다 보니 화가 났다.그래서, 어떻게 하면 이 두 가지를 자동화할 수 있는지에 대해서 조사했던 것 같다.다만, 시간 부족 이슈로 완전 자세하게는 못했는데, 다다음주에 직접 실습해 보면서 자세히 알아보려고 한다. 여러 디자인 시스템 아이콘 관리 방법 조사일단, 여러 디자인 시스템 깃허브 레포를 둘러보면서, 어떤 방식으로 관리하고 있는지 .. 더보기 이전 1 2 3 4 ··· 6 다음
