드리프트의 뉴 코딩 이야기

리눅스 커널과 Rust의 갈등: Hector Martin 사퇴 이후의 미래와 과제1. Hector Martin의 사퇴: 갈등의 시작과 본질 Hector Martin(일명 Marcan)의 리눅스 커널에서의 사퇴는 단순히 한 개인의 선택이 아니라, 리눅스 커뮤니티 내부의 깊은 갈등을 상징하는 사건입니다. 그는 Apple Silicon 기반 맥북에서 리눅스를 실행할 수 있도록 하는 Asahi Linux 프로젝트의 핵심 인물로, Rust 언어를 리눅스 커널에 도입하려는 Rust for Linux(R4L) 프로젝트에서도 중요한 역할을 해왔습니다. 하지만 최근 몇 달간, 그는 다른 유지 관리자들과의 갈등 속에서 점점 더 좌절감을 느끼게 되었습니다. 특히 이번 사태는 Hector가 소셜 미디어를 통해 자신이 겪었던 ..

Steam(스팀)이 Go(고) 런타임을 망가뜨린다고? 게임 개발, 이제 Go로도 가능한가?여러분, 안녕하세요! 오늘은 게임 개발자, 특히 Go(고) 언어를 사용하는 개발자분들에게 흥미로운 소식을 가져왔는데요. 최근 Steam(스팀) 커뮤니티에서 "Steam이 Go 런타임을 망가뜨린다(Steam breaks Go runtime)"는 제목의 글이 올라와 뜨거운 논쟁이 벌어지고 있습니다. 이 글은 단순한 불만을 넘어, Steam 플랫폼과 Go 언어의 통합, 더 나아가 Go 언어를 이용한 게임 개발의 가능성에 대한 심도 있는 논의로 이어지고 있는데요. 과연 무슨 내용일까요? 함께 자세히 알아봅시다! 1. Steam(스팀)이 Go(고) 런타임을 망가뜨린다고?결론부터 말씀드리자면, Steam이 Go 런타임을 '망가..

리액트 폼 데이터 저장, 이제 Nuqs로 완벽하게 해결하세요! 안녕하세요! 웹 개발을 하다 보면 폼 데이터 때문에 머리가 아픈 순간이 많죠? 사용자 입력 내용을 저장하거나 페이지 새로고침을 처리하고, 심지어는 사용자 간에 폼 상태를 공유해야 할 때도 있습니다. 전통적인 방법들도 있지만, 요즘은 더 똑똑하고 세련된 방법들이 많이 등장했답니다! 오늘은 Nuqs를 사용해서 이러한 문제들을 어떻게 우아하게 해결할 수 있는지 알아볼까요? 과거의 방법과 한계점1. 로컬 스토리지 (localStorage)옛날 옛적에 개발자들은 브라우저의 localStorage를 사용해서 폼 데이터를 저장했답니다.// 폼 데이터 저장localStorage.setItem("formData", JSON.stringify(formData)..

URL 쿼리 스트링과 React 리액트 상태 관리의 만남: nuqs 사용법 가이드 안녕하세요! 오늘은 React 애플리케이션에서 URL 쿼리 스트링을 활용해 상태를 관리할 수 있게 도와주는 nuqs라는 라이브러리를 소개하겠습니다. nuqs는 간단하고 타입 안전하며, Next.js, React Router, Remix 등 다양한 React 기반 프레임워크와 함께 사용할 수 있습니다. 이 글은 튜토리얼 형식으로 작성되었으니, 단계별로 따라 하면서 nuqs의 매력을 체험해 보세요!1️⃣ 시작하기: nuqs 설치먼저 nuqs를 설치해야 합니다. 프로젝트 루트 디렉토리에서 다음 명령어 중 하나를 실행하세요.# npmnpm install nuqs# yarnyarn add nuqs# pnpmpnpm add nuqs ..

Vite React vs Next.js: 더 나은 선택은? Hono와 함께하는 최신 웹 개발 트렌드웹 개발 프레임워크는 지속적으로 발전하고 있지만, 완벽한 솔루션은 존재하지 않는다. 오랫동안 Next.js를 사용해 온 개발자들 사이에서도 새로운 대안이 필요하다는 목소리가 나오고 있다. 최근 Vite React와 Hono를 조합한 개발 방식이 많은 주목을 받고 있는데, 과연 Next.js를 대체할 수 있을까? Vite React는 빠른 빌드 속도와 가벼운 구조를 자랑하며, Hono는 Express 스타일의 간결한 미들웨어 시스템을 제공한다. 이러한 조합은 개발자들에게 더 직관적이고 유연한 개발 환경을 제공하지만, 단점도 분명히 존재한다. 이 글에서는 Vite React + Hono의 장점과 단점을 살펴보고..

더 이상 느린 리액트는 없다: 리액트 컴파일러 완벽 가이드React의 매력은 마치 레고 블록처럼 함수(컴포넌트)를 조립하여 UI를 구축하는 직관성에 있습니다. 개발자는 그저 함수를 만들고, React는 그 함수를 적절한 시점에 불러내 화면을 구성하죠. 하지만 이 간편함 뒤에는 성능이라는 잠재적 문제가 숨어 있습니다. 복잡한 연산을 수행하는 함수는 앱을 느리게 만드는 주범이 될 수 있기 때문입니다. 그래서 과거에는 개발자가 직접 성능 튜닝이라는 험난한 여정을 떠나야 했는데요. "이 함수는 언제 다시 실행해야 최적일까?"라는 질문에 답을 찾기 위해 고군분투해야 했습니다. 이제, 리액트 팀이 이 고된 여정을 자동화해 줄 구원투수를 등판시켜줬는데요. 바로 리액트 컴파일러(React Compiler)입니다! 코드..

React useState 업데이트 함수의 비밀: 최신 상태를 참조하는 마법 (디버깅으로 더 쉽게!)React에서 가장 많이 쓰이는 훅 중 하나인 useState! 그 안에는 업데이트 함수라는 게 존재하는데요, 오늘은 이 업데이트 함수를 useState의 내부 작동 원리 관점에서 깊이 파헤쳐 보겠습니다. 특히, React 소스 코드 분석과 디버깅을 통해 좀 더 쉽고 확실하게 이해해 보도록 하죠! 들어가기 전에: useState 업데이트, 왜 다르게 동작할까?문자열 타입의 state가 있다고 가정하고, 현재 문자열에 새로운 문자를 추가하는 함수를 만들어 보겠습니다.const [inputString, setInputString] = useState(""); 아래의 경우, 둘 다 같은 결과("A")가 나올 텐..

TypeScript 성능 향상의 비밀: tsconfig.json 마스터하기TypeScript 5.7 버전 기준으로, 완벽한 tsconfig.json 설정을 위한 핵심 옵션들을 알아볼까요?  이 블로그 글에서 다루지 않는 내용 이 글은 로컬 모듈이 모두 ESM인 프로젝트 설정 방법에 중점을 두고 있습니다. CommonJS 모듈 import에 대한 팁은 제공하지만, 다음 내용은 다루지 않습니다.allowJs 및 checkJs 옵션을 사용한 일반 JavaScript 파일 가져오기 및 타입 검사JSX 설정 (TypeScript 핸드북의 "JSX" 섹션 참조)composite 옵션 등을 사용한 모노레포 프로젝트 설정 (TypeScript 핸드북의 "프로젝트 참조" 챕터와 제 블로그 글 "npm workspaces..

타입스크립트 Enum 정복: 실전 가이드 & 완벽 대안이번 글에서는 타입스크립트 열거형(Enum)에 대해 자세히 살펴보려고 합니다.열거형은 어떻게 작동할까요?어떤 경우에 사용하면 좋을까요?사용하고 싶지 않을 때는 어떤 대안이 있을까요?마지막에는 어떤 상황에 무엇을 사용하는 것이 좋은지 추천해드리면서 글을 마무리하려고 합니다.  표기법 소스 코드에서 유추된 타입을 표시하기 위해 npm 패키지 ts-expect를 사용했는데요. 예를 들면 다음과 같습니다.// Types of values// @ts-expect-error: Argument of type 'number' is not assignable to parameter of type 'string'.expectType(123);// @ts-expect-e..

자바스크립트 정규 표현식의 새로운 힘! 패턴 수정자 알아볼까요?요즘 자바스크립트 개발하며 정규 표현식 써보면서 꿀팁 하나 알려드릴까 합니다. 바로 패턴 수정자(Regular Expression Pattern Modifiers) 인데요! 이 기능 덕분에 정규 표현식을 더욱 유연하고 효율적으로 사용할 수 있게 되었답니다. 이 글에서는 패턴 수정자가 뭔지, 어떻게 쓰는지, 그리고 어떤 경우에 유용한지 자세히 알아볼게요.  패턴 수정자는 뭘까요? 기존에는 정규 표현식 플래그(예: i - 대소문자 구분 안 함)를 정규 표현식 전체에만 적용할 수 있었는데요. 하지만 패턴 수정자 덕분에 이제는 정규 표현식의 일부분에만 플래그를 적용할 수 있게 되었답니다. 마치 정규 표현식 안에 플래그를 직접 넣는 것처럼 말이죠! 예..