funfunweb

콜백, 프로미스, async/await 동기 실행 (Synchronous Execution)**과 **비동기 실행 (Asynchronous Execution)**은 프로그램이 작업을 처리하는 방식에 대한 개념으로, 작업이 어떻게 순차적으로 또는 병렬적으로 실행되는지에 대한 차이를 설명합니다. 이 둘은 특히 자바스크립트와 같은 비동기적 특성을 가진 언어에서 중요한 개념입니다.1. 동기 실행 (Synchronous Execution)동기 실행이란 작업들이 순차적으로 실행되는 방식입니다. 즉, 하나의 작업이 완료된 후에야 다음 작업이 실행됩니다. 이때, 각 작업은 차례대로 처리되며, 현재 작업이 끝나지 않으면 다음 작업은 시작되지 않습니다.동기 실행의 특징:순차적: 작업들이 하나씩 처리됩니다.블로킹 (Bloc..

location 객체는 현재 브라우저의 URL에 대한 정보를 제공하며, 브라우저의 주소를 읽고 수정하는 데 사용됩니다. 이 객체는 window 객체의 일부로, 현재 문서의 URL을 다루는 여러 프로퍼티와 메서드를 포함하고 있습니다.주요 프로퍼티href: 전체 URL을 반환하거나 설정합니다.예: location.href는 현재 문서의 URL을 반환합니다.protocol: URL의 프로토콜 부분을 반환합니다. (예: http:, https:)예: location.protocol은 현재 페이지의 프로토콜을 반환합니다.host: 호스트 이름과 포트 번호를 반환합니다. (예: www.example.com:80)예: location.hosthostname: 호스트 이름만 반환합니다. (예: www.example.c..

setInterval(), clearInterval(), setTimeout(), clearTimeout()는 자바스크립트에서 시간을 제어하고, 반복적인 작업을 수행하는 데 유용한 메서드입니다. 1. setTimeout()기능: 특정 시간(밀리초)이 지난 후에 함수를 한 번 실행합니다.구문: const timeoutId = setTimeout(function, delay);function: 지연 후에 실행할 함수.delay: 지연 시간(밀리초).2. clearTimeout()기능: setTimeout()으로 설정한 타이머를 취소합니다.구문clearTimeout(timeoutId); timeoutId: setTimeout()이 반환한 ID.3. setInterval()기능: 특정 시간(밀리초) 간격으로 함..

window.open() 메서드는 새 브라우저 창이나 탭을 열 때 다양한 옵션을 설정할 수 있습니다. 이 옵션들은 새로 열리는 창이나 탭의 크기, 위치, 모양, 툴바 등의 속성을 지정합니다. 옵션은 specs 매개변수로 문자열 형태로 전달됩니다.window.open('문서주소','윈도우이름','옵션=값,옵션=값,...');주요 옵션width: 새 창의 너비(픽셀 단위).예: width=800height: 새 창의 높이(픽셀 단위).예: height=600left: 새 창의 화면 왼쪽에서부터의 거리(픽셀 단위).예: left=100top: 새 창의 화면 위쪽에서부터의 거리(픽셀 단위).예: top=100resizable: 새 창의 크기를 조절할 수 있는지 여부. yes 또는 no로 설정.예: resizab..

버블링(Bubbling)은 자바스크립트 이벤트 전파의 한 방식으로, 이벤트가 발생한 요소에서 시작하여 그 요소의 부모 요소들로 차례로 전파되는 과정을 의미합니다. 기본적으로 자식 요소에서 발생한 이벤트가 부모 요소로 전파되는 방식입니다.버블링의 동작 원리이벤트 발생: 특정 요소에서 이벤트가 발생합니다. (예: 버튼 클릭)버블링 시작: 이벤트는 가장 깊은 요소(이벤트가 발생한 요소)에서 시작하여 그 요소의 부모로 전파됩니다.부모 요소로 전파: 각 부모 요소에서 해당 이벤트를 처리할 수 있는 기회를 가지며, 최상위 요소인 document까지 전파됩니다.예제다음은 버블링을 설명하기 위한 간단한 예제입니다: 조부모 부모 자식 버튼 설명HTML 구조..

이벤트 처리 제어 메서드 preventDefault()기능: 이벤트의 기본 동작을 방지합니다. 예를 들어, 링크를 클릭했을 때 페이지 이동을 막거나, 폼 제출을 방지하는 데 사용됩니다.사용 예: 주로 태그나 태그와 같은 요소의 기본 동작을 막을 때 사용합니다.이벤트 전파: preventDefault()는 이벤트가 상위 요소로 전파되는 것에는 영향을 주지 않습니다. 이벤트는 계속해서 부모 요소로 버블링됩니다.stopPropagation()기능: 이벤트가 상위 요소로 전파되는 것을 막습니다. 즉, 이벤트가 부모 요소에 전달되지 않도록 차단합니다.장점: 특정 이벤트만 처리하고 싶을 때, 다른 이벤트 리스너가 실행되지 않도록 제어할 수 있습니다.return false기능: 이벤트의 기본 동작을 방지하는 것과..

자바스크립트에서 이벤트 객체는 이벤트가 발생할 때 생성되는 객체로, 다양한 프로퍼티를 포함하고 있습니다. 주요 프로퍼티type: 이벤트의 종류 (예: 'click', 'keydown' 등).target: 이벤트가 발생한 요소.currentTarget: 이벤트 리스너가 부착된 요소.bubbles: 이벤트가 버블링되는지 여부.cancelable: 이벤트가 기본 동작을 취소할 수 있는지 여부.clientX, clientY: 마우스 이벤트의 경우, 클라이언트 영역 내의 좌표.예제 코드 클릭하세요 설명HTML: 버튼을 만들고, 버튼에 클릭 이벤트 리스너를 추가했습니다.JavaScript: 버튼 클릭 시 이벤트 객체의 주요 프로퍼티를 콘솔에 출력합니다.이 코드를 브라우저에서 실행하면 버튼을 클릭할 때마다..

f1 키 누르고 오류 발생시 기존 버전 삭제후 아래 사이트 들어가서 설치하기프로그램 추가 제거 들어가서 제거하고 설치아래사이트 들어가서 설치하기 https://code.visualstudio.com/updates/v1_90 Visual Studio Code May 2024Learn what is new in the Visual Studio Code May 2024 Release (1.90)code.visualstudio.com  다시f1 키 누르고 입력후 ctrl + s 저장 f1 누르고 다시 ftp 검색 - 원격 연결여러개 나오면 내꺼 잘 선택하기 디렉토리가 안나와서false 로 바꾸고 다시 시작

1. getElementById설명: 특정 ID를 가진 단일 요소를 선택합니다.형식: document.getElementById('elementId')반환값: 해당 ID를 가진 요소 (없으면 null).장점:매우 빠릅니다. ID는 문서 내에서 고유하기 때문에 효율적으로 요소를 찾습니다.단일 요소만 반환하므로 쉽게 사용할 수 있습니다.2. getElementsByClassName설명: 특정 클래스를 가진 요소를 모두 선택합니다.형식: document.getElementsByClassName('className')반환값: HTMLCollection (유사 배열).장점:클래스 이름으로 여러 요소를 선택할 수 있습니다.라이브 컬렉션이므로 DOM이 변경될 때 자동으로 업데이트됩니다.3. getElementsByT..