홈 | 김정환 블로그

리액트 쿼리 실무팁
2025년 05월 18일
TanStack Query는 서버 상태를 클라이언트에서 효율적으로 다루는 도구다. 처음 접할 때는 useQuery() 정도만 사용해도 충분해 보였고, 실제로 기본 기능만으로도 꽤 많은 일을 할 수 있었다. 실무에서 다양한 API 요청을 다루다 보니 queryKey 설계, 오류 처리, 쿼리 무효화, 로딩 UI 등 고려해야 할 요소들이 훨씬 많았다. 이 때 …
리액트 쿼리, 내부는 이렇게 움직인다
2025년 05월 11일
이전 글(리액트 쿼리, 늦게 시작했지만 더 확실한 서버 상태 관리)에 이어 리액트 쿼리 구조와 동작 원리를 분석해 보았다. useQuery()를 시작으로 QueryClient까지 핵심 객체들의 역할을 파악하고, 이들 간의 협업 구조를 이해하면 라이브러리를 사용할 때 훨씬 유리할 것이다. query-core와 react-core 초반에는 React Quer…
리액트 쿼리(TanStack Query), 늦게 시작했지만 더 확실한 서버 상태 관리
2025년 04월 26일
마침내 리액트 쿼리(React Query)를 사용했다. '서버 상태를 따로 관리하자', '최신 기술 스택으로 바꾸자'는 이야기가 팀에서 꾸준히 나왔지만, 나는 매번 보수적인 태도를 유지해 왔다. 제품이 잘 돌아가고 있는데 굳이 바꿀 필요가 있을까 하는 생각과, 신기술을 학습해야 한다는 부담감이 한 켠에 있었기 때문이다. 팀원들은 포기하지 않고 리액트 쿼리…
코드 리뷰: 협업으로 배우고 성장하기
2025년 01월 20일
코드 리뷰를 시작하지 일 년이 지났다. 그 전에는 혼자 일하다 보니 다른 사람의 코드를 읽을 일이 없었고, 팀원이 몇 명 있긴 했지만 모두 다른 직군이었다. 재작년부터는 프론트엔드 개발자 여섯 분과 함께 일하면서 비로소 코드 리뷰할 기회가 생겼다. 사실 리뷰에 크게 신경 쓰지 않았다. 지금까지는 별다른 어려움 없이 작업해왔기에 코드 리뷰의 중요성을 실감하…
모듈 페더레이션 구조와 동작 원리
2025년 01월 07일
import 함수는 실행 환경에 따라 전달받은 인자를 해석하여 해당 자원을 불러온다. 예를 들어 Node.js 환경에서는 파일을, 브라우져 환경에서는 HTTP 요청을 통해 자원을 로드한다. 이 특성을 이용하면 애플리케이션 초기 로딩 속도를 개선할 수 있겠다. 초기에는 최소한의 코드만 로드하고, 필요할 때 나머지 코드를 지연 로딩할 수 있기 때문이다. 이 …
리액트 lazy
2024년 12월 18일
웹 애플리케이션의 초기 로딩 속도를 개선하는 핵심 전략 중 하나는 필요한 코드만을 적절한 시점에 로드하는 것이다. Reac.lazy는 이러한 코드 분할(Code Spliiting)을 효과적으로 구현할 수 있게 도와주는 도구다. 이 글에서는 React.lazy의 동작 원리와 사용 방법을 살펴 보겠다. 동적 import의 이해 모듈을 동적으로 불러오는 imp…
모듈 페더레이션 타입 힌트와 로깅
2024년 12월 08일
타입 힌트로 더 안전하게 이번 새로운 모듈 페더레이션은 타입 힌트 제공이라는 편의를 제공한다. 원격 모듈을 사용하는 애플리케이션을 흔히 호스트(또는 소비자)라고 부른다. 만약 호스트를 타입스크립트로 개발한다면, 원격 모듈의 타입 정보를 제공받는 것은 큰 장점이 된다. 이번 모듈 페더레이션은 원격 모듈과 호스트 간에 타입 정보를 동기화하여, 더 안전하고 예…
[HTTP] 6편. 성능
2024년 07월 12일
6편 소개 브라우져가 웹 페이지를 렌더링할 때 발생하는 HTTP 요청을 효율적으로 제어하는 다양한 기법 16장. 렌더링 최적화: 외부 리소스의 로드 시점을 제어해 웹 성능을 최적화하는 기술 17장. 캐시: 서버와 브라우저가 HTTP 헤더를 통해 캐싱 정책을 주고받아 성능을 최적화하는 메커니즘 16장. 로딩 최적화 16.1 렌더링 과정 DSN 질의 HTML…
[HTTP] 5편. 보안
2024년 07월 11일
5편 소개 브라우져 보안과 함께 HTTP 통신을 더 안전하게 만드는 TLS 13장. 브라우져 보안: XSS(크로스 사이트 스크립팅)와 같은 공격 기법과 이를 방지하기 위한 브라우저 보안 정책 14장. CORS: 외부 도메인의 자원을 안전하게 활용하기 위한 CORS 정책과 적용 방법 15장. HTTPS: HTTPS가 네트워크 보안을 강화하는 방식과 TLS의…
[HTTP] 4편. 추가 프로토콜
2024년 07월 10일
4편 소개 HTTP의 비연결성을 극복하는 다양한 기술 9장. 폴링: 클라이언트가 주기적으로 서버에 요청을 보내서 새로운 데이터를 확인하는 방법 10장. 롱 폴링: 폴링 보다 호율적인 통신 기법 11장. SSE: 서버가 클라이언트로 실시간 데이터를 푸시하는 방법 12장. 웹 소켓: 클라이언트와 서버 간의 양방향 통신 프로토콜 9장. 폴링 9.1 구조 지속적…

VIDEOS