개탕 IT FACTORY

디자인시스템 구축전 글에서 compound component와 Polymorphic component에 대해서 다뤄봤고,추가적으로 디자인 토큰이 어떤 것인지에 대해서도 알아보았다. 이번에는 디자인시스템 라이브러리 구축을 위한 과정을 한번 다뤄볼까한다. 디자인 시스템 구축 과정사실 Rollup으로 구축할려고했으나 vite의 강세와 더불어 내부로직으로 Rollup 설정이 가능한 vite로 빠르게 구축후 Rollup으로 포팅하는 과정을 할려고한다.고려사항최소한의 번들 사이즈를 유지하게 만든다 (tree shacking 기능이 있는걸 사용한다)storybook을 적극활용하여 컴포넌트를 관리한다Typescript기반으로 개발한다React 개발환경에 맞춰 개발한다 (다른 것들은 추후고려대상)개발 구축빠른 개발환경 ..

2. 스택(stack) Stack O(n) O(1) O(1) 순서가 보존되는 선형 데이터 구조 유형 가장 마지막 요소부터 처리하는 LIFO(Last In First Out) 구조 장단점 장점 동적 메모리크기 데이터를 순서대로 정렬 단점 최신데이터만 가져온다 한번에 하나의 데이터만 처리가능 코드 // 클래스 구현 class Stack { constructor(){ this.arr = []; this.index = 0; } push() { this.arr[this.index++] = item; } pop() { if(this.index

서론 회사에서 채팅 서비스 구현당시 스크롤 이동을 위해서 돔 조작이 필요했는데 이미지의 경우 로드되는 속도가 느려 스크롤 이동이 중간에 멈추는 현상이 발생하여 onLoad함수라는 것을 사용하여 해결한 것을 작성할려구 한다. onLoad란? https://developer.mozilla.org/ko/docs/Web/API/Window/load_event MDN 문서에 따르면 💡 리소스와 그것에 의존하는 리소스들의 로딩이 완료되면 실행 쉽게 말해서 모든 요소가 로딩이 완료된 다음에 실행되는 이벤트이다. DOM의 standard 이벤트이다 사용법 window.onload window.onload = function() { // 실행될 코드 } html 태그 속성으로 지정 주의사항 로드된 이후에 실행되기 때문에..