JavaScript228 [JavaScript] 커스텀 Promise로 비동기 동작 이해하기 안녕하세요.오늘은 비동기 작업이 무엇인지 이해하고, 커스텀 Promise를 구현해보겠습니다. 1. 비동기란 무엇인가?동기(Synchronous)와 비동기(Asynchronous)의 차이동기:작업이 순차적으로 실행됩니다. 하나의 작업이 끝날 때까지 다음 작업은 대기합니다.모든 작업이 완료될 때까지 프로그램의 실행이 멈춰 있을 수 있습니다.비동기:작업이 병렬적으로 실행됩니다. 하나의 작업이 진행되는 동안 다른 작업도 실행됩니다.시간이 오래 걸리는 작업(예: 서버 요청, 파일 읽기)이 프로그램을 멈추지 않게 처리합니다.비동기의 필요성비동기는 다음과 같은 상황에서 유용합니다:사용자 경험 개선: 시간이 오래 걸리는 작업(서버 요청, 이미지 로드 등)이 진행되는 동안 사용자와의 상호작용(UI 클릭 등)을 유지할 수.. 2024. 12. 4. [JavaScript] 클로저(Closure)를 활용한 상태 유지 안녕하세요.오늘은 JavaScript의 중요한 개념 중 하나인 클로저(Closure)를 활용하여 상태를 안전하게 관리하는 방법과 이를 활용해 간단한 카운터를 만드는 예제를 함께 진행해 보겠습니다.클로저란?클로저의 정의클로저는 함수와 그 함수가 선언될 당시의 렉시컬 스코프(Lexical Scope)의 조합입니다. 즉, 함수가 선언된 환경(스코프)을 기억하고, 이 환경에 접근할 수 있는 능력을 뜻합니다.클로저를 사용하는 이유클로저는 다음과 같은 상황에서 유용합니다:상태 유지: 함수가 실행된 후에도 변수 상태를 유지할 수 있습니다.데이터 보호: 외부에서 접근할 수 없는 변수를 보호합니다.재사용성: 함수를 독립적인 단위로 만들어 재사용할 수 있습니다. 1. 클로저 없이 상태 관리하기먼저, 클로저를 사용하지 않고.. 2024. 11. 28. [JavaScript] 이벤트 위임(Event Delegation)으로 동적 리스트 관리하기 안녕하세요.오늘은 이벤트 위임을 활용한 동적 리스트 관리를 단계적으로 구현해 보겠습니다. 1. 이벤트 위임과 동적 리스트 관리란?이벤트 위임이란?이벤트 위임은 부모 요소가 자식 요소의 이벤트를 대신 처리하는 방법입니다. 이 방식은 DOM 요소가 동적으로 추가되거나 삭제되는 경우에 특히 유용합니다. 예를 들어, 리스트에 새로운 아이템을 추가하거나 삭제할 때 이벤트 위임을 활용하면 코드가 훨씬 간결해지고 효율적이 됩니다.왜 필요한가?효율성: 동적으로 생성된 요소에도 추가 작업 없이 이벤트를 적용할 수 있습니다.유지보수성: 이벤트 리스너를 여러 요소에 개별적으로 추가하지 않아도 됩니다.2. 준비물: HTML 구조먼저 기본적인 HTML 구조를 작성해 봅시다. 이 구조는 동적 리스트를 만들고 관리하기 위한 뼈대 .. 2024. 11. 22. [JavaScript] OpenStreetMap 지도 위에 반경 표현하기 안녕하세요, 오늘은 OpenStreetMap 지도 위에 특정 위경도 기준으로 반경을 표현해보도록 하겠습니다. 아래 코드는 강남역 기준 반경 500m 를 원으로 표현한 예제입니다. DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>지도 위 반경 표현title> link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> style> #map { height: 1000px; width: 100%; } .. 2024. 11. 19. [JavaScript] 동영상 재생하기 안녕하세요.안녕하세요! 오늘은 JavaScript를 사용자가 자신의 컴퓨터에서 동영상 파일을 선택하고, 웹 브라우저에서 직접 미리보기로 재생할 수 있는 기능을 구현해 보겠습니다. 주요 기능을 정리하면 다음과 같습니다.사용자가 파일을 선택하면 동영상을 미리보기로 재생파일 크기 제한: 50MB 이하의 동영상만 업로드 가능파일 정보 표시: 파일 이름, 크기, 형식을 화면에 출력드래그 앤 드롭을 통한 파일 업로드 지원다중 파일 선택 기능으로 여러 동영상을 한 번에 미리보기1. HTML 코드 작성 : index.html먼저 기본적인 HTML 구조를 작성합니다. 동영상 미리보기 여기로 파일을 드래그하거나 클릭하여 동영상을 선택하세요. : 사용자가 동영상 .. 2024. 11. 16. [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>Leaflet OpenStreetMap 경로 출력 예제title> link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> style>.. 2024. 11. 13. [JavaScript] 웹에서 동작하는 계산기 앱 만들기 안녕하세요.오늘은 자바스크립트를 사용해 웹 기반 계산기 앱을 만들어보겠습니다.목표자바스크립트를 사용해 브라우저에서 동작하는 계산기를 구현합니다.실시간으로 수식을 입력하고 중간 계산 결과를 표시하는 기능을 추가합니다.키보드 입력 및 백스페이스 기능을 지원하여 사용자 경험을 개선합니다. 1. index.html 파일 생성먼저 html을 사용해 계산기 레이아웃을 구성합니다.display 는 계산 결과를 표시하며, 각 버튼에는 자바스크립트 함수를 연결합니다. C ⌫ ÷ × 7 8 .. 2024. 11. 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>Leaflet OpenStreetMap 경로 출력 예제title> link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist.. 2024. 11. 7. [JavaScript] 세션 스토리지 사용해 간단한 퀴즈 상태 저장하기 안녕하세요! 이번 글에서는 세션 스토리지를 사용하는 방법에 대해 알아보겠습니다.1. 세션 스토리지란?세션 스토리지는 웹 브라우저에 내장된 데이터 저장 공간 중 하나로, 브라우저 세션이 유지되는 동안에만 데이터를 저장할 수 있는 기능입니다. 세션 스토리지에 저장된 데이터는 탭이나 창을 닫으면 사라지기 때문에, 특정 세션 동안만 필요한 데이터를 저장하는 데 매우 유용합니다.주요 특징세션 유지: 세션 스토리지에 저장된 데이터는 브라우저 탭을 종료하면 삭제됩니다. 다른 창이나 탭에는 접근할 수 없습니다.도메인 격리: 세션 스토리지에 저장된 데이터는 현재 도메인과 현재 탭에 한정됩니다. 즉, 한 탭에서 저장한 데이터는 동일한 도메인에서도 다른 탭에서 접근할 수 없습니다.키-값 쌍(Key-Value Pair) 형식.. 2024. 11. 6. 이전 1 2 3 4 5 6 ··· 26 다음