d3는 데이터 시각화에 있어, 매우 강력하지만 저 수준(low-level) 라이브러리입니다. react와 결합했을때, 잘못사용하면 충돌이 발생하기 쉽습니다. 이 글에서는 충돌을 해결하는 두 가지 방식을 정의합니다. 방식 1 - d3 로 모든 dom을 처리하기 d3가 차트 렌더링을 위한 dom을 완전히 소유하는 방식입니다. React는 dom 과 연...

2025년 한해를 돌아보며, 개발자로서의 성장과 도전을 기록합니다. 1. 들어가며: 2025년은 나에게 어떤 한 해였나? 세가지 단어로 표현한다면 도전, 고난, 갈증이었습니다. 현재 담당 중인 프로덕트를 성공적으로 출시하기 위해 저를 포함한 팀 전체가 상당한 에너지를 쏟아야 했던 해였습니다. 그 과정은 분명 쉽지 않았지만, 그만큼 많은 것을 배웠고...

React Compiler 컴포넌트와 훅을 자동으로 최적화(메모이제이션 Memoization) useMemo, useCallback, memo 사용에 대해 더이상 신경쓰지 않아도 됨. 선택적으로 컴파일이 가능. 참조 : react compiler의 코드 변환 결과물을 보고싶다면 playground 에서 테스트 가능. 준비 react...

Prioritized Task Scheduling API는 브라우저에서 태스크 실행을 더 효율적으로 관리할 수 있도록 돕는 Web API입니다. 특징 개발자는 태스크를 실행할 때 각 태스크에 우선순위를 지정할 수 있습니다. 예를 들어, 사용자 인터페이스 업데이트와 같은 중요한 태스크는 높은 우선순위user-blocking를 부여하고, 백그...

이번 글에는 웹 브라우저에서 제공하는 OPFS(Origin Private file system)에 대해 간단히 살펴봅니다. Origin Private file system 웹 브라우저에서 제공하는 origin 기반 비공개 파일 system 특징 Origin 기반으로 엄격히 구분됨 HTTPS 환경에서만 동작 OS와는 분리 독립...

현재 회사에서 react 17 → react 18 버전으로 마이그레이션을 준비하고 있어 관련 내용을 정리합니다 다루는것 클라이언트 사이드에서 마이그레이션시 검토해야하는 부분 다루지 않는것 서버사이드 렌더링 react native roots api 변경 root render 모듈이 react-dom → react-dom...

우여곡절이 많았던 2023년을 돌아봅니다. 제 인생 타임라인을 만들어본다면 2023년은 볼드체로 강조할만한 한해였습니다. 여러 이슈가 있었는데요. 키워드 위주로 하나씩 뽑아보았습니다. 건강이슈 - (부제 : 나이에 비해 엄청 안좋으시네요) 퇴사 이직 의식의 변화 홈커밍 데이 참석 한해를 요약한다면.. 건강 이슈 환...

최근에 같은 팀원으로부터 많은 단축키를 사용하는 상황에서 어떻게 하는게 좋을 지 질문을 받았었는데, 선뜻 답이 떠오르지 않아 두루뭉술하게 대답을 했었습니다. 이번 기회에 어떤 라이브러리가 있는지 알아보고 어떤 구조가 좋을지 알아보고자 합니다. 단축키 라이브러리 hotkeys-js GitHub : https://github.com/jaywcj...

이펙티브 타입스크립트 4장 내용을 정리하였습니다. 4장 타입 설계 28. 유효한 상태만 표현하는 타입을 지향하기 타입을 잘 설계하면 코드는 직관적으로 작성할 수 있음. 그러나 타입 설계가 엉망이라면 어떠한 기억이나 문서도 도움이 되지 않음. 효과적인 타입 설계는 유효한 상태만 표현할 수 있는 타입을 만들어내는 것. 해당 챕터에서 ...

최근 회사 프로젝트에 eslint-plugin-import 도입 검토를 하기 위해 관련 내용을 정리하였습니다. eslint-plugin : **eslint-plugin-import** https://www.npmjs.com/package/eslint-plugin-import 장점 다양한 옵션들을 지원합니다 단점 다양한 옵션을 지...