다중 iframe 사용 시 발생하는 메모리 누수 문제와 해결 방안
메모리 누수란 무엇인가?
애플리케이션이 실행되기 위해서는 시스템 메모리 자원이 필요합니다. 운영체제나 런타임 환경은 프로그램의 요청에 따라 메모리를 할당하게 되며, 특히 장시간 실행되는 백그라운드 프로세스의 경우 사용하지 않는 메모리를 적절히 해제하지 않으면 점점 리소스를 소모하게 됩니다. 이렇게 더 이상 사용되지 않아야 할 메모리가 해제되지 않고 계 ...
6월 21일 16:10에 게시됨
JavaScript에서의 다양한 유틸리티 함수 구현
배열 내포함 여부 확인
하나의 배열이 다른 배열을 완전히 포함하는지 확인하는 방법입니다.
const isSubset = (arr1, arr2) => arr2.every(item => arr1.includes(item));
이벤트 버스 활용
이벤트를 전송하고 수신하는 방법입니다.
// 이벤트 발송
this.$bus.$emit('data-change', { field: 'value', key: 'uniqueKey' });
// 이벤트 수신
this.$bus.$on('data-rec ...
6월 20일 21:09에 게시됨
브라우저의 동일 출처 정책 문제 해결 방법
현대 웹 애플리케이션에서 프론트엔드와 백엔드가 별도의 도메인으로 운영되는 경우, 클라이언트가 다른 도메인으로 요청을 보낼 때 브라우저는 기본적으로 보안상의 이유로 요청을 차단합니다. 이 현상을 '크로스 오리진 문제'라고 하며, 이를 해결하기 위해 CORS (Cross-Origin Resource Sharing) 표준이 도입되었습니다.
CORS는 브라우저와 서버 모두가 지원 ...
6월 19일 17:01에 게시됨
의존성 관리: peerDependencies, devDependencies 그리고 dependencies
devDependencies
개발 단계에서 필요한 패키지를 지정하는 섹션으로, 이는 배포 환경에서는 포함되지 않습니다.
dependencies
이 섹션은 실제 서비스 운영에 필요한 패키지를 나타냅니다. 이러한 의존성이 없으면 프로젝트의 안정적인 동작에 문제가 생길 수 있습니다.
peerDependencies
주로 라이브러리를 개발할 때 사용되며, 호스트 환경에서 이미 설치된 특정 버전의 ...
6월 19일 01:00에 게시됨
Vue-Admin 템플릿: 권한 기반 내비게이션 및 전체화면 기능 구현
이번 글에서는 이전에 작업한 Vue-admin 프로젝트에 Breadcrumb(이동 경로)와 Screenfull(전체화면) 기능을 추가하는 과정을 다룹니다.
Breadcrumb 컴포넌트 구현
Element-UI의 el-breadcrumb와 el-breadcrumb-item을 활용하여 현재 경로를 표시하는 내비게이션을 만듭니다. 기본적인 사용 예시는 다음과 같습니다.
<el-breadcrumb separator-class="el-icon-arrow-r ...
6월 18일 23:23에 게시됨
Vue.js 시작하기 - ES6 기초부터 프로젝트 설정까지
프론트엔드 기술 스택 이해하기
현대 웹 개발에서는 HTML이 구조(Structure), CSS가 표현(Style), JavaScript가 동작(Behavior)을 담당합니다. 기존의 jQuery 라이브러리는 JavaScript의 DOM 조작을 단순화했고, Bootstrap은 CSS 프레임워크로 클래스 기반의 스타일링을 제공했습니다. 현재主流 SPA 프레임워크로는 Facebook이 개발한 React, Google이 만든 Angular, 그리 ...
6월 18일 21:16에 게시됨
Typed.js를 활용한 웹사이트 동적 타이핑 효과 구현 가이드
기초부터 응용까지: Typed.js로 텍스트 애니메이션 구현하기
Typed.js는 웹 페이지에서 마치 사람이 치는 듯한 자연스러운 타이핑 효과를 구현할 수 있는 경량 자바스크립트 라이브러리입니다. 이 도구를 사용하면 단순한 텍스트를 생동감 있게 표현하고, 사용자 몰입도를 높일 수 있습니다.
주요 특징
작은 크기 – 최소한의 파일 용량으로 빠른 로딩을 보장합니다.
세밀 ...
6월 18일 01:36에 게시됨
레이UI 다중 테이블 이벤트 핸들링 시 ID 충돌 해결
한 페이지에 여러 테이블이 존재할 때, 레이어UI의 테이블 툴바 이벤트에서 ID 값이 정상적으로 추출되지 않는 문제가 발생할 수 있습니다. 다음은 대표적인 오류 사례입니다:
문제 재현 코드
<div hidden>
<script type="text/html" id="ToolTemplateA">
<a class="layui-btn" lay-event="modify">수정</a>
</script>
<scrip ...
6월 17일 22:05에 게시됨
브라우저에서 바이두 지도 통합 구현 방법
기본 통합 절차
바이두 지도 API를 HTML 페이지에 추가하는 기본 방식은 다음과 같습니다:
<script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=YOUR_API_KEY"></script>
<script>
const map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(116.404, 39.928), 15);
map.addEventListener('click', (ev ...
6월 17일 16:28에 게시됨
JavaScript 함수 디바운스와 쓰로틀링
함수 디바운스는 이벤트가 트리거된 후 n초 뒤에 콜백 함수를 실행하는 기법으로, 이 n초 내에 다시 트리거되면 타이머를 리셋합니다. 이는 다음과 같은 상황에서 성능 최적화를 위해 자주 사용됩니다:
폼 컴포넌트 입력 내용 검증
다중 클릭으로 인한 폼 중복 제출 방지
등의 경우에 함수가 너무 빈번하게 불필요하게 호출되는 것을 방지합니다.
기본 개념
setTimeout을 ...
6월 17일 05:47에 게시됨