본문 바로가기

JavaScript228

[JavaScript] Jest로 유닛 테스트 작성하기 1. 테스트란 ?테스트는 소프트웨어가 의도한 대로 동작하는지 확인하는 과정입니다.코드를 작성한 후, 예상하지 못한 오류가 발생하지 않도록 검증하는 것이 테스트의 핵심 역할입니다.소프트웨어 테스트는 목적과 범위에 따라 여러 가지로 나뉩니다테스트 종류정의목적특징예시유닛 테스트 (Unit Test)프로그램의 가장 작은 단위(함수, 메서드)를 독립적으로 테스트.특정 코드 블록이 올바르게 동작하는지 확인.- 다른 코드나 외부 시스템에 의존하지 않고 독립적으로 실행.- 빠르게 실행되며, 작성이 간단.두 숫자를 더하는 함수가 올바르게 결과를 반환하는지 확인.통합 테스트(Integration Test)프로그램의 가장 작은 단위(함수, 메서드)를 독립적으로 테스트.모듈 간 상호작용과 데이터 흐름을 검증.- 각 모듈이 개.. 2025. 1. 19.
[JavaScript] 지연 평가(Lazy Evaluation) 프로그래밍에서 지연 평가(Lazy Evaluation)는 계산을 미루는 기법으로, 데이터가 실제로 필요할 때 계산을 수행하는 방식을 의미합니다. 함수형 프로그래밍에서 자주 사용되는 이 개념은 메모리 사용을 최적화하고, 불필요한 계산을 줄이는 데 매우 유용합니다.이번 글에서는 자바스크립트에서 지연 평가를 구현하는 방법에 대해 알아보겠습니다.1. 지연 평가란?지연 평가는 값이 필요할 때까지 계산을 미루는 전략입니다.즉, 어떤 표현식이나 함수 호출의 결과를 바로 계산하지 않고, 실제로 사용될 때 계산을 수행합니다.동작 방식즉시 평가(Eager Evaluation): 표현식을 만나면 바로 계산합니다.지연 평가(Lazy Evaluation): 표현식을 만나도 계산을 미루고, 필요할 때 계산합니다.// 즉시 평가c.. 2025. 1. 16.
[JavaScript] 모나드(Monad) 함수형 프로그래밍에서 자주 언급되는 개념 중 하나가 바로 모나드(Monad)입니다.모나드는 수학적 개념에서 출발했지만, 프로그래밍에서는 주로 데이터를 안전하게 처리하고 함수들을 체이닝(Chaining)하기 위한 패턴으로 사용됩니다.많은 개발자들이 모나드를 처음 접할 때 "어렵다"는 느낌을 받곤 합니다. 하지만 모나드는 복잡한 개념이 아니라, 단순히 데이터를 다루는 컨테이너(Container)와 이를 조작하는 규칙이라고 이해하면 훨씬 쉽게 접근할 수 있습니다.이번 글에서는 모나드란 무엇인지, 왜 필요한지, 그리고 자바스크립트에서의 활용 방법에 대해 알아보겠습니다. 1. 모나드란?1.1 모나드의 정의모나드는 함수형 프로그래밍에서 데이터를 감싸는 컨테이너로, 다음과 같은 특징을 가집니다.데이터를 안전하게 감싸.. 2025. 1. 9.
[JavaScript] 순수 함수(Pure Function) 함수형 프로그래밍(Functional Programming, FP)은 자바스크립트에서 점점 더 주목받고 있는 프로그래밍 패러다임입니다.함수형 프로그래밍의 핵심 개념 중 하나는 바로 순수 함수(Pure Function)입니다. 순수 함수는 코드를 더 예측 가능하고 안정적으로 만들어주며, 디버깅과 테스트를 쉽게 할 수 있도록 돕습니다.이번 글에서는 순수 함수란 무엇인지, 순수 함수의 특징과 장점, 그리고 자바스크립트에서 순수 함수를 작성하는 방법에 대해 알아보겠습니다. 1. 순수 함수(Pure Function)란?순수 함수는 동일한 입력에 대해 항상 동일한 출력을 반환하며, 외부 상태를 변경하지 않는 함수를 말합니다.쉽게 말해, 함수의 동작이 외부 요인에 의해 영향을 받지 않고, 함수 내부의 로직에만 의존하.. 2025. 1. 3.
[JavaScript] 커링(Currying) 안녕하세요!함수형 프로그래밍(Function Programming)은 자바스크립트에서 점점 더 주목받고 있는 프로그래밍 패러다임입니다. 그중에서도 **커링(Currying)**은 함수형 프로그래밍의 핵심 개념 중 하나로, 함수의 재사용성 및 가독성을 높이는 데 중요한 역할을 합니다. 이번 글에서는 커링의 개념과 기본 원리를 상세히 설명하고, 이를 이해하기 위한 다양한 예제를 소개하겠습니다. 1. 커링(Currying)이란?1.1 커링의 정의커링(Currying)은 여러 개의 인수를 받는 함수를 하나의 인수만 받는 함수들의 연속으로 변환하는 기법입니다.즉, 하나의 함수가 여러 인수를 받는 대신, 첫 번째 인수를 받은 후 새로운 함수를 반환하고, 이 새로운 함수가 다음 인수를 처리하는 방식으로 동작합니다. .. 2024. 12. 28.
[JavaScript] 프로토타입으로 상속하기 안녕하세요!자바스크립트는 객체 지향 프로그래밍 언어로, **프로토타입 기반 상속(prototype-based inheritance)**을 지원합니다. 다른 객체 지향 언어에서 흔히 사용하는 클래스(class) 기반 상속과는 다르지만, 자바스크립트의 프로토타입 체인을 활용하면 유사한 상속 구조를 구현할 수 있습니다. 이번 글에서는 프로토타입의 개념과 프로토타입을 활용한 상속 구현 방법을 단계별로 알아보겠습니다. 1. 프로토타입이란?자바스크립트에서 모든 객체는 숨겨진 링크인 [[Prototype]]을 가지고 있습니다. 이 링크는 객체가 다른 객체로부터 속성과 메서드를 상속받을 수 있도록 연결해주는 역할을 합니다. 이 [[Prototype]]은 __proto__로 접근할 수 있으며, 함수 객체에는 protot.. 2024. 12. 25.
[JavaScript] 클래스와 객체 생성 안녕하세요.자바스크립트는 객체 지향 언어로, 다양한 방법으로 객체를 생성할 수 있습니다.이번 글에서는 ES6 클래스, 객체 리터럴, 생성자 함수를 사용하여 객체를 생성하는 방법을 알아보겠습니다. 1. ES6 클래스(Class)ES6에서 도입된 클래스는 객체 지향 프로그래밍을 보다 직관적으로 사용할 수 있게 해주는 문법입니다. 클래스는 생성자 함수와 프로토타입을 기반으로 동작하지만, 더 깔끔하고 명확한 문법을 제공합니다.// 클래스 정의class Car { constructor(brand, model) { this.brand = brand; // 브랜드 속성 초기화 this.model = model; // 모델 속성 초기화 } // 메서드 정의 drive() { console.log.. 2024. 12. 16.
[JavaScript] 구조 분해 할당(Destructuring Assignment)으로 API 응답 처리하기 안녕하세요.오늘은 구조 분해 할당에 대해 이야기해보겠습니다. 프론트엔드 개발에서 API를 호출하여 데이터를 받아오는 작업은 매우 흔합니다. 이때 응답 데이터는 보통 객체나 배열 형태로 제공되는데, 이를 처리할 때 자바스크립트의 구조 분해 할당(Destructuring Assignment) 을 사용하면 코드를 더욱 간결하고 읽기 쉽게 작성할 수 있습니다. 이 글에서는 구조 분해 할당이 무엇인지와 API 응답 데이터를 구조 분해 할당으로 처리하는 방법을 단계별로 알아보겠습니다.1. 구조 분해 할당(Destructuring Assignment)이란?1.1 정의구조 분해 할당은 자바스크립트 ES6에서 도입된 문법으로, 배열(Array)이나 객체(Object)의 값을 분해하여 변수에 간단히 할당할 수 있게 해줍니.. 2024. 12. 10.
[JavaScript] OpenStreetMap지도에서 두 지점의 경로 출력 안녕하세요, 오늘은 OpenStreetMap 지도에서 두 지점의 경로를 출력해보도록 하겠습니다. DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>OSM Route without API Keytitle>    link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />    style>        #map {            height: 100vh;            width: 100%;        }    s.. 2024. 12. 8.