홈 | 김정환 블로그

리액트19 베타
2024년 05월 11일
마침내 npm에서 리액트 19 베타를 사용할 수 있다. 관련한 문서에서는 액션이라는 새로운 개념과 파생된 리액트 훅을 소개한다. 그동안 사용했던 API를 더 편하게 바꾸거나 일부 라이브러리 기능을 대체하는 개선사항도 있다. 이 문서를 통해 앞으로 정식 버전이 될 리액트 19의 변경사항을 미리 살펴보자. Action과 useActionState 액션(Act…
컨텐츠 협상
2024년 05월 04일
서버는 다양한 클라이언트로부터 요청을 받는다. 같은 내용이라도 클라이언트마다 필요한 문서 형식이 다르다. 압축한 문서를 읽을 수도 있지만 그렇지 못한 경우도 있다. 한국어나 영어처럼 클라이언트가 선호하는 언어가 다르기도 하다. 각양각색의 클라이언트에게 적합한 자원을 제공하는 것 또한 서버의 역할이다. 클라이언트와 함께 서로의 입장 차이를 줄여나가며 거래할…
HTTP 쿠키
2024년 03월 04일
서론 유닉스 환경에서 개발할 때 받은 데이터를 그대로 다시 보내는 것을 매직 쿠키라고 한다. 지금으로부터 30년 전 쇼핑 카트를 구현할 해법으로 비슷한 구조를 제안했는데 이것이 바로 '쿠키'의 시초다. 사이트 재 방문 확인 기능이 쿠키를 활용한 첫 사례라고 한다(참고: HTTP Cookie | MDN). 쿠키가 브라우져 저장소 중의 하나라고 생각했다. 서…
HTTP 캐싱
2024년 02월 08일
서론 캐시는 데이터를 미리 복사해 놓은 저장소다. 반복 작업을 줄이고 어플리케이션 성능을 높이는 역할이다. 멀리 떨어진 자원을 클라이언트로 얼마나 빨리 가져오느냐가 웹 어플리케이션 성능을 좌우한다. 한 번 다운로드한 파일을 브라우저 캐시에 저장하면 성능을 눈에 띄게 높일 수 있다. 이러한 기법을 HTTP 캐싱이라고 한다. 캐싱 매커니즘은 브라우져와 서버가…
자바스크립트 http 클라이언트 라이브러리 비교
2024년 01월 10일
브라우저는 http 요청을 위해 xhr과 fetch을 제공한다. 직접 써보진 않았고 좀 더 간소한 인터페이스로 감싸서 사용했다. 요청과 응답 사이에 반복되는 로직을 이 래퍼에 담아 둔다거나 커스터마이징을 위한 인터페이스를 열어 두기도 했다. 이런 요구는 모든 웹 개발 프로젝트의 공통 사항이다. 이미 만들어둔 라이브러리를 가져다 사용하는 게 흔하다. 제이쿼…
Fetch 진행율
2023년 12월 31일
Ajax 기법을 사용하면서 진행율을 표시해 보진 않았다. 업로드 혹은 다운로드할 때 시간이 걸리기 때문에 UI로 표시할 필요는 있다. 스핀이나 프로그래스 바로 진행 여부를 나타낸 정도다. 정확한 수치로 진행율을 표시하는 방법이 있을까? fetch로 간단히 구현할수 있다는 걸 알았다. 물론 XMLHttpRequest(줄여서 xhr) 객체로도 가능하다. 다운…
Fetch
2023년 12월 27일
서버가 HTTP API로 자원을 제공하면 브라우져는 AJAX 기법으로 자원을 얻는다. 실무에서는 axios나 superagent 같은 전용 라이브러리를 사용했다. 모두 브라우저가 제공하는 XMLHttpRequst 객체, 혹은 fetch 함수로 구현되었다. fetch는 거의 모든 웹 브라우져가 지원하는 함수다. 크롬, 사파리, 파이어폭스는 2015년부터 이…
CORS
2023년 12월 12일
브라우져에서 다른 출처에 있는 리소스를 사용할 수 있는 규칙이 교차 출처 리소스 공유, CORS다. 출처가 다른 리소스에 접근할 수 없는 상황에 맞닥뜨렸을 때 다소 당황했다. 장님 코끼리 코만지듯 문제를 해결했지만 마음의 꺼림칙함은 지울수 없었다. 한 가지 중요한 사실만 기억하자. 서버 자원을 보호하기 위한 보안 규칙. 이것만 붙들고 이 글을 따라가면 C…
cURL
2023년 12월 03일
네트웍 요청을 다룰 때 주로 cURL이나 포스트맨을 사용한다. 비교적 간편한 전자를 기본으로 쓰면서 팀에서 협업할 때는 후자를 이용하는 편이다. 1998년에 출시한 이 도구는 벌써 20년이 지났다. 아직도 많은 개발자들이 손에서 놓치 않는 비결은 뭘까? 주요 구조를 알아보고 내가 사용하는 사례 몇 가지를 정리해 보겠다. 구조 이름은 'URL을 위한 클라이…
esbuild
2023년 11월 16일
웹팩과 비슷한 도구들이 많다. esbuild, swc, vite. 각자 웹팩보다 얼마나 빠른지를 그들의 강점으로 내세운다. 자기들끼리도 더 낫다고 주장한다. 속도의 공통 원인는 자바스크립트로 만들지 않았다는 사실이다. 자바스크립트 코드를 생산하는 도구인데 자바스크립트를 사용하지 않아서 빠르다. 엄마처럼 살지 않겠다고 큰 소리쳤는데 자기 딸에게 그 말을 듣…

VIDEOS