우아한 테크코스의 프로젝트를 진행하면서 차트 UI의 필요성을 느꼈다. 직접 구현하자니 마감 기한내에 예쁜 UI가 나올지 미지수였고, 현재 컴포넌트 구조상 차트가 재사용될곳도 없었기 때문에 빠르게 chartjs를 사용하여 프로토타입을 만들어내었다. chartjs가 차트를 다 그려줘서 사실 너무 편했다. 하지만 이것은 큰 실수였다. chartjs이전에 달력 UI를 구현하면서 momentjs를 사용했는데 이 라이브러리는 import cost가 289kb로 굉장히 높다. 번들 포비아에서 분석해보면 비명을 지르더라. 그래서 dayjs로 바꾸니 7kb로 확 줄었다. 사용법이 굉장히 비슷하고, 차이점은 불변성 유지의 차이점일텐데 momentJS를 쓸 때도 불변성이 유지되는 코드였어서 사실 이름만 바꾸는 수준으로 쉽게..
CI는 지속적인 통합 (Continuous Integration) CD는 지속적인 배포 (Continuous Deployment)를 의미한다. 즉, CI는 구현하는 어플리케이션에 대한 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어서 공유 repo에 통합되므로 여러 명의 개발자가 동시에 작업하는 경우 발생할 수 있는 문제를 해결할 수 있는 개념을 뜻하고, CD는 개발자의 변경 사항을 repo에서 사용가능한 프로덕션 환경까지 자동으로 릴리즈하여, 수동으로 서비스에 새로운 변경사항을 반영하는 것보다 효율적으로 운영할 수 있는 개념이다.
const replaceAll = (str, from, to) => { return str.split(from).join(to); };
* 아래 글은 상상속에 만들어진 시나리오이며, 해답이 아닙니다. 나: "근처"라는 개념을 먼저 정의하겠습니다. 근처를 제가 살고 있는 위치를 기준으로, 걸어서 10분을 걸어서 이동할 수 있는 범위를 근처라고 정의하겠습니다. 괜찮나요? 면접관: 네 계속하세요. 나: 평균적으로 사람이 걸어서 100m를 1분만에 갈 수 있다고 가정하겠습니다. 그러면 10분만에 1km를 갈 수 있습니다. 그럼 10분만에 이동할 수 있는 범위는, 원의 너비 공식을 적용하여 1*1*pi 이므로 약 3km^2라고 가정하겠습니다. 즉, 제 근처는 제 위치기준으로 3km^2영역을 뜻합니다. 여기까지 어떠신가요? 면접관: 네 계속하세요. 나: 이제 타코집을 정의하겠습니다. 타코집은 일식관련 취급하는 모든 상가에서 판매한다고 가정하겠습니다..
https://www.youtube.com/watch?v=3smc7jbUPiE
타입스크립트를 사용하면서 어떤 값들을 어떤 객체의 속성들로만 제한하고 싶다면 const obj = { RED: "빨강", GREEN: "초록" } keyof typeof obj 같은 트릭을 사용하여 type COLOR = "RED" | "GREEN" 과 같은 효과를 누릴 수 있을 것이며, 또는, 객체가 아니라 const enum COLOR { RED = "빨강", GREEN = "초록" } enum 자료형을 사용함으로써 (여기서는 const enum을 사용했음) 위와 동일한 효과를 얻을 수 있다. 하지만 enum에는 다양한 단점이 존재하는데, ( https://engineering.linecorp.com/ko/blog/typescript-enum-tree-shaking/) 이러한 단점을 감수하고 enum..
React로 진행하는 프로젝트에서 테스팅을 한다면 많은 사람들이 react testing library를 사용할 것이다. rtl에는 다양한 메서드들이 존재하는데, 우리가 원하는 DOM 요소를 찾기 위해서는 getByRole, getByAlt, getByText... 등의 메서드 들을 사용해야 한다. 이때 문제가 발생한다. label이나, role, alt가 들어간 요소들이 없다면? 해당 DOM요소가 어디 있는지, 어떻게 위치하는지에 대한 고민에 비용이 엄청나게 소모되고 테스트가 재미없어진다. 어떻게 할 수가 없어 해당 DOM요소에 querySelector를 사용하여 DOM구조에 심하게 의존적인 코드가 나오는 경우도 있다. 바로 그 때, 이런 생각이 들기 시작한다. vanilla javascript로 할때..
