JavaScript224 [JavaScript] 싱글톤 패턴 사용하기 싱글톤(Singleton) 패턴 이란?싱글톤 패턴은 하나의 클래스에 대해 단 하나의 인스턴스만 존재하도록 보장하는 디자인 패턴.즉, 객체가 여러 개 생성되지 않도록 막고, 어디서든 같은 객체를 공유 하는 것. 싱글톤을 사용하는 이유?1. 객체를 하나만 유지해야 하는 경우어떤 객체는 하나만 존재해야 의미가 있는 경우.예:게임 루프 (GameLoop): 게임이 한 번만 실행되어야 함.설정 관리 (SettingsManager): 모든 곳에서 같은 설정을 유지해야 함.데이터베이스 연결 (DatabaseConnection): 하나의 연결을 공유해야 함.로그 시스템 (Logger): 여러 개의 로거를 만들면 로그가 분산될 수 있음.싱글톤을 사용하면 이런 객체를 중복 생성하지 않고 하나의 인스턴스만 사용 가능. 게임.. 2025. 2. 17. [JavaScript] 로컬 이미지 업로드 및 이미지 확대하여 모달창에 띄우기 안녕하세요 오늘은 HTML, CSS, JavaScript 를 활용해 로컬에서 이미지를 불러온 후 이미지를 클릭하면 모달 창에 확대된 이미지를 띄워주는 간단한 웹 애플리케이션을 만들어보겠습니다. gallery.html 이미지 갤러리 이미지 업로드 × 1. 이미지 업로드로컬에서 이미지 파일을 선택하고 갤러리에 추가합니다. 이미지 업로드 2. 이미지를 확대하는 모달 창 × 시연영상입니다 감사합니다. 2025. 2. 12. [JavaScript] 다중 Progress Bar와 전체 진행률 구현하기 (2) - 일시중지 및 삭제버튼 추가 안녕하세요 오늘은 지난 시간에 이어서 다중 Progrees Bar 에 일시정지 버튼, 그리고 삭제 버튼을 추가해보도록 하겠습니다. 지난 포스팅은 아래 링크에서 확인하실 수 있습니다 [JavaScript] 사용자 입력 기반 다중 Progress Bar와 전체 진행률 구현하기안녕하세요 오늘은 자바스크립트와 html 을 이용해 Progress Bar를 만들어보도록 하겠습니다. 프로그레스바는 사용자가 진행 상황을 시각적으로 쉽게 파악할 수 있도록 도와주는 UI 요소로, 다stickode.tistory.com 진행률 표시줄 시작 전체 진행률: 위 코드의 흐름은 다음과 같습니다. 시간 입력 및 시작- 각 항목의 입력란에 원하는 시간을 초 단위로 입력합.. 2025. 2. 5. [JavaScript]TensorFlow.js로 고양이 이미지 판별 앱 만들기 안녕하세요!오늘은 TensorFlow.js를 사용하여 이미지를 입력받고, 해당 이미지에 고양이가 있는지 판단하는 간단한 웹 애플리케이션을 만들어보겠습니다.이 글에서는 사전학습된 MobileNet 모델을 사용하겠습니다. Index.html사용자 인터페이스를 만들기 위해 index.html 파일을 작성합니다.이 파일은 사용자가 이미지를 업로드하고 결과를 확인할 수 있는 화면을 제공합니다.TensorFlow.js와 MobileNet 라이브러리를 CDN 링크를 통해 가져옵니다. 고양이 이미지 판별 이미지를 업로드하면 해당 이미지에 고양이가 있는지 판단합니다. 결과가 여기에 표시됩니다. script.js이제 TensorFlow.js를 활용하여 이미지를 분석하는 sc.. 2025. 2. 4. [JavaScript] 사용자 입력 기반 다중 Progress Bar와 전체 진행률 구현하기 안녕하세요 오늘은 자바스크립트와 html 을 이용해 Progress Bar를 만들어보도록 하겠습니다. 프로그레스바는 사용자가 진행 상황을 시각적으로 쉽게 파악할 수 있도록 도와주는 UI 요소로, 다음과 같은 경우에 자주 사용됩니다:파일 업로드/다운로드: 대용량 파일 전송 시, 작업 진행 상황을 보여줍니다.로딩 화면: 데이터나 리소스 로드 시 사용자가 대기 상태를 이해할 수 있도록 제공합니다.폼 진행: 멀티 스텝 폼이나 설문지의 현재 진행 상황을 표시합니다.게임 및 학습 앱: 게임 레벨 진행이나 학습 목표 달성도를 표현하는 데 유용합니다. progressBar.html Progress Bars Start Overall Progress: 위 코드는 사용자.. 2025. 1. 22. [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. 이전 1 2 3 4 ··· 25 다음