홈 | 김정환 블로그

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. 각자 웹팩보다 얼마나 빠른지를 그들의 강점으로 내세운다. 자기들끼리도 더 낫다고 주장한다. 속도의 공통 원인는 자바스크립트로 만들지 않았다는 사실이다. 자바스크립트 코드를 생산하는 도구인데 자바스크립트를 사용하지 않아서 빠르다. 엄마처럼 살지 않겠다고 큰 소리쳤는데 자기 딸에게 그 말을 듣…
pnpm
2023년 10월 20일
처음 들었을 때 "p"가 무슨 뜻일지 궁금했다. 홈페이지에서 바로 찾을 수 없었고 인터넷에 검색해도 잘 나오지 않았다. performant npm '승진, 성능 기준에 맞는' 이런 뜻인데 '고성능 npm'이라고 이해했다. 회사 동료의 제안으로 사용하게 된 이 패키지 매니져가 이름처럼 빠르고 성능도 좋았다. npm보다 기능이 부족하거나 사용상 혼란스러운 부…
[리액트 2부] 4편 최종정리
2023년 06월 24일
마침내 마지막 4편을 정리할 시간이다. 1장. 레프 훅 랜더링과 무관하게 지속할 수 있는 값을 제공 상태 훅과 비슷하지만 리랜더징 하지않음 Dialog, OrderForm 활용 2장. 제어 폼 제어 컴포넌트 이해 제어 컴포넌트 폼을 재사용하기 위한 MyForm useForm, getFieldProps Form, Field, ErrorMessage Orde…

VIDEOS