웹 개발에서 살아남기

자바스크립트에서 주소를 다룰 때 사용하는 URL과 URLSearchParams 객체의 차이점과 활용법을 정리한다. 전체 경로 파싱부터 쿼리 스트링(Query String) 조작, 그리고 실무에서 자주 쓰이는 유틸리티 함수 구현까지 상세히 다룬다. URL과 URLSearchParams: 자바스크립트로 주소 조작하기이 글은 JavaScript Core 시리즈의 3번째 글이다.프론트엔드 개발을 하다 보면 API 요청을 보내거나 페이지 라우팅을 처리할 때 URL을 조작해야 하는 일이 빈번하다. 이때 정규표현식으로 문자열을 자르기보다는 브라우저가 기본 제공하는 Web API인 URL과 URLSearchParams를 사용하면 훨씬 안전하고 깔끔하게 처리할 수 있다.비슷해 보이지만 용도가 명확히 다른 두 객체의 특징..

"함수 선언문이 코드의 최상단으로 끌어올려진다"는 호이스팅(Hoisting) 현상은 마법이 아닙니다. 자바스크립트 엔진이 코드를 실행하기 전 실행 컨텍스트(Execution Context)를 생성하는 과정에서 발생하는 논리적인 현상을 상세히 분석했습니다.📂 JavaScript Core의 4번째 글입니다. 실행 컨텍스트: 호이스팅이 발생하는 진짜 이유자바스크립트를 공부하다 보면 "변수 선언이 코드의 최상단으로 끌어올려진 것처럼 동작한다"라는 호이스팅(Hoisting) 개념을 마주하게 됩니다. 하지만 실제로 코드가 이동하는 것은 아닙니다. 그렇다면 엔진 내부에서는 도대체 무슨 일이 벌어지고 있는 걸까요?이 현상을 이해하려면 자바스크립트 엔진이 코드를 실행하기 위해 준비하는 환경, 즉 실행 컨텍스트(Exec..

자바스크립트는 싱글 스레드 언어지만, 브라우저의 멀티 스레드 환경(Web APIs)과 이벤트 루프(Event Loop) 덕분에 비동기 처리가 가능합니다. 콜 스택(Call Stack), 태스크 큐(Task Queue), 그리고 마이크로태스크 큐(Microtask Queue)의 동작 순서와 우선순위를 상세히 분석했습니다.📂 JavaScript Core의 3번째 글입니다.📂 JavaScript Core의 2번째 글입니다. 이벤트 루프(Event Loop): 싱글 스레드 JS가 비동기를 처리하는 마법"자바스크립트는 싱글 스레드(Single Thread) 언어다." 이 말은 한 번에 하나의 작업만 수행할 수 있다는 뜻입니다. 그런데 우리가 만든 웹 사이트는 동시에 여러 가지 일을 하죠. 데이터를 받아오면서(..

고화질 사진을 서버로 바로 보내면 트래픽 비용이 증가하고 업로드 속도가 느려집니다. browser-image-compression 라이브러리를 사용하여 클라이언트(브라우저) 단에서 이미지를 효율적으로 압축하고 리사이징하는 방법을 알아봅니다. 서버 비용 아끼는 Frontend 기술: 이미지 압축 업로드요즘 스마트폰으로 찍은 사진은 기본 5MB~10MB를 훌쩍 넘습니다. 이 원본 파일을 그대로 서버(AWS S3 등)에 업로드하면 스토리지 비용 증가, 데이터 전송 요금 폭탄, 그리고 느린 사용자 경험(UX)이라는 삼중고를 겪게 됩니다.백엔드에서 리사이징을 할 수도 있지만, 애초에 프론트엔드에서 용량을 줄여서 보낸다면 네트워크 트래픽 자체를 획기적으로 줄일 수 있습니다.1️⃣ browser-image-compr..

이미지 업로드 미리보기를 구현하는 두 가지 방법(URL.createObjectURL vs FileReader)의 장단점을 비교하고, 메모리 누수를 방지하는 React 최적화 코드를 정리했습니다. React: 이미지 업로드 미리보기(Preview) 구현하기파일 업로드 기능을 만들 때 미리보기(Preview)는 선택이 아니라 필수입니다. 사용자가 자기가 무엇을 올렸는지 눈으로 확인시켜줘야 하니까요. 서버로 파일을 보내기 전에 브라우저에서 바로 이미지를 띄우는 방법은 크게 두 가지가 있습니다. 장단점이 확실하니 상황에 맞춰서 사용하시면 됩니다.1️⃣ 방법 1: URL.createObjectURL (추천)브라우저 메모리에 있는 파일(Blob)을 가리키는 가상 URL을 생성하는 방식입니다. 찍어보면 blob:ht..

React 환경에서 파일 업로드를 구현할 때 필수적인 FormData의 사용법과, 개발자들이 흔히 범하는 Content-Type 설정 실수, 그리고 디버깅 방법을 정리했습니다. React 파일 업로드, FormData로 깔끔하게 처리하기HTML 태그에 action 속성을 적던 시절은 지났습니다. SPA 환경에서는 비동기로 데이터를 쏘는데, 텍스트야 JSON으로 보내면 그만이지만 파일(File)은 그게 안 되죠.그래서 FormData를 써야 합니다. 복잡하게 생각할 것 없이, 그냥 브라우저가 제공하는 폼 데이터 전송 객체라고 이해하면 됩니다. 실무에서 자주 쓰는 패턴만 정리해 둘 테니 참고하시면 좋을 것 같습니다.1️⃣ FormData란?쉽게 말해 폼 데이터를 Key-Value 형태로 저장해서 전송할 수..