JavaScript 오브젝트 메서드 완벽 이해하기: Object.entries, Object.fromEntries

JavaScript 오브젝트 메서드 완벽 이해하기: Object.entries, Object.fromEntries개요이번 글에서는 JavaScript에서 오브젝트를 다룰 때 유용하게 사용되는 메서드들인 Object.keys, Object.values, Object.entries, 그리고 Object.fromEntries의 사용법에 대해 알아보겠습니다.Object.keys: 오브젝트의 키 목록을 배열로 반환Object.values: 오브젝트의 값 목록을 배열로 반환Object.entries: 오브젝트를 [키, 값] 쌍의 배열로 변환Object.fromEntries: [키, 값] 쌍의 배열을 오브젝트로 변환특히 Object.entries와 Object.fromEntries는 자주 사용하지는 않지만, 유용할 ..

• format_list_bulleted Javascript
• · 2024. 11. 24.
• textsms

Next.js 오류 처리에서 흔히 겪는 문제와 해결 방법

Next.js 오류 처리에서 흔히 겪는 문제와 해결 방법이번 글에서는 Next.js 애플리케이션을 개발하면서 개인적으로 겪었던 오류 처리 문제와 그에 대한 해결 방법을 소개하려고 합니다. 이 방법이 정답은 아니지만, 하나의 설계안으로 참고하시면 좋겠습니다.환경 설정Next.js v15.0.3App Router 사용1. Server Component에서 발생한 커스텀 에러가 Client Component의 Error Boundary에서 처리되지 않는 문제잘못된 패턴 예시최근 Next.js의 Server Component를 활용한 데이터 패칭 방식을 먼저 살펴보겠습니다.const UsersContainer = async () => { const users = await getUsers(); return ..

• format_list_bulleted Javascript
• · 2024. 11. 24.
• textsms

TypeScript로 클래스가 아닌 것 상속하기

TypeScript로 클래스가 아닌 것 상속하기기존 클래스 방식원래 JavaScript에는 클래스가 없었고, 생성자 함수로 클래스를 구현했었죠. 현재의 class 문법도 사실은 약간의 차이만 있을 뿐, 옛날 방식의 설탕 문법(syntax sugar)입니다. TypeScript에서도 일부 타입을 조금 속이면 이 방법으로 클래스를 만들 수 있습니다.const Foo: { new (greeting?: string): Foo;} = function (this: Foo, greeting?: string) { this.greeting = greeting || "Hello";} as any;Foo.prototype.greet = function () { console.log(`${this.greeting}, w..

• format_list_bulleted Javascript
• · 2024. 11. 9.
• textsms

TypeScript의 불편함을 해결하는 @total-typescript/ts-reset 도입하기

TypeScript의 불편함을 해결하는 @total-typescript/ts-reset 도입하기TypeScript의 문제점TypeScript의 타입 시스템은 강력하지만, 의도한 타입을 제대로 추론하지 못하는 경우가 종종 있습니다. 이런 상황에서는 어쩔 수 없이 any 타입이나 타입 단언(type assertion)을 사용하게 되는데, 이는 타입 안전성을 잃게 만들어 원래 컴파일 에러로 발견되어야 할 문제가 실행 시 에러로 이어질 수 있습니다. 컴파일 에러는 개발 시점에서 바로 수정할 수 있지만, 실행 시 에러는 실제 운영 환경에서 큰 문제를 일으킬 수 있기 때문에 반드시 피하고 싶을 것입니다.any 타입과 타입 단언의 문제점any 타입: 모든 타입을 허용하므로 잘못된 타입 사용으로 인한 에러를 놓칠 수 ..

• format_list_bulleted Javascript
• · 2024. 11. 9.
• textsms

reduce로 날짜별 정보 배열 만들기

reduce로 날짜별 정보 배열 만들기 안녕하세요!이번 글에서는 reduce를 사용해 날짜별로 데이터를 그룹화하는 방법을 알아보려고 합니다. 개인적으로 reduce를 자주 사용하지 않았었는데, 최근 업무에서 이 기능을 활용할 일이 생겨서 그 경험을 정리해 보았습니다. 목표이번 작업에서는 캘린더 UI에서 날짜별로 아코디언 방식으로 데이터를 펼치는 기능을 구현해야 했습니다.API로부터 받은 데이터는 아래와 같이 날짜별 정보를 담고 있는 리스트 형식이었는데요:// 기본 데이터const baseData = [ { startedAt: "2024-10-30T10:00:00+09:00", rooms: { id: "1", }, }, { startedAt: "2024-10-30T11:..

• format_list_bulleted Javascript
• · 2024. 11. 9.
• textsms

실무에서 바로 쓸 수 있는 TypeScript 타입 8선

실무에서 바로 쓸 수 있는 TypeScript 타입 8선이번 글에서는 실무에서 바로 적용할 수 있는 TypeScript의 주요 타입들을 소개합니다. 가능한 한 실용적인 예시를 사용해 설명을 진행할 건데요, React를 전제로 하고 있으니 참고해 주세요. TypeScript 초보자분들에게도 도움이 될 수 있는 내용들이니 끝까지 함께 보시죠.1. 템플릿 리터럴 타입템플릿 리터럴 타입은 타입 안전성을 유지하면서도 문자열 조작을 할 수 있는 강력한 기능입니다. 예시리터럴 타입을 사용해 문자열을 정의하면, 전달된 값이 number 타입임을 타입 시스템이 보장해줍니다.const requestExternalApi = async ({ data,}: { data: { offset: `${number}` l..

• format_list_bulleted Javascript
• · 2024. 11. 9.
• textsms