드리프트의 뉴 코딩 이야기

JavaScript Truthy와 Falsy 완벽 정리: 헷갈리는 타입 변환, 이제 끝내자!JavaScript를 처음 접했을 때, truthy와 falsy 개념이 단순하다고 생각했는데, 조금만 깊게 들어가면 상황이 복잡해지는 걸 느꼈습니다. "false는 falsy, true는 truthy다."라는 기본 개념은 쉽지만, edge case(경계 사례)는 정말 헷갈리는데요. 이번 글에서는 JavaScript의 truthy와 falsy 개념을 깊게 파헤치고, 타입 강제 변환(type coercion)으로 생길 수 있는 문제들을 예제로 정리해 보겠습니다.Truthy와 Falsy란?JavaScript에서는 특정 값들이 "참(true)"처럼 평가되거나 "거짓(false)"처럼 평가됩니다. 이를 각각 truthy와 ..

자바스크립트 단축 연산자 끝판왕! 논리 AND 할당 연산자 &&= 와 Null 병합 할당 연산자 ??= 로 코드 깔끔하게 정리하기자바스크립트 개발하면서 변수에 값 할당할 때, 특히 조건부 할당이나 기본값 설정할 때 코드가 길어지고 복잡해지는 경험, 다들 있으시죠? ES2021에 새롭게 등장한 &&=와 ??= 연산자는 이런 고민을 깔끔하게 해결해주는 멋진 도구입니다. 마치 마법처럼 짧고 간결하게 코드를 작성할 수 있도록 도와주는데요. 이번 포스팅에서는 &&=와 ??= 연산자를 사용하는 방법과 각각의 장점, 그리고 실제 활용 예시까지 자세하게 알아보겠습니다.  1. &&= 연산자: 조건부 할당의 마법사 &&= 연산자는 논리 AND 연산자(&&)와 할당 연산자(=)가 합쳐진 형태입니다. 기존 값이 참(trut..

자바스크립트 개발자를 위한 Promise 완벽 가이드: 콜백 지옥 탈출하기콜백 함수 지옥에 빠져 허우적대는 당신! 브라우저가 버벅거리며 긴 작업에 힘겨워하는 모습에 좌절한 적 있으신가요? 그런 여러분을 위해 Promise가 등장했습니다! 마치 새끼손가락 걸고 약속하는 것처럼 든든한 JavaScript Promise의 세계를 함께 알아볼까요? 자바스크립트의 Promise는 현실의 약속보다 훨씬 믿음직스러울지도 몰라요! 이번 포스팅에서는 Promise가 무엇이며, JavaScript에서 어떻게 작동하는지 자세히 살펴보겠습니다.비동기 작업이란 무엇일까요?Promise에 대해 알아보기 전에 비동기 작업에 대한 개념부터 짚고 넘어가는 것이 좋겠죠? 간단히 말해서, 비동기 작업은 컴퓨터가 즉시 완료하지 않는 모든 ..

안녕하세요! React 19가 공식적으로 출시되었고 안정화되었습니다. 이번 글에서는 React 19의 주요 기능과 개선 사항을 소개하겠습니다. 이 내용은 깊이 있는 분석보다는 친절한 개요에 가깝습니다. 따라서 새로운 기능과 개선 사항에 대한 감을 잡을 수 있을 것입니다. 먼저, React 19의 주요 추가 기능 중 하나는 '액션'이라는 개념입니다. 액션은 데이터 변화를 처리하기 위해 전달할 수 있는 함수입니다. 예를 들어, 사용자의 이름을 API 호출로 업데이트하는 경우, 액션을 사용하여 로딩 상태, 에러, 그리고 낙관적인 업데이트를 수동으로 관리하지 않고 처리할 수 있습니다. 이전 버전에서는 여러 상태 호출을 처리해야 했지만, 액션을 사용하면 비동기 전환을 자동으로 처리할 수 있습니다. 또한, 액션을 ..

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} ..

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

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는 자주 사용하지는 않지만, 유용할 ..

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 ..

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..

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