괴물 클럽

이번 글에서는 이전에 작업한 Vue-admin 프로젝트에 Breadcrumb(이동 경로)와 Screenfull(전체화면) 기능을 추가하는 과정을 다룹니다. Breadcrumb 컴포넌트 구현 Element-UI의 el-breadcrumb와 el-breadcrumb-item을 활용하여 현재 경로를 표시하는 내비게이션을 만듭니다. 기본적인 사용 예시는 다음과 같습니다. <el-breadcrumb separator-class="el-icon-arrow-r ...

프론트엔드 기술 스택 이해하기 현대 웹 개발에서는 HTML이 구조(Structure), CSS가 표현(Style), JavaScript가 동작(Behavior)을 담당합니다. 기존의 jQuery 라이브러리는 JavaScript의 DOM 조작을 단순화했고, Bootstrap은 CSS 프레임워크로 클래스 기반의 스타일링을 제공했습니다. 현재主流 SPA 프레임워크로는 Facebook이 개발한 React, Google이 만든 Angular, 그리 ...

기초부터 응용까지: Typed.js로 텍스트 애니메이션 구현하기 Typed.js는 웹 페이지에서 마치 사람이 치는 듯한 자연스러운 타이핑 효과를 구현할 수 있는 경량 자바스크립트 라이브러리입니다. 이 도구를 사용하면 단순한 텍스트를 생동감 있게 표현하고, 사용자 몰입도를 높일 수 있습니다. 주요 특징 작은 크기 – 최소한의 파일 용량으로 빠른 로딩을 보장합니다. 세밀 ...

한 페이지에 여러 테이블이 존재할 때, 레이어UI의 테이블 툴바 이벤트에서 ID 값이 정상적으로 추출되지 않는 문제가 발생할 수 있습니다. 다음은 대표적인 오류 사례입니다: 문제 재현 코드 <div hidden> <script type="text/html" id="ToolTemplateA"> <a class="layui-btn" lay-event="modify">수정</a> </script> <scrip ...

기본 통합 절차 바이두 지도 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 ...

함수 디바운스는 이벤트가 트리거된 후 n초 뒤에 콜백 함수를 실행하는 기법으로, 이 n초 내에 다시 트리거되면 타이머를 리셋합니다. 이는 다음과 같은 상황에서 성능 최적화를 위해 자주 사용됩니다: 폼 컴포넌트 입력 내용 검증 다중 클릭으로 인한 폼 중복 제출 방지 등의 경우에 함수가 너무 빈번하게 불필요하게 호출되는 것을 방지합니다. 기본 개념 setTimeout을 ...

객체 기초 이해 객체 생성 방식 const newObject = new Object() 속성 정의 방법 const vehicle = new Object() vehicle.brand = 'Yamaha' vehicle.model = 'V-Star Silverado 1100' vehicle.year = 2005 vehicle.purchaseDate = new Date(2005, 3, 12) 객체 속성은 초기화 단계에서 명시적으로 선언할 필요가 없으며, 할당 시 자동으로 생성된다. 객체는 속성 집합으로 ...

네트워크 요청 (AJAX) JSON 데이터 가져오기 jQuery의 $.getJSON 기능을 순수 자바스크립트로 구현하는 방법입니다. // jQuery $.getJSON('/api/data', function(response) { console.log(response); }); // Vanilla JS (IE10+) const xhr = new XMLHttpRequest(); xhr.open('GET', '/api/data', true); xhr.onreadystatechange = function() { if (this.readyState ...

Object.assign 메서드의 핵심 역할 ECMAScript 2015(ES6) 스펙에 포함된 Object.assign() 은 하나 이상의 소스(source) 객체에서 정의된 특정한 속성을 타겟(target) 객체로 복사하여 반환하는 유틸리티 함수입니다. 주로 초기 설정값과 사용자 커스터마이징 값을 통합할 때 빈번히 활용되며, 기존 객체를 변조하지 않고 새로운 상태를 생성하는 불변성 패턴 구현에도 기 ...

Koa 서버에서 GraphQL을 활용하려면 다음 단계별로 진행하면 된다. 1. 필수 패키지 설치 먼저 필요한 패키지들을 설치한다. graphql 라이브러리와 Koa 미들웨어가 필요하다. npm install graphql koa-graphql koa-mount --save 2. 프로젝트 구조 전체 구조는 다음과 같이 구성한다: ├── app.js # 메인 서버 파일 ├── schema/ │ └── query.js # Graph ...