홈 | 김정환 블로그

모듈 페더레이션 구조와 동작 원리
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 구조 지속적…
[HTTP] 3편. AJAX
2024년 07월 09일
3편 소개 직접 만들 수 있는 HTTP 요청 6장. AJAX 요청과 응답: fetch 함수로 AJAX 요청과 응답을 다루는 법에 대해 7장. AJAX 진행율과 취소: AJAX 진행율을 계산하는 방법과 요청을 취소하는 방법에 대해 8장. AJAX 라이브러리: fetch와 XHR 객체 기반의 주요 AJAX 라이브러리 6장. 업로드와 응답 6.1 AJAX Fr…
[HTTP] 2편. 브라우져
2024년 07월 08일
2편 소개 웹 브라우져가 HTTP를 어떻게 사용하는지 이해할수 있습니다. 3장. 컨텐츠 협상: 웹브라우져가 서버와 데이터를 주고 받을 때 최적의 형태로 만들기 위한 매커니즘을 이해하실 수 있습니다. 4장. 쿠키: 서버가 웹 브라우져를 식별하기 위한 방법인 쿠키에 대해 배우실 수 있습니다. 5장. 네트워크 요청: 웹 브라우저에서 발생할 수 있는 HTTP 요…
[HTTP] 1편. HTTP 기본
2024년 07월 07일
1편 소개 1장. HTTP 시작: 웹의 탄생 배경과 역사에 대해 알 수 있습니다. 2장. HTTP 메시지: HTTP의 주요 요소에 대해 배우실 수 있습니다. 1장. HTTP 시작 1.1 문서 배포 웹 어플리케이션의 동작 원리와 HTTP의 역할 HTTP로 전하는 강의 간단한 강의 제공 애플리케이션 구현 1.2 더 많은 문서 더 많은 수업 자료를 여러 페이지…
리액트19 베타
2024년 05월 11일
마침내 npm에서 리액트 19 베타를 사용할 수 있다. 관련한 문서에서는 액션이라는 새로운 개념과 파생된 리액트 훅을 소개한다. 그동안 사용했던 API를 더 편하게 바꾸거나 일부 라이브러리 기능을 대체하는 개선사항도 있다. 이 문서를 통해 앞으로 정식 버전이 될 리액트 19의 변경사항을 미리 살펴보자. Action과 useActionState 액션(Act…

VIDEOS