joamashi

[자바스크립트] JSDoc 가이드

좋아요! 아래는 JSDoc의 기본 가이드와 다양한 예시를 함께 정리한 내용입니다.JSDoc은 JavaScript 코드에 타입과 설명을 추가하여 문서화 및 코드 자동 완성을 도와주는 주석 기반 도구입니다. TypeScript를 쓰지 않아도 정적 분석과 IDE 지원을 받을 수 있습니다.🧾 JSDoc 기본 문법JSDoc은 /** ... */ 블록 주석 안에 @태그 형식으로 작성합니다./** * 설명 부분 * @tag 설명 */📌 주요 JSDoc 태그와 예시1. @param: 함수의 매개변수 설명/** * 두 수를 더합니다. * @param {number} a - 첫 번째 숫자 * @param {number} b - 두 번째 숫자 * @returns {number} 합계 */function add(a, b)..

🎯 시나리오 1: 부드러운 애니메이션 처리 (requestAnimationFrame)✅ 목적사용자의 스크롤이나 애니메이션 효과를 FPS(초당 프레임 수)에 맞춰 부드럽게 실행📎 예시:let x = 0;function animateBox() { x += 5; box.style.transform = `translateX(${x}px)`; if (x 🧠 해설requestAnimationFrame()은 브라우저의 다음 렌더링 직전에 콜백을 호출setTimeout(fn, 16)보다 더 정밀하고 CPU 자원 낭비가 적음애니메이션 프레임에 맞춰 최적화된 동작을 보장🎯 시나리오 2: 대용량 배열 처리 시 UI 멈춤 방지 (chunking with setTimeout)✅ 목적수만 개 요소를 반복 처리할 때,..

자바스크립트는 단일 스레드 기반의 비동기 처리 모델을 갖는 언어이며, 이 특성을 이해하기 위해선 Event Loop, Task Queue, Microtask Queue, Agent 등의 개념을 명확히 알아야 합니다.📌 1. Event Loop란 무엇인가?자바스크립트는 싱글 스레드(Single Thread) 언어로, 하나의 실행 컨텍스트만을 동시에 처리할 수 있습니다. 하지만 비동기 처리를 위해 이벤트 루프(Event Loop) 라는 메커니즘을 활용합니다.Event Loop는 호출 스택(Call Stack)과 태스크 큐(Task Queue)를 모니터링하며, 호출 스택이 비어 있을 때 태스크 큐에서 대기 중인 콜백을 스택으로 이동시켜 실행합니다.📎 예시:console.log("A");setTimeout(..

✅ 1. this란 무엇인가?this는 현재 실행 중인 코드가 속한 문맥(Context) 을 가리킵니다. 즉, 누가 이 코드를 호출했는지에 따라 그 참조 대상이 달라지게 됩니다.📌 핵심 키워드: 실행 문맥, 호출 주체, 동적 바인딩console.log(this); // 브라우저에서는 window 객체 출력this는 선언 시점이 아닌 실행 시점에 결정됩니다.정적 스코프(Scope)와 달리 this는 동적(Dynamic) 으로 바인딩됨✅ 2. 스코프(Scope) vs this의 차이구분 설명스코프(Scope)변수나 함수가 접근 가능한 코드의 유효 범위this실행 중인 문맥(컨텍스트)의 객체 참조📌 스코프 예시function outer() { let x = 10; function inner() { ..

SOLID 원칙: 객체지향 프로그래밍(OOP) 설계 원칙SOLID 원칙은 유지보수성과 확장성을 높이기 위한 객체지향 설계 원칙이다. 자바스크립트 코드 예제를 통해 이해해보자.1. 단일 책임 원칙 (Single Responsibility Principle, SRP)한 클래스(또는 모듈)는 하나의 책임만 가져야 한다.즉, 한 가지 기능만 담당해야 하며, 변경이 필요한 이유가 하나여야 한다.❌ 잘못된 예제class Report { generate() { console.log("보고서 생성"); } saveToFile() { console.log("파일로 저장"); }}➡️ Report 클래스는 보고서 생성과 파일 저장 두 가지 책임을 가진다.➡️ 파일 저장 방식이 변경되면 Report 클래스..

프록시 패턴(Proxy Pattern)이란?프록시 패턴은 다른 객체에 대한 접근을 제어하는 대리 객체(Proxy)를 사용하는 디자인 패턴입니다.쉽게 말해, 어떤 객체에 직접 접근하는 것이 아니라, **중간에서 대신 처리해주는 객체(프록시)**를 두는 방식입니다.왜 프록시 패턴을 사용할까?보안(Security) → 민감한 데이터에 대한 직접 접근을 막고, 프록시를 통해 제한을 걸 수 있음.로깅(Logging) → 객체의 메서드 호출이나 속성 접근을 추적하고 기록할 수 있음.성능 향상(Caching) → 한 번 가져온 데이터를 캐시에 저장해서 같은 요청이 들어오면 빠르게 응답할 수 있음.객체 생성 비용 절감(Lazy Initialization) → 무거운 객체를 미리 만들지 않고, 필요할 때 생성할 수 있음..

옵저버 패턴(Observer Pattern)은 객체의 상태 변화를 감지하여 자동으로 알림을 보내는 디자인 패턴이다. 주로 이벤트 리스너와 비슷한 역할을 하며, 자바스크립트에서는 EventEmitter를 활용하거나, 직접 구현하는 방식으로 많이 사용된다.1. 기본 옵저버 패턴 구현class Subject { constructor() { this.observers = []; } subscribe(observer) { this.observers.push(observer); } unsubscribe(observer) { this.observers = this.observers.filter(obs => obs !== observer); } ..

빌더 패턴이란?빌더 패턴(Builder Pattern)은 복잡한 객체를 단계적으로 생성할 수 있도록 도와주는 디자인 패턴이다. 즉, 객체를 생성할 때 필요한 값을 하나씩 설정하며 유연하게 만들 수 있도록 도와준다.빌더 패턴을 왜 사용할까?복잡한 생성자를 피할 수 있다만약 객체를 만들 때 옵션이 많다면, 생성자가 너무 길어질 수 있음.빌더 패턴을 사용하면 필요한 값만 설정하고 객체를 만들 수 있음.코드를 더 읽기 쉽게 만들 수 있다메서드 체이닝(연속적인 메서드 호출)으로 객체를 설정할 수 있음.가독성이 좋아지고 유지보수가 쉬워짐.불변성(Immutable) 객체를 쉽게 만들 수 있다객체를 한 번 설정한 후 변경할 필요가 없는 경우 유용함.빌더 패턴을 쉽게 이해하는 예제예제 1: 햄버거 만들기햄버거를 만드는 ..

📌 팩토리 패턴이란?팩토리 패턴(Factory Pattern)은 객체를 생성하는 과정을 캡슐화하여, 특정 클래스를 직접 new 키워드로 생성하는 것이 아니라 함수를 통해 객체를 반환하는 패턴이다.즉, "공장에서 제품을 찍어내듯이" 객체를 만들어주는 패턴이라고 이해하면 쉽다.이를 통해 객체 생성 로직을 숨기고, 유지보수성을 높일 수 있다.🏭 팩토리 패턴을 쓰는 이유코드 재사용성 증가 → 객체 생성 로직을 한 곳에서 관리유지보수 용이 → 객체 생성 방식을 바꿔도 코드 전체를 수정할 필요 없음유형에 따라 객체 생성 가능 → 특정 조건에 맞는 객체를 쉽게 반환🎯 팩토리 패턴 예제❌ (팩토리 패턴을 쓰지 않은 경우)class Car { constructor(brand, model) { th..

싱글톤(Singleton) 패턴이란?싱글톤 패턴은 하나의 클래스에 단 하나의 객체만 생성되도록 보장하는 디자인 패턴입니다. 즉, 프로그램이 실행되는 동안 오직 하나의 인스턴스만 유지하며, 그 인스턴스를 어디서든 접근할 수 있도록 합니다.왜 사용할까?하나의 객체만 있어야 하는 경우설정 정보 관리 (Configuration Manager)데이터베이스 연결 (Database Connection)로깅 시스템 (Logger)윈도우 관리자 (Window Manager)불필요한 객체 생성을 막아 메모리 절약동일한 객체를 계속 생성하는 대신, 한 번만 생성하여 사용하면 성능 최적화에 도움이 됩니다.싱글톤 패턴 구현 (Python 예제)class Singleton: _instance = None # 클래스 변수로..

디자인 패턴은 소프트웨어 개발에서 자주 발생하는 문제를 해결하기 위해 정형화된 방식으로 제시되는 해결책입니다. 자바스크립트에서 디자인 패턴을 활용하면 코드의 재사용성을 높이고 유지보수를 쉽게 할 수 있습니다.다음은 대표적인 디자인 패턴을 자바스크립트 코드와 함께 설명합니다.1. 싱글톤 패턴 (Singleton Pattern)하나의 인스턴스만 생성되도록 제한하는 패턴으로, 전역 상태를 관리할 때 유용합니다.✅ 예제 코드class Singleton { constructor() { if (!Singleton.instance) { this.data = "싱글톤 인스턴스 데이터"; Singleton.instance = this; } return Singleton.instance..

JavaScript에서 에러 핸들링을 할 수 있는 다양한 방법이 있습니다.1. try...catch 기본 사용try { let result = someUndefinedFunction();} catch (error) { console.error("에러 발생:", error.message);}설명:존재하지 않는 함수를 호출하면 에러가 발생하며, catch 블록에서 이를 처리합니다.2. try...catch와 finallytry { let data = JSON.parse('{"name": "John"}'); console.log(data.name);} catch (error) { console.error("JSON 파싱 에러:", error.message);} finally { console.log..

Node.js는 비동기 이벤트 기반의 런타임 환경이지만, 다양한 자료구조 및 알고리즘을 구현할 수 있습니다.JavaScript와 함께 효율적인 데이터 처리 및 최적화된 연산을 수행하기 위해, 다양한 자료구조와 알고리즘을 익혀야 합니다.1. Node.js에서 사용 가능한 자료구조1) 배열(Array)배열은 가장 기본적인 자료구조로, JavaScript에서 Array 객체를 활용할 수 있습니다.let numbers = [4, 2, 7, 1, 9, 3];// 정렬 (오름차순)numbers.sort((a, b) => a - b);console.log(numbers); // [1, 2, 3, 4, 7, 9]// 탐색 (이진 탐색)function binarySearch(arr, target) { let left ..

📌 append() 말고 다른 방법으로 요소 추가하는 방법append() 외에도 jQuery에는 새로운 요소를 추가하는 다양한 메서드가 있습니다. 상황에 따라 적절한 방법을 선택하면 성능 최적화나 코드 가독성을 높일 수 있습니다.🔹 요소를 추가하는 주요 jQuery 메서드 비교메서드 추가 위치 기존 요소 유지 여부 설명append()내부 마지막유지부모 요소의 마지막 자식 요소로 추가prepend()내부 첫 번째유지부모 요소의 첫 번째 자식 요소로 추가after()외부 뒤유지선택한 요소 다음 형제로 추가before()외부 앞유지선택한 요소 이전 형제로 추가html()내부 변경삭제됨기존 요소를 모두 지우고 새로운 내용 추가replaceWith()외부 변경삭제됨선택한 요소를 완전히 대체clone()-유지요..

아래 예제는 Node.js 기반의 서버와 HTML + JavaScript 기반의 클라이언트를 이용해 간단한 실시간 채팅 기능을 구현한 것입니다.1. 서버 코드 (Node.js)아래 코드를 server.js 파일로 저장하세요.const express = require("express");const http = require("http");const { Server } = require("socket.io");const app = express();const server = http.createServer(app);const io = new Server(server);// 정적 파일 제공 (index.html)app.use(express.static("public"));// 클라이언트 연결 처리io.on("..

웹에서 부모창과 자식창 간에 데이터를 교환하는 방법에는 여러 가지가 있습니다. 주요 방법들을 정리하면 다음과 같습니다.1. window.opener 사용 (부모 → 자식)자식 창을 window.open()으로 열었을 경우, window.opener를 이용하여 부모창의 데이터를 자식창에서 접근할 수 있습니다.✅ 부모 창에서 자식 창 열기:let childWindow = window.open('child.html', 'ChildWindow', 'width=600,height=400');childWindow.someData = "Hello from Parent";✅ 자식 창에서 부모 창의 데이터 접근:if (window.opener) { console.log(window.opener.someData); ..

const response = fetch('https://jsonplaceholder.typicode.com/todos/1');// const data = response.json();console.log('0', response); const response2 = fetch('https://jsonplaceholder.typicode.com/todos/1');const data2 = response2;console.log('2', data2);fetch('https://jsonplaceholder.typicode.com/posts', { method: 'POST', body: JSON.stringify({ title: 'foo', body: 'bar', userId: 1, }..

자바스크립트의 reduce() 메서드는 배열의 모든 요소를 순회하며 값을 "누적(accumulate)"하여 단일 결과를 반환하는 고차 함수입니다. 기본적으로 배열을 줄여서 하나의 값으로 만든다는 개념으로 이해하면 됩니다. 이 값은 숫자, 배열, 객체 등 어떤 자료형이든 될 수 있습니다.기본 문법array.reduce(callback, initialValue)callback: 배열의 각 요소에 대해 실행할 함수.accumulator: 누적된 값.currentValue: 현재 처리 중인 배열 요소.currentIndex: (선택 사항) 현재 처리 중인 요소의 인덱스.array: (선택 사항) reduce가 호출된 배열 자체.initialValue: (선택 사항) 누적값(accumulator)의 초기값. 이 ..

큐(Queue)란 무엇인가?**큐(Queue)**는 선입선출(FIFO, First-In-First-Out) 방식으로 데이터를 처리하는 자료 구조입니다. 쉽게 말해, 먼저 들어온 데이터가 먼저 나가는 방식으로, 마치 줄을 서서 기다리는 것과 같습니다.선입(Enqueue): 큐의 뒷부분에 새로운 데이터를 추가하는 작업선출(Dequeue): 큐의 앞부분에서 데이터를 제거하는 작업자바스크립트에서 큐 구현하기자바스크립트에서는 배열을 이용하여 간단하게 큐를 구현할 수 있습니다. 배열의 push() 메서드를 사용하여 데이터를 큐의 뒷부분에 추가하고, shift() 메서드를 사용하여 데이터를 큐의 앞부분에서 제거합니다.class Queue { constructor() { this.items = []; } e..

자바스크립트 Math 객체는 다양한 수학적인 상수와 함수를 제공하여 수학 연산을 쉽게 수행할 수 있도록 돕습니다.주요 수학 연산 종류삼각 함수sin(x): x의 사인 값을 반환합니다.cos(x): x의 코사인 값을 반환합니다.tan(x): x의 탄젠트 값을 반환합니다.asin(x): 사인 값이 x인 각도(라디안)를 반환합니다.acos(x): 코사인 값이 x인 각도(라디안)를 반환합니다.atan(x): 탄젠트 값이 x인 각도(라디안)를 반환합니다.산술 연산abs(x): x의 절댓값을 반환합니다.ceil(x): x보다 크거나 같은 가장 작은 정수를 반환합니다. (올림)floor(x): x보다 작거나 같은 가장 큰 정수를 반환합니다. (내림)round(x): x를 가장 가까운 정수로 반올림합니다.max(x, ..