Meteor 3.x 환경에서의 meteor-collection-hooks 비동기 훅 활용 및 호환성 가이드
현대 Meteor 애플리케이션은 데이터 계층에 대한 커스텀 로직 확장이 필수적이다. meteor-collection-hooks 패키지는 Mongo.Collection 의 표준 메서드를 가로채는 데 가장 널리 사용되는 도구이며, Meteor 3.x 로의 전환과 함께 네이티브 비동기 처리 지원이 핵심 요구사항으로 부상했다. 본 가이드는 최신 프레임워크 구조에서 비동기 훅을 효과적으로 통합하고 호환성 ...
9월 20일 00:11에 게시됨
순수 JavaScript를 사용한 멀티 이미지 무한 스크롤 및 상하 스크롤 효과 구현
많은 웹사이트에서 멀티 이미지 무한 스크롤 효과를 볼 수 있습니다. 이번에는 순수 JavaScript를 사용하여 여러 이미지를 무한으로 스크롤하는 방법과 마우스 오버 시 멈춤 기능을 구현해 보겠습니다.
1. 효과 미리보기:
2. 코드 구현:
<!DOCTYPE html>
<html>
<head>
<title>무한 스크롤</title>
<style>
* { marg ...
9월 17일 03:33에 게시됨
JavaScript 객체 생성 패턴: 팩토리 함수부터 프로토타입까지
1. 팩토리 함수 방식
객체를 일관성 있게 생성하기 위해 팩토리 함수를 사용할 수 있다. 이 방식은 내부적으로 객체를 생성하고 속성을 부여한 뒤 반환한다.
function createUser(username, userAge) {
let obj = new Object();
obj.username = username;
obj.userAge = userAge;
obj.introduce = function() {
console.log(`안녕, 나는 ${obj.use ...
9월 17일 00:03에 게시됨
깜찍한 Cnblogs 스킨 커스터마이징 및 반응형 테마 적용 가이드
이 글에서는 중국의 블로그 플랫폼 Cnblogs에서 SimpleMemory 스킨을 기반으로 귀엽고 감성적인 비주얼을 완성하는 방법을 소개합니다. 반응형을 지원하며 내비게이션 동작, Live2D 캐릭터, 음악 플레이어, 댓글 이모티콘 등 다양한 위젯을 하나의 테마로 통합할 수 있습니다.
주요 기능
마우스 움직임에 반응하는 내비게이션 도트 애니메이션
사용자 지 ...
9월 15일 22:22에 게시됨
Sciter JavaScript 실행 20초 타임아웃 문제 해결 방법
Sciter는 내장형 데스크톱 UI 엔진으로, 경량화와 높은 성능을 필요로 하는 애플리케이션 개발에 적합합니다. 하지만 JavaScript 실행에 대해 20초의 하드코딩된 타임아웃이 존재하며, 이를 초과하면 실행이 강제로 중단됩니다. 설정을 통해 변경할 수 없는 구조적 제약입니다.
문제 발생 상황
프론트엔드 JavaScript에 무거운 연산 로직을 작성하고, 해당 함수를 C++ ...
9월 15일 16:31에 게시됨
Odoo 클라이언트 사이드 프레임워크 및 JavaScript 활용 가이드
1. 핵심 라이브러리 및 환경 구성
Odoo(과거 OpenERP)의 웹 클라이언트는 강력한 자바스크립트 프레임워크를 기반으로 구축되었습니다. 주요 라이브러리는 다음과 같습니다.
jQuery: DOM 조작 및 이벤트 처리를 위해 1.8.3 버전을 기본으로 사용합니다.
Underscore.js: 데이터 컬렉션 처리 및 유틸리티 함수를 제공합니다.
QWeb: XML 기반의 클라이언트 사이 ...
9월 14일 18:16에 게시됨
이미지 슬라이드쇼에 타이머 추가하기
이전에 이미지 전환 기능을 구현한 적이 있었는데, 이번에는 자동 재생을 위해 타이머를 추가해보았습니다. 코드를 살펴보겠습니다.
CSS 코드:
<style>
ul { padding:0; margin:0; }
li { list-style:none; }
.container { width:400px; height:500px; position:relative;
float: left;margin-right:60px; background:url(img/loader_ico.gif) n ...
9월 14일 00:48에 게시됨
HTML 폼 내 이미지 업로드 및 실시간 미리보기 구현 방법
웹 애플리케이션 개발 시 HTML 폼(Form) 내부에서 이미지 파일을 선택하고, 이를 서버에 전송하기 전 사용자에게 미리보기를 제공해야 할 경우가 많습니다. 기본적으로 HTML 표준에서는 폼 내부에 또 다른 폼을 중첩하는 것을 허용하지 않으므로, 하나의 폼 안에서 파일 선택과 데이터 입력을 동시에 처리하는 효율적인 구조가 필요합니다.
이미지 업로드와 미리보기 ...
9월 5일 16:11에 게시됨
Vue 2와 Webpack 4를 사용한 SSR 프로젝트 구성
사전 준비 사항
Node.js가 설치되어 있고 환경 변수 설정이 완료되어야 합니다. Node 10 버전을 권장합니다. https://nodejs.org/en/download/
참고 자료: 이전 게시물 참조
Debian에 Node.js 설치
Yarn 및 npm 레지스트리 설정
시작하기
프로젝트 초기화
먼저 webapp이라는 디렉토리를 생성하고 yarn 명령어를 사용하여 초기화합니다.
yarn init
전체 명령어 실행 예시
...
9월 5일 11:43에 게시됨
JavaScript BOM과 DOM 노드 조작 및 브라우저 실행 매커니즘
자바스크립트 Date 객체 활용
Date 객체는 날짜와 시간을 관리하는 내장 객체로, 현재 시스템 시간을 가져오거나 특정 시점을 설정할 때 사용합니다.
객체 생성 및 인스턴스화
Date 객체는 new 키워드를 사용하여 인스턴스를 생성해야 합니다.
// 현재 시간 정보 생성
const today = new Date();
// 특정 날짜 지정 생성
const targetDay = new Date('2025-05-01 12:00:0 ...
9월 4일 22:03에 게시됨