드리프트의 뉴 코딩 이야기

Go 언어에서 구조체 두 개가 정확히 똑같은 필드를 가지고 있더라도, 하나가 다른 하나보다 메모리를 더 많이 또는 더 적게 요구할 수 있다는 사실이 놀라울 수 있는데요. 일반적으로 필요한 것보다 더 많은 메모리를 사용하지 않도록 하는 것이 좋기 때문에, 구조체 패킹(structure packing)이라는 기술과 Go 프로그래밍 언어에 어떻게 적용할 수 있는지 알아보겠습니다.예제 구조체 만들기다음 예제 코드를 살펴보겠습니다. 이 코드는 두 개의 사용자 정의 타입을 정의하는데, 그 중 하나는 세 개의 필드를 포함하는 구조체입니다.package maintype City uint8const ( NewYork City = iota London Paris Mumba..

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

Flutter 렌더링 방식 완벽 해부: Widget부터 픽셀까지, 핵심 원리 파헤치기저의 Flutter 개발 경력도 벌써 몇 달이나 되었는데요. 간혹 감으로 사용하는 부분(BuildContext나 WidgetsBinding 등)이 있거나, 렌더링 시점에 버그가 발생했을 때 인터넷에서 본 글을 따라 해결하는 경우가 있었는데요. 물론 일단 돌아가는 애플리케이션 개발은 가능했지만, 좀 더 자신감을 가지고 개발하고 싶고, Flutter 실력을 한 단계 더 끌어올리고 싶어서 Flutter가 어떻게 렌더링하는지 제대로 알아봤습니다. 그 결과를 정리해봤는데요. 비슷한 고민을 하는 분들에게 도움이 되길 바랍니다. 시작하며: 이 글의 범위먼저 이 글에서 이야기하는 "렌더링 방식"이 구체적으로 무엇을 가리키는지 말씀드리겠..

Dart 소스 코드 실행 구조 완벽 분석: Flutter에서 Dart VM까지배경우연히 React와 React Native에 대해 조금 조사를 할 기회가 있었는데, 그 과정에서 React Native와 Flutter의 차이점을 알아보게 되었습니다. 그러다 보니 "일상적으로 작성하는 Flutter/Dart 소스 코드가 iOS/Android와 같은 네이티브 플랫폼에서 실행되기까지 어떤 과정이 있는지"에 대해 관심이 생겨 관련 정보를 수집하게 되었는데요. 지금까지도 전체적인 이미지는 대충 가지고 있었지만, 구체적으로는 애매했기 때문에 이번에 다시 조사한 내용을 제 방식대로 정리해본 메모에 가까운 내용입니다. 동기는 Flutter였지만, 조사하면서 Dart와 Dart VM까지 파고들게 되었기 때문에 Flutte..

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

Rust로 간단한 CLI 유효성 검사 도구 만들기개요Rust 공부하면서 배운 문법으로 간단한 무언가를 만들어보고 싶어서 이번에 소개할 유효성 검사 도구를 만들어봤습니다. 간단한 수준이지만 데이터 형식에 대한 기본적인 유효성 검사를 수행하는 프로그램입니다. Rust 초보자로서 완벽한 코드를 작성했다는 자신은 없고, ChatGPT의 도움도 꽤 많이 받았습니다. 초보자가 만든 작은 프로젝트로 봐주시면 감사하겠습니다.프로젝트 설정: Cargo.toml[package]name = "validation-tool"version = "0.1.0"edition = "2021"[dependencies]dialoguer = "0.11"ferris-says = "0.3.1"regex = "1.8" Rust 입문을 위한 프로젝..

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

Flutter 엔지니어를 위한 아키텍처 입문 가이드: 효율적이고 확장 가능한 앱 설계 방법2024년 11월 18일, Flutter의 공식 문서에서 Flutter의 설계에 관한 내용이 공개되었습니다. 이에 따라, Flutter의 설계 원칙을 보다 쉽게 이해할 수 있도록 내용을 정리하고, 직역이나 인공지능 번역으로는 이해하기 어려운 부분을 최대한 풀어 설명했습니다.처음에이번 가이드에서는 다음과 같은 내용을 배울 수 있습니다:아키텍처의 장점일반적인 아키텍처 원칙Flutter 팀이 추천하는 아키텍처MVVM과 상태 관리의존성 주입견고한 Flutter 애플리케이션을 만들기 위한 일반적인 디자인 패턴아키텍처의 장점우수한 아키텍처는 엔지니어와 사용자 모두에게 많은 이점을 제공합니다.유지보수성: 시간이 지나도 변경, 업..