본문 바로가기

전체 글

[warrr-ui 디자인 시스템 개발기] 디자인 시스템 정의 2주차 과제는 바로 각자가 생각하는 디자인 시스템에 대한 정리 및 리서치였다.생각보다 다들 다 다른 내용으로 구성해 와서 그거마저 의미 있는 시간이었던 것 같다.디자인 시스템에 대한 본인만의 철학을 가져온 사람도 있었고, 딥하게 리서치해온 분도 있었다.나도 꽤 리서치를 많이 해갔었는데, 다들 다른 관점으로 리서치를 해와서 인사이트를 얻을 수 있는 시간이었던 것 같다. 디자인 시스템 정의일단, 나는 디자인 시스템 정의부터 알아봤다. 디자인 시스템이란 다양한 페이지와 채널을 걸쳐 공통의 언어와 시각적 일관성을 만들고 반복되는 작업을 줄임으로써, 규모에 맞게 디자인을 관리하기 위한 표준 집합이다. 라고 권위 있는 UX 컨설팅 기업 Nielsen Norman Group이 정의했다고 한다. 디자인 시스템 구성 요.. 더보기
[warrr-ui 디자인 시스템 개발기] 팀 블로그 IA, 와이어프레임 결국, CMC 수료를 해버렸다.수료 후, CMC에서 만난 프론트엔드 세 친구와 함께 디자인 시스템, 그리고 이를 활용해서 팀 블로그를 만들기로 했다. 우리 팀잠깐 우리 팀에 대해서 말해보자면, 넷 다 열정 가득이다.이 팀이라면 장기적으로 프로젝트를 해도 정말 좋겠다는 생각이 드는, 그런 팀이다.다들 매일 디스코드에서 모여서 작업하는데, 진짜 매일 온다.서로 에러도 해결해주고 질문도 받아줘서 그런가 상당히 편하다. 그래서, 이 친구들과 함께 장기적으로 디자인 시스템부터 팀 블로그까지 함께 만들어보는 경험을 해보기로 했다.사실, 프로젝트를 하면서는 설계에 시간을 들이기보다 단순히 부딪히며 코드를 짠 경험이 훨씬 많다.이번에는 설계에도 상당히 많은 시간을 들일 예정이고, npm 배포 경험, 코드 단에서의 개선.. 더보기
Rollup 번들러로 enum과 const enum 트랜스파일링해보기 바로 이전에 enum은 어떻게 써야 하는지에 대한 글을 쓴 적이 있었다. https://gugu76.tistory.com/130 enum과 const enum을 비교하는 내용이 있었는데, 해당 글을 작성하다 보니 직접 트랜스파일링해서 결과를 보고 싶다는 생각이 들었다. 그래서 Rollup 번들러를 사용해서 간단하게나마 enum을 트랜스파일링해보고 결과를 확인해 보았다. Rollup Rollup도 Webpack 같은 자바스크립트 번들러 중 한 종류이다. Rollup은 빌드 결과물을 ES6 모듈 형태로 만들 수 있다. 이는, 사용자가 라이브러리의 코드 일부만 사용하게 되면 해당 부분만 번들 결과물에 포함시킬 수 있게 되는 것이다. 그래서, 사용하지 않는 코드를 빌드 단에서 제거하는 트리 쉐이킹 기법을 활용해.. 더보기
enum은 어떻게 써야하는가? 이번에 프로젝트를 진행하면서 상수 값을 저장할 때 계속해서 enum 타입을 사용해 왔다. 그런데, 타입스크립트를 계속 공부하다 보니 enum 타입에 대한 논란이 있는 것을 알게 되었다. 그 논란에 대해서 좀 자세히 알아보고 앞으로 어떻게 enum을 사용할지 생각해 보면 좋을 거 같아서 글을 쓰게 되었다. 일단, 나는 아래 글을 보고 나서 해당 문제에 대해서 알아보게 되었다. https://engineering.linecorp.com/ko/blog/typescript-enum-tree-shaking 위 글은 라인 기술 블로그 글인데, 한 줄 요약하자면 enum 타입을 쓰면 tree-shaking이 되지 않으니 const enum이나 union 타입을 쓰라는 것이었다. 이렇게만 말하면 무슨 뜻인지 모르겠으니.. 더보기
[toss-slash 라이브러리] arrayIncludes 함수와 테스트 코드 (toss 라이브러리에 이슈 올리기) 이번에는 배열 관련 유틸 함수를 쭉 알아보려 한다. 사실 프로젝트에서 사용할 만한 유틸 함수들 위주로만 글을 적어보려고 했는데, 이 함수도 알아보면 좋을 만한 내용이 있어서 가져오게 되었다. 이번에는 arrayIncludes 함수이다. 아래 사진은 해당 함수 설명 문서이다. 해당 함수는 string과 같이 넓은 타입으로 정의된 요소가 문자열 리터럴 타입 같이 좁은 타입 요소로 이루어진 배열에 존재하는지 타입 단언 없이 판단하는 함수라고 생각하면 된다. 그래서 함수의 구현체를 살펴보도록 하자. export const arrayIncludes = ( array: T[] | readonly T[], item: unknown, fromIndex?: number ): item is T => { return arr.. 더보기
[toss-slash 라이브러리] localStorage와 테스트 코드 이번 코드는 토스 슬래시 라이브러리에 있는 코드는 아니다. 토스 슬래시에도 스토리지 관련 코드들이 있기는 한데 내가 느끼기에 더 효율적으로 쓸 수 있을 거 같은 코드가 있어서 들고 오게 되었다. 일단 나는 로컬 스토리지로 범위를 좁혔고, 로컬 스토리지 상에서 직렬화, 비직렬화 관련 함수까지 정의해서 효율적으로 사용하는 코드가 있다는 것을 알게 되어 이 코드로 로컬 스토리지를 정의해서 쓰게 되었고, 그와 관련된 테스트 코드까지 작성해봤다. 이 코드는 같이 프로젝트를 진행하는 친구가 작성한 코드, 당근과 토스 라이브러리 상에 있는 스토리지 관련 코드들을 쭉 한 번 둘러본 후 필요한 부분 위주로 취합하여 작성한 코드이다. 코드 전체는 다음과 같다. interface Storage { get(key: strin.. 더보기
[toss-slash 라이브러리] assert 함수와 테스트 코드 이번에는 토스 슬래시 라이브러리에 있는 assert 함수를 이해해보려 한다. 근데 진짜 느끼는 거지만 토스 슬래시 라이브러리 보면 타입스크립트를 너무 잘 쓴다. 이번에도 타입 코드 부분들 위주로 알아보도록 하자. 일단 아래 코드는 assert 함수이다. export const assert = ( condition: unknown, error: string | Error = new Error() ): asserts condition => { if (!condition) { if (typeof error === "string") { throw new Error(error); } else { throw error; } } }; 코드에 대해서 간단히 설명하자면, 인자로 받는 condition에 만족했으면 하는 .. 더보기
[toss-slash 라이브러리] Funnel 컴포넌트와 테스트 코드 사실, TIFY 프로젝트에서 프론트 리드님이 toss-slash 라이브러리 참고하면서 우리 프로젝트에 맞게 퍼널 컴포넌트 커스텀하신 걸 보고 나도 toss-slash 라이브러리에 대해서 깊게 파보고 싶다는 생각이 들었다. 그래서 toss-slash 라이브러리에 들어가서 코드를 슬쩍 봤는데 너무 고퀄의 코드여서 놀랐다. https://github.com/toss/slash 진짜 놀랐던 점은 타입 코드였다. 타입을 너무 잘 써서 할 말을 잃었다. 그래서 나도 여러 코드들을 따라 구현해보면서 타입을 잘 쓰는 방법을 익히고 싶어서 시작하게 되었다. 그러다가, 각 컴포넌트/유틸 함수들뿐만 아니라 테스트 코드도 있다는 것을 알게 되었는데, 사실 나는 테스트 코드를 짜보고 싶다고만 생각했지, 제대로 배워보지는 못했다.. 더보기

티스토리툴바