React의 Render Props 패턴을 활용한 컴포넌트 디자인

React의 Render Props 패턴을 활용한 컴포넌트 디자인React 컴포넌트 디자인 패턴 중 하나인 Render Props 패턴에 대해 알아보겠습니다. 공통 부분을 자식 컴포넌트에서 횡단적으로 사용하는 기법으로 소개되고 있지만, 익숙하지 않은 분들이 많을 것 같습니다. 헤드리스 UI 라이브러리인 React Aria를 접하면서 Render Props가 활용되고 있는 것을 보고, 이를 기반으로 정리하였습니다. Render Props 란Render Props로 구현된 컴포넌트는 React Element를 반환하는 함수를 prop으로 가집니다.const ComponentWithRenderProp = ({ render }) => { return render();};// 호출 부분 Render Prop} ..

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

JavaScript로 Cookie에 데이터 저장하는 방법 알아보기

JavaScript로 Cookie에 데이터 저장하는 방법 알아보기Cookie란 무엇인가요? Cookie는 웹사이트에서 사용자의 브라우저에 저장하는 작은 데이터입니다. 주로 사용자 식별, 상태 유지, 그리고 맞춤화를 위해 사용되며, 다음과 같은 용도로 활용됩니다:• 세션 관리: 로그인 정보나 장바구니에 담긴 상품 데이터를 유지.• 개인화: 언어 설정, 테마 등 사용자가 선택한 환경을 저장.• 트래킹: 사용자의 행동을 추적하여 분석이나 광고에 활용. Cookie는 웹 서버 또는 JavaScript를 통해 브라우저에 저장되고, 이후 요청에서 서버로 전송됩니다. Cookie에 데이터를 저장하는 방법 Cookie는 아래와 같은 형식으로 데이터를 저장합니다: key=value; expires=dat..

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

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