typescript
-
TypeScript interface vs type 비교 2편JS & 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 비교 1편JS & 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는 프런트엔드의 정확한..
-
2024년 JavaScript 트렌드Tip 2024. 7. 26. 12:50
1. TypeScript의 대두TypeScript는 JavaScript의 정적 타입 추가 버전으로, 코드 품질과 유지 보수성을 높이는데 큰 역할을 하고 있습니다.TypeScript는 큰 규모의 프로젝트에서 특히 유용하며, 2024년에도 그 인기는 계속될 것입니다.2. WebAssembly 통합WebAssembly(Wasm)는 여러 언어로 작성된 코드를 웹 브라우저에서 거의 네이티브 속도로 실행할 수 있게 해줍니다.이는 계산 집약적인 작업을 처리하는 웹 애플리케이션에 이상적이며, JavaScript와의 통합으로 더 많은 기회를 제공할 것입니다.3. 서버리스 컴퓨팅서버리스 아키텍처는 인프라 관리의 복잡성을 줄여주며, JavaScript는 AWS Lambda와 Azure Functions 같은 클라우드 플..
-
Javascript ES10 문법정리JS & TS 2023. 11. 8. 16:48
ECMAScript 2019 (ES10)은 개인적으로 정말 많이 사용하는 flatMap이나 trimStart, trimEnd와 같은 내용이 업데이트된 버전입니다. IE를 제외하고 대부분의 브라우저가 지원하기 때문에 지금도 쉽게 사용해 볼 수 있습니다. 1. Array.flat() 및 Array.flatMap() 이전: 중첩된 배열을 결합하고 펼치는 것은 종종 사용자 정의 함수나 루프가 필요했습니다. 이후: flat() 및 flatMap()을 사용하면 이 작업을 간단하게 수행할 수 있습니다. // 이전 const nestedArray = [1, [2, [3, 4], 5]]; const flattenedArray = [].concat.apply([], nestedArray); // flattenedArray..