JavaScript226 [JavaScript] 콜백 함수로 비동기 작업을 처리하는 방법 콜백을 왜 사용할까요?비동기 작업을 순차적으로 처리하기 위해서 입니다. 비동기 처리에서 작업이 완료되기를 기다리지 않고 다른 작업이 실행 될 수 있기 때문에 작업순서를 보장하고 후속작업을 실행하려면 콜백 함수가 필요합니다. 비동기 작업에서 순차적 흐름을 만들기 위해:비동기 작업은 시간이 걸리는 작업입니다. 예를 들어, 네트워크 요청, 파일 읽기/쓰기, 애니메이션 등 여러 작업이 있을 수 있습니다.콜백 함수는 한 작업이 끝나면 다음 작업을 처리하도록 보장합니다.콜백을 사용하지 않으면, 비동기 작업이 끝나기 전에 다음 작업이 실행될 수 있기 때문에, 작업 순서가 뒤죽박죽이 될 수 있습니다.시간이 걸리는 작업을 기다리게 만들기 위해:예를 들어, 타이머나 네트워크 요청과 같은 비동기 작업에서 결과가 반환되기까지.. 2025. 3. 17. [JavaScript] Debounce와 Throttle: 차이점과 활용 방법 Debounce와 Throttle: 차이점과 활용 방법프로그래밍을 하다 보면 이벤트가 너무 자주 실행되어 성능 저하가 발생하는 경우가 많습니다. 대표적인 예로 스크롤 이벤트, 입력 필드 변화 감지, 창 크기 조절 등이 있습니다. 이런 문제를 해결하는 대표적인 기법이 **Debounce(디바운스)**와 **Throttle(스로틀)**입니다.이번 글에서는 두 개념의 차이점을 이해하고, 언제 어떤 방식을 사용해야 하는지 실제 코드와 함께 알아보겠습니다. 1. Debounce(디바운스)란?Debounce는 특정 이벤트가 연속적으로 발생할 때, 마지막 이벤트 이후 일정 시간이 지난 후에만 실행되는 기법입니다. 즉, 사용자가 계속해서 입력하거나 행동하는 동안에는 실행되지 않고, 일정 시간이 지나서야 함수가 실행됩니.. 2025. 3. 10. [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. 이전 1 2 3 4 ··· 26 다음