하리하링웹

tsc는 컴파일시에 사용하지 않더라도 import 된 경로가 있다면 해당 경로의 타입에 문제가 있는지 없는지를 진단하는 과정을 거친다. (단 컴파일 결과에서는 제외됨) 사용하지 않는 import가 있고 만약 파일들이 많이 얽혀있다면 이로 인해 tsc 컴파일 시간이 증가할 가능성이 있다. 따라서 사용하지 않는 import 구문들을 제거한다면 tsc 컴파일 시간이 감소될것이라고 추측하였으며 이를 eslint를 사용하여 제거한 뒤 테스트를 진행해보기로 결정하였다. import와 관련된 eslint plugin는 여러가지가 있지만 기존 eslint rule의 변경이 필요한건 아니며 순수하게 unused import와 관련된 작업만 필요하기에 이와 딱 맞는 eslint plugin을 설치찾아 설치해준다. 이 경우..

타입 스크립트 컴파일 시 declaration 옵션을 키면 컴파일 속도가 빨라질까? 최근 빌더 개선 작업을 하고있는데 통한 컴파일 시 타입 진단 작업이 너무 오래걸려 해당 시간을 줄이기 위해 가설을 하나 세웠다. 용량이 큰 모듈의 tsconfig에서 declaration 옵션을 켜서 컴파일 시 .d.ts 파일을 생성하게 해주고 이후 타입 진단 과정에서 이를 참조해서 타입을 진단하면 컴파일 속도가 빨라질 수도 있다, 그리고 이는 d.ts 파일을 생성하는데 걸리는 시간과 참조 타입을 사용하여 감소하는 시간을 적절히 고려해야한다는 가설이다. 이 글은 이 가설을 검증하기 위한 글이다. 가설큰 디렉토리를 컴파일할 때 해당 디렉토리에 d.ts 파일을 추가해 컴파일하면 d.ts 파일을 생성한 뒤 타입 진단을 진행하기..

Inferred Type Predicates5.4functionmakeBirdCalls(countries: string[]) { // birds: (Bird | undefined)[]const birds = countries .map(country => nationalBirds.get(country)) .filter(bird => bird !== undefined);for (const birdof birds) { bird.sing(); // error: 'bird' is possibly 'undefined'. }}5.5functionmakeBirdCalls(countries: string[]) { // birds: Bird[]const birds = countries .map..

현재 다니고있는 회사에서는 약 100명 정도의 개발자가 단일 저장소에서 코딩을 진행하고 있다. 이러한 복잡한 작업 환경에서는 개발자에 의해 발생할 수 있는 실수나 예측할 수 없는 에러를 방지하는 것이 매우 중요하다. 이에 따라, 객체의 모든 레벨에서 객체의 변경을 방지할 수 있는 방안이 필요했고, TypeScript를 활용하여 DeepReadonly 유틸리티 타입을 만들게 되었다. DeepReadonly 타입은 객체의 모든 프로퍼티를 재귀적으로 읽기 전용으로 만들어, 객체의 불변성을 보장해준다. 프로젝트의 규모가 커질수록 코드의 안정성을 유지하는 것이 중요하며, DeepReadonly 타입은 객체의 중첩된 구조까지 보호함으로써 개발자들이 실수로 객체를 변경하는 것을 방지할 수 있다. 구현 코드 type ..

최근에 네이버 웹툰에서 나온 짤 중 위와 같은 짤이 있는데 이 짤이 많이 유행하고 사람들이 말풍선 안의 대사를 직접 수정해서 많이 쓰는 것 같아서 이를 편하게 하기 위해 김성모 짤 생성기 페이지를 직접 만들어서 무료로 배포해보았다. 만든 뒤 몇 명의 지인에게 먼저 뿌려서 테스트를 진행하고 개드립이라는 자주 눈팅하는 커뮤니티에 뿌려보았는데 정말 상상할 수 없을 정도의 엄청난 호응을 받고 배포한지 약 1시간만에 모든 커뮤니티 사이트에 다 퍼져서 엄청나게 많은 사용자가 들어왔다. (심지어 Retention 비율이 높은 편이다.) 대충 트래픽이 일주일에 10만명 쯤 됐었으며 저번 주 일요일에 공개하고 딱 일주일이 된 지금까지 총 15만개의 짤을 생성하였다. 심지어 이렇게 많은 사람이 들어오는 페이지임에도 호스팅..

Tailwind CSS는 부트스트랩과 비슷한 역할을 한다고 말할수도 있지만 좀 자세히 알아보면 부트스트랩의 상위호환격이라도도 말할 수 있는 프레임워크이다. 그동안 tailwind외에도 styled component, sass를 다 써보았지만 왜 최종적으로 tailwind를 사용하게 되었는지에 대해 이 글에서 소개하려 한다. tailwind의 가장 큰 장점은 사용이 편리하다는 점이다. 예를들어 16px의 padding을 주고 싶을 때 기존에는 클래스를 선언한 뒤 해당 클래스명을 불러와서 사용하는식으로 css를 사용했다면 tailwind는 class부분에 p-4와 같이 입력하면 tailwind프레임워크가 이를 확인하고 해당 부분에 알아서 16px의 padding을 적용시켜준다. tailwind를 처음 사용하..