typescript
-
클로저·this·viewport를 지키며 큰 컴포넌트를 쪼갠 작업기React 2026. 7. 15. 17:26
"이 컴포넌트 너무 크니까 좀 쪼개 줘." 이 요청을 받으면, 사람이든 AI 에이전트든 가장 쉽게 빠지는 함정이 줄 수(LOC)를 줄이는 데 최적화하는 것이다. 함수로 뽑고 helper로 흩어 메인 본문을 짧게 만든다. 지표는 좋아진다. 그런데 화면이 깜빡이고, 차트 호버가 죽고, 다른 탭에 다녀오면 그래프가 어긋났다. 기술 트렌드를 시각화하는 한 화면(기술 트리·버블 차트·보고서)을 다섯 갈래로 쪼개면서 나는 이걸 다섯 번 확인했다. 큰 컴포넌트·훅을 분해해 봤고 useEffect나 차트 라이브러리에서 미묘한 회귀를 겪어 본 사람이라면 익숙한 장면일 것이다.줄을 세는 일과 의미를 지키는 일은 다르다분해를 하다 보면 매번 같은 단어로 돌아왔다. 런타임 계약. 코드가 겉으로 드러내지 않지만 동작이 의존하는..
-
단일 `ko.json`이 모든 PR의 충돌 진원지일 때 - next-intl 메시지를 도메인으로 쪼개는 설계Tip 2026. 7. 8. 19:49
1. 도입부 (Why This Matters)화면에 문구 하나 추가하는 PR이 왜 자꾸 머지 충돌이 날까. 범인은 대개 하나다 — 모든 도메인의 번역이 들어찬 단일 messages/ko.json. 검색·상세·결제·랜딩처럼 서로 다른 기능을 건드리는 PR이 전부 같은 파일의 다른 줄을 편집한다. 파일이 수천 줄로 불어나면 병렬 작업과 릴리스 분기에서 충돌은 상수가 된다.이 글은 그 단일 파일을 도메인 파일로 쪼갠 설계 기록이다. 단순히 파일을 나누는 게 아니라 — 충돌 면적 축소, 번들러 정적 분석 안전성, 타입 기준(source of truth), 그리고 도메인 추가 비용을 0에 수렴시키는 codegen까지 — 네 가지를 한 번에 푼다. 읽는 데 약 8분, 읽고 나면 당신의 가장 큰 메시지 파일을 어디서..
-
TypeScript interface vs type 비교 Part.2JS & TS 2025. 3. 17. 20:19
2025.03.16 - [JS & TS] - TypeScript interface vs type 비교 1편 이전 편에 이어 이번 편에서는 조금 더 개발자 관점으로 비교해 보겠습니다.유지보수성 (코드 가독성 및 유지보수 난이도)가독성과 개발자 경험interface와 type 중 어떤 것이 더 읽기 좋은지는 상황에 따라 다를 수 있고, 팀의 스타일 가이드에 따라 달라지기도 합니다.몇 가지 비교점을 살펴보겠습니다.코드 구조 표현: interface는 선언적 구조를 제공해 객체 형태를 명확히 표현합니다. 반면, type은 간단한 타입 정의는 명료하지만, 복잡한 유니온·인터섹션 조합에서는 한눈에 파악하기 어려울 수 있습니다.IDE 미리 보기: VS Code에서는 type 정의는 마우스 오버 시 바로 구조가 보이는..
-
TypeScript interface vs type 비교 Part.1JS & TS 2025. 3. 16. 19:00
TypeScript에서는 interface와 type을 사용해 타입을 정의할 수 있습니다.이 둘은 비슷한 목적을 가지고 있지만 미묘한 차이가 있으며, 상황에 따라 더 적합한 선택이 있습니다.interface와 type의 기본적인 차이점정의 방식과 표현 범위interface는 객체 형태(shape)를 정의하는 데 주로 사용되며, 선언 시 interface InterfaceName { ... } 형태를 사용합니다.한편, type은 타입 별칭을 만드는 키워드로 type AliasName = ... 형태로 정의합니다.프리미티브와 복합 타입: type은 문자열, 숫자 등의 원시 타입에도 별칭을 붙일 수 있지만, interface는 객체 형태에만 사용할 수 있습니다. 예를 들어 type MyString = stri..
-
HTTP 클라이언트 라이브러리의 변화 Axios에서 Got, Ky로Tip 2024. 12. 8. 19:39
프런트엔드와 백엔드 개발 모두에서 HTTP 통신은 필수적이다.REST API 호출, 마이크로서비스 간 통신, 외부 서비스 연동 등 다양한 시나리오에서 단순한 HTTP 요청/응답을 넘어 훨씬 복잡해진 요구사항이 있다.많은 개발자들이 이제 막 웹 생태계에 입문할 때는 fetch나 Node.js의 기본 http 모듈로 시작한다.하지만 일정 수준 이상의 프로젝트 규모나 복잡도, 유지보수성을 요구하는 상황이 되면 fetch 단독 사용은 점차 비효율적으로 느껴지며, 보다 강력한 기능을 제공하는 HTTP 클라이언트 라이브러리로 옮겨가게 된다.이 글에서는 프런트엔드 생태계에서 흔히 사용되는 Axios, 그리고 최근 들어 각광받고 있는 Got(Node.js 환경)과 Ky(브라우저 환경)에 대해 살펴보고, 왜 단순한 fe..
-
TypeScript 유틸리티 타입 소개JS & TS 2024. 10. 11. 14:38
TypeScript는 JavaScript에 정적 타입을 더하여 코드의 안정성을 높이는 역할을 합니다.특히 TypeScript에는 유용한 유틸리티 타입들이 있어, 코드를 작성할 때 매우 편리하게 활용할 수 있습니다.TypeScript에서 자주 사용되는 유틸리티 타입과 기능을 소개해 보겠습니다.1. PickPick은 특정 타입에서 원하는 프로퍼티만 선택하여 새 타입을 만드는 데 유용합니다.이 기능을 사용하면 큰 인터페이스나 객체 타입 중에서 필요한 부분만 사용하고 싶을 때 매우 편리합니다.언제 사용하나요?특정 객체에서 필요한 일부 속성만 타입으로 사용하고자 할 때사용 예시interface User { id: number; name: string; age: number; email: string;}//..
-
Javascript ES15(ECMAScript 2024) 문법정리JS & TS 2024. 8. 14. 18:01
ES13에 대한 글을 작성한 지 얼마 안 된 것 같은데 벌써 ES15가 정식 출시하였습니다.JavaScript의 최신 표준인 ECMAScript 2024 (ES15)에서는 개발자들이 더욱 강력한 기능들을 활용할 수 있도록 다양한 새로운 기능들이 도입되었습니다.아래에서는 ES15의 주요 기능들을 정리하고, 각 기능에 대해 ES15 이전과 이후의 코드를 비교해 보겠습니다.1. Object 및 Array 그룹화Object.groupBy() 및 Array.prototype.groupBy() 메서드를 사용하면 객체나 배열의 요소를 특정 조건에 따라 그룹화할 수 있습니다.예를 들어, 다음과 같이 과일 목록을 양에 따라 그룹화할 수 있습니다.(참고로 이번에 추가된 메서드는 원래 Array 프로토타입 메서드로 있었으나..
-
BFF(Backend For Frontend) 소개Tip 2024. 8. 8. 14:42
BFF(Backend For Frontend) 디자인 패턴에는 특정 프런트엔드 애플리케이션 또는 프런트엔드 애플리케이션 집합의 요구 사항에 맞게 특별히 맞춤화된 백엔드 서비스를 말합니다.이 패턴은 복잡한 사용자 인터페이스를 개발하고 프런트엔드와 마이크로서비스 기반 백엔드 간의 상호 작용을 관리하는 문제를 해결하기 위해 등장했습니다. 1. BFF의 장점1. 우려사항 분리(유지 관리성)프런트엔드별 로직을 코어 백엔드에서 분리하여 코드베이스를 더 쉽게 유지 관리하고 독립적으로 발전시킬 수 있습니다.2. 향상된 보안(토큰 관리)BFF는 서버 측에서 토큰 및 기타 민감한 데이터를 처리함으로써 그러한 정보가 클라이언트 측 취약점에 노출될 위험을 줄입니다.3. 성능 최적화(맞춤형 응답)BFF는 프런트엔드의 정확한..