기본 콘텐츠로 건너뛰기

5월, 2023의 게시물 표시

JavaScript 문자열 타입 정리: typeof vs instanceof, String 객체의 함정

JavaScript 문자열 타입 정리: typeof vs instanceof, String 객체의 함정 AI 생성 이미지: JavaScript 문자열 타입 정리: typeof vs instanceof, String 객체의 함정 안녕하세요 — 타입과 런타임 동작을 좋아하는 개발자입니다. 코드를 작성하다 보면 문득 이렇게 묻게 됩니다. "문자열인데 왜 instanceof String 이 false일까?" 특히 Java나 다른 정적 타입 언어 경험이 있으면 더 혼란스러울 수 있습니다. 이 글은 JavaScript 문자열 타입 정리: typeof vs instanceof, String 객체의 함정 을 바탕으로, 원시 문자열(primitive string) 과 String 래퍼 객체 의 차이, 그리고 typeof 와 instanceof 를 실제로 언제, 왜 사용해야 하는지를 예제와 함께 명확히 설명합니다. 1. 🔍 자바스크립트 instanceof 연산자는 무엇을 확인하는가? instanceof 는 값이 특정 생성자(또는 클래스)의 인스턴스인지 판별합니다. 핵심은 객체의 프로토타입 체인에 해당 생성자의 prototype이 포함되어 있는지 여부입니다. 동작 원리: 좌변 객체의 프로토타입 체인을 거슬러 올라가며 우변 생성자의 prototype과 일치하는지 검사합니다. 2. 🤯 문자열에서 instanceof String 이 false가 나오는 이유 ...

JavaScript로 HTML 태그 제거하기 – 정규식과 DOM 방식 완전 정리

JavaScript로 HTML 태그 제거하기 – 정규식과 DOM 방식 완전 정리 AI 생성 이미지: JavaScript로 HTML 태그 제거하기 – 정규식과 DOM 방식 완전 정리 크롤링 결과나 WYSIWYG 에디터에서 받은 HTML을 그대로 사용하지 않고, 텍스트만 깔끔하게 뽑아야 할 때가 많습니다. 이 글은 JavaScript로 HTML 태그 제거하기 – 정규식과 DOM 방식 완전 정리 관점에서 실무에 바로 적용 가능한 처리법을 정리합니다. 여기서는 정규식을 이용한 간단한 방법과 그 한계, 그리고 브라우저나 서버 환경에서 더 안전하게 처리하는 DOM/파서 기반 대안을 차례로 설명합니다. JavaScript로 HTML 태그 제거하기 – 정규식과 DOM 방식 완전 정리 내용을 통해 상황에 맞는 선택 기준을 제시합니다. 📚 목차 1. 정규 표현식으로 HTML 태그 삭제하기 2. 예제 코드 설명 3. 정규식 방식의 한계와 주의사항 4. HTML 파서/DOM을 사용한 더 안전한 방법 5. 정리 1. 정규 표현식으로 HTML 태그 삭제하기 가장 간단한 접근은 JavaScript의 replace() 와 정규식을 이용해 <태그> 형태를 찾아 모두 제거하는 것입니다. 속도가 빠르고 코드도 짧아 간단한 전처리에 유용합니다. ...

자바스크립트로 이미지 파일 크기(용량) 추정하기: Canvas.toDataURL 실전 예제

자바스크립트로 이미지 파일 크기(용량) 추정하기: Canvas.toDataURL 실전 예제 AI 생성 이미지: 자바스크립트로 이미지 파일 크기(용량) 추정하기: Canvas.toDataURL 실전 예제 브라우저의 <img> 요소에서 로드된 이미지의 정확한 전송 파일 크기를 반환하는 표준 API는 없습니다. 대신 JavaScript와 Canvas 를 이용하면 브라우저에 렌더된 픽셀 데이터를 바탕으로 대략적인 이미지 용량(파일 크기 추정치) 을 계산해 사용자에게 보여줄 수 있습니다. 이 가이드에서는 img onload 이벤트 와 Canvas.toDataURL() 을 활용해, 단계별로 이미지 용량을 추정하는 방법을 설명합니다. 핵심은 "자바스크립트로 이미지 파일 크기(용량) 추정하기: Canvas.toDataURL 실전 예제"라는 접근으로 실제 구현 예제까지 제공합니다. 중요: 이 방식은 서버에서 전달된 원본 파일의 바이트 수와는 다를 수 있습니다. 브라우저에서 생성된 데이터의 근사치임을 염두에 두세요. 1. 왜 JavaScript로 이미지 용량(파일 크기)을 체크해야 할까? 프론트엔드에서 이미지 무게를 바로 확인하면 여러 상황에서 즉각적인 가치를 제공합니다. 사용자가 게시물이나 에디터에 지나치게 큰 이미지를 업로드하려 할 때 사전 안내를 하기 위해 모바일 데이터 사용을 줄이기 위한 UX 결정을 내릴 때 이미지 최적화를 통해 페이지 로드 속도와 Core Web Vitals를 개선하려 할 때 갤러리...