프로젝트 개발일지/와우 디자인 시스템 썸네일형 리스트형 [와우 디자인 시스템 개발기] 타입스크립트 선언 파일에서 절대 경로가 변환되지 않는 문제 해결 컴포넌트 개발을 마치고 빌드 후 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라는 파.. 더보기 [와우 디자인 시스템 개발기] 프로젝트 세팅 이번에는 씨엠씨 친구들과 하는 디자인 시스템이 아니다.GDSC Hongik이라는 단체에서 개발팀으로 참여하고 있는데, 여기서 개발하는 디자인 시스템에 관한 글이다.이름은 와우 디자인 시스템이다. warrr-ui 덕분에 계속해서 디자인 시스템 관련 공부를 해오다 보니, GDSC에서도 많이 적용해 볼 수 있었다.와우 디자인 시스템을 개발하기 위해서 약 5주간 공부를 해왔었는데, warrr-ui와 상당히 비슷한 플로우였다.다만, 다른 점은 시간적 제약으로 인해서 딥다이브까지는 못한 거 같다. GDSC에서 만드는 프로덕트는 약 300명의 학회원들이 실제로 사용해본다.그래서, 더 완성도 있게, 기한에 맞춰서 개발해야 한다. 이번에 개발하는 와우 디자인 시스템도 추후 GDSC 어드민, 스터디 서비스, 학회원들의 프.. 더보기 이전 1 다음
