게시글
요즘 글쓰기가 뜸해지고 있네요..!
매일 업무에서 일어나는 일들을 간단히 정리하는데 일에 치이다보니 자주 놓치게 되는거 같습니다.
내일부터는 잘 정리해봐야겠네요 ㅎㅎ 사실 그냥 저냥 프로젝트에서는 타입을 만들기가 그렇게 어렵진 않았습니다. 들어오는 값과 나가는 값들이 확실하니까요.
그런데 디자인시스템, 라이브러리가 되는 프로젝트에서 타입스크립트를 사용하는 것 조금 다른것 같습니다.
사용자가 컴포넌트 또는 유틸함수를 사용하기 때문에 그에 맞는 타입추론이 적절하게 될 수 있도록 타입을 만들어야 하기 때문입니다.
어쩌면... 디자인시스템의 개발 구조를 완전히 새로 고치고 있습니다.
현재 구조로는 디자인 토큰 변경에 따라 컴포넌트들이 수 많은 영향을 받을 수 있게 되기 때문인데요.
컴포넌트 관련 스타일을 작성할 때 토큰 값을 직접 접근하여 사용하기 때문입니다.
처음에는 언뜻보면 접근하기 쉽고, 토큰이 잘 변하지 않기 때문에 괜찮다고 생각했는데요, 토큰의 설계를 디자이너와 변... 디자인시스템의 기반을 다시 다지고 있어요.
현재 시스템을 기반에서 컴포넌트를 사용할 때 사용자(여기에서는 개발자)가 디자인 스펙에 맞게 화면을 개발하기 위해서 디자인 화면은 Figma를 참조하고 컴포넌트 스펙을 확인하기 위해서는 Storybook을 참조하게 됩니다.
여기에서 문제가 발생했는데요, 컴포넌트를 사용시에 Figma에 나와있는 정보들과 코드 상... 리팩토링으로 만든 버그
시간이 지나면서 난 이전의 나보다 더 잘해져오고 있다고 생각했는데요.
그러한 사상(?)을 가지고 과감히 리팩토링하며 레거시 코드들을 효율적으로 틈틈히 고치곤 했습니다.
하지만 너무 과감한 나머지, 또는 부주의하게 꼭 필요한 로직을 날려버리게 되어 리팩토링이 버그를 만들어버리는 상황에 마주해버렸네요!
테스트코드가 존재하지 않은 ... 오늘도 디자인시스템의 디자인토큰 시스템 개편 작업을 했어요.
디자인토큰은 크게 세가지 분류로 나누었습니다.
- ColorToken
- SizeToken
- FontToken
각 토큰은 분류에서는 실제 값을 가지고 있는 Base 토큰이 있고, 컴포넌트에 적용할 Semantic 토큰으로 다시 나뉘어집니다. 그리고 Semantic 토큰의 값은 Base 토큰으... 디자인시스템의 디자인토큰의 문제점을 해결하는 방법을 찾아 적용해보았어요.
기존에는 스타일링에 필요한 디자인토큰 값을 별도로 css variable에 저장하고 해당 css variable을 객체에 알맞은 키와 함께 저장하였습니다.
예를 들어 static css 파일에
--whitr-color: #ffffff;
와 같이 직접 작성해두고,
객체에는 아래와 ... 디자인시스템을 고도화하는 작업에 돌입했어요. 현재까지 만들어둔 시스템 코드는 정말 단편적으로 필요한 컴포넌트의 UI는 잘 뽑아져서 나오기는 해요.
그러나 디자인토큰의 사용, 공통 속성, 캐싱전략 등 시스템 안에서 컴포넌트를 더 효율적이고 시스템 답게 추상화 하는 작업이 필요하다고 판단 되었어요.
변경사항은 많아지고 그것을 반영하는데에 점점 많은 시간이... 오랜만에 공부든 약속이든 아무 일정도 없는 하루를 보냈어요. 잠은 아주 지겹도록 자고 눈떠서 폰보다가 또 자면서 하루가 다 흘러버렸네요 ㅎㅎ;
앞으로 또 달려야하니까 재충전한다고 생각하면서 다음의 일정을 또 계획했습니다.
계획을 꾸려다가 보니 역시 공부할것 준비할것 한무더기로 쌓아버렸네요.
차근차근 해내가면서 또 성장해 있을거라고 생각하니 기대되기도 ... 최근 Vue CLI를 사용하는 Vue2 프로젝트를 Vite로 마이그레이션 했습니다.
Vite의 개발서버 구동 속도는 굉장히 놀라웠는데요!
Vue CLI 기반의 Vue2 프로젝트를 Vite 기반으로 마이그레이션시 필요한 내용들을 정리해보았어요.
플러그인을 잘 가져다 사용하고, 별도로 수정해줘야 하는 유의사항도 함께 있으니 참고하시면 좋을 거 같습니다 ... 리눅스 커맨드라인 기초 중간평가
책 리뷰 기한 때문에 얼떨결에 리눅스 커맨드라인 기초 공부를 시작했었어요. 절반정도 강의를 들은 점으로 느낀점을 정리해보려구요.
커맨드라인은 키보드 하나로 운영체제의 쉘을 자유롭게 다룰 수 있는 도구입니다. 아주 기초적인 것만 배우고 나서도 파일을 열고 닫고 간단한 텍스트 파일을 만드는 작업이 엄청 효율적으로 바뀌었어요!... Vue2의 React의 마이그레이션을 진행중이예요.
Module Federation을 이용한 Micro frontend 구조로 변경하면서 점진적으로 진행할 계획이 있습니다!
이전에 Vue2 + Webpack과 React + Vite의 조합으로 Module Federation을 진행하려고 시도했었죠.
결과적으로 다른 두 번들러의 결과물을 합치는건 불가능했... Vue2로 개발된 제품을 React로 마이그레이션 할 계획이 생겼어요.
아래와 같은 기준 때문인데요.
- 23년 12월 31일 기준 Vue2 지원 공식종료
- 타입스크립트 마이그레이션 필요
- 제품 성장에 따라 복잡도 증가 (리액트가 유리해보임)
- 생태계의 크기 차이
- 전체 프로젝트 구조가 모노레포로 개편
- 프론트엔드 제품의 코드베이스 단일화
- 사... Socket.IO를 이용해 서버와 Websocket 연결을 하고 있는 제품이 있습니다.
간헐적으로 서버로부터 이벤트를 받지 못하는 현상이 발생하고 있었어요. 그래서 고객들이 새로고침 해야 정상적으로 사용할 수 있었는데요.
우선 이벤트를 받을 수 있으면 이벤트핸들러가 작동해서 브라우저 화면에 반영이 될테니, 예기치 못한 타이밍에 서버와 연결이 끊어지고 재... 책 리뷰를 잘못 신청한 덕(?)에 리눅스 커맨드라인 기초 수업을 듣기 시작했어요!
엄청 자주 있던건 아니지만 CLI로 조작해야 할 때가 종종 있었는데요. 사실.. 잘 다루지 못했습니다 ㅎㅎ
이번 기회에 커맨드라인에 익숙해지고 조금 더 효율적으로 작업할 수 있는 계기가 되었으면 좋겠어요 디자인 시스템 테스트 커버리지 올리기 완료.
60%대에서 90%대까지 올리면서, 느낀점이 있어요.
1. 단위, 통합테스트만으로 모든 동작을 테스트할 수 없다.
2. 너무나 당연한 것을 테스트할 필요 없기에 커버리지 100% 달성에 목숨걸 필요없겠다.
3. 테스팅은.. 어렵다..
4. 짜고나니까 뭔지 모를 자신감이 생겼다.
5. 커버리지의 비율이 ... 디자인시스템의 테스트 커버리지를 올리는 중입니다.
프로젝트는 React, jest, testing-library를 사용하고 있구요.
테스팅 자체에도 능숙한 편이 아닌 점도 있지만, 사용자의 모든 인터렉션과 그에 대한 DOM 변경을 테스트 환경 안에서만 테스트 하기에 난감한 점들을 발견하였어요.
하나는 BottomSheet를 드래그하여 일정거리만큼 y... 
