javascript 29

0. Promise

Promise 비동기 처리에 사용되는 객체이다. 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다 1. Promise의 3가지 상태 (states) Pending(대기): 비동기 처리 로직이 앚기 완료되지 않은 상태 Fulfilled(이행): 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 Rejected(실패): 비동기 처리가 실패하거나 오류가 발생한 상태 1) Pending(대기) 먼저 아래와 같이 new Promise() 메서드를 호출하면 대기(Pending) 상태가 된다. new Promise(); new Promise() 메서드를 호출할 때 콜백 함수를 선언할 수 있고, 콜백 함수의 인자는 resolve, reject 이다. new Promise(function(resolve,..

카테고리 없음 2024.02.23

0. 비동기 처리 (setInterval, clearInterval)

비동기 처리 setInterval, clearInterval 비동기 반복 수행 함수 https://pakms980319.tistory.com/105 0. 비동기 처리 (setTimeout, clearTimeout) 비동기 처리 여러 작업을 동시에 처리하기 위해 도입한 개념으로, 특정 작업의 완료를 기다리지 않고 다른 작업을 동시에 수행할 수 있도록 한다. 자바스크립트에는 setTimeout(), fetch()와 같은 비 pakms980319.tistory.com 1. setInterval `boxEl01` 요소에 1초마다 html을 삽입한다. (비동기 방식) 2. clearInterval 실행했던 비동기 프로세스를 취소한다.

카테고리 없음 2024.02.23

0. 비동기 처리 (setTimeout, clearTimeout)

비동기 처리 여러 작업을 동시에 처리하기 위해 도입한 개념으로, 특정 작업의 완료를 기다리지 않고 다른 작업을 동시에 수행할 수 있도록 한다. 자바스크립트에는 setTimeout(), fetch()와 같은 비동기 처리 함수가 있다. 메인 스레드가 작업을 다른 곳에 인가하여 처리되게 하고, 작업이 완료되면 콜백 함수를 받아 실행하는 방식이다. 1. 동기 2. 비동기 Thread: 잡업 실행 단위(실행 흐름 단위) 동기 (Synchronous): 미리 정해놓은 약속대로 처리하는 작업 (절차흐름대로 처리 - 단일 스레드 단위) 비동기 (Asynchronous): 정해진 약속대로 처리하는게 아니라 필요한 상황에 따라 다르게 처리(실행흐름분리 - 스레드 따로 형성) 1) 비동기 처리함수 1-1) setTimeou..

카테고리 없음 2024.02.23

0. Resize Event

Resize Event window 객체에 이벤트를 등록하여 사용한다 브라우저의 크기가 변경될 때 발생하는 이벤트이다 만약, 브루아저 크기 변화에 따른 dom의 변경 크기를 구하려면 getBoundingClientRect(), getComputedStyle()를 사용해줘야 한다 1. Resize Event 1) Resize Event 객체 정보 출력 2) innerWidth, outerWidth innerWidth와 outerWidth의 값이 다르다. 보통 window.innerWidth 브라우저 윈도우 두께를 제외한 실질적 가로 너비 window.outerWidth 브라우저 윈도우 두께를 포함한 전체 가로 너비 2. window.innerWidth에 따른 요소의 스타일 변경 실습 window.inner..

카테고리 없음 2024.02.21

0. DOMContentLoaded Event

DOMContentLoaded Event window 객체를 사용한 Event이다 처음 랜더링될 때 실행되는 이벤트이다 1. DOMContentLoaded Event 1) DOMContentLoaded event 객체 정보 2. DOMContentLoaded 이벤트를 사용한 윈도우 내부 사이즈에 따른 요소 스타일 변경 실습 window의 내부 사이즈에 따라 요소 `ballEl`의 style을 수정하는 함수이다. 위 함수를 사용하여 `DOMContentLoaded` 이벤트를 추가하니 HTML 문서가 처음 랜더링 될 때, 윈도우 사이즈에 따라 `ballEl` 요소의 style이 다르게 랜더링되었다.

카테고리 없음 2024.02.21

0. Scroll Event

Scroll Event 지정된 크기 이상의 요소를 표현할 때, 스크롤이 생기게 되는데, 그 스크롤을 감지하여 이벤트를 발생시킨다. 1. Scroll 이벤트 1) event 객체 정보 2) Scroll의 위치 구하기 (Window 객체 사용) window.scrollX 현재 문서의 수평 스크롤 위치 뷰포트에서 가장 왼쪽 부분의 가로축 위치를 기준 스크롤이 오른쪽으로 이동할수록 값이 증가 window.scrollY 현재 문서의 수직 스크롤 위치 뷰포트에서 가장 위쪽 부분의 세로축 위치를 기준 스크롤이 아래쪽으로 이동할수록 값이 증가 3) Scroll 위치 구하기 (Document 객체 사용) document.documentElement.scrollTop document.documentElement.scrol..

카테고리 없음 2024.02.21

0. Check Event

Check Event `checkbox`, `radio` 등의 버튼의 상태가 변경되었을 때 발생하는 `change` 이벤트이다. inline에서는 onChange 속성을 사용하여 이벤트를 추가한다. 1. checkbox에 대한 change 이벤트 체크했을 때, 체크 해제했을 때 이벤트가 발생한다. 1) event.target.checked 확인하기 체크 했을 때 발생하는 event 객체 정보 체크 해제 했을 때 발생하는 event 객체 정보 문제 1. 입력한 행, 열에 대한 테이블을 생성 2. 테이블의 중앙에 포인트로 지정할 셀의 배경을 회색으로 표현 3. 키보드 방향키로 포인트를 이동 4. 마우스로 선택시 포인트 이동 위 조건을 만족하는 스크립트를 작성하라 input 태그를 통해 행과 열의 정보를 입력..

카테고리 없음 2024.02.21

0. 요소 탐색자

요소 탐색자 DOM 탐색 프로퍼티를 사용하여 HTML에 작성된 요소를 탐색하는 방법 1. 작성된 HTML 문서 2. 요소의 Id, Class 명을 사용한 탐색 1) document.getElementById("Id") 해당 id명을 가진 요소를 찾아 참조한다. (단일 요소) 2) document.getElementsByClassName("class") 해당 class 명을 가진 요소들을 찾아 참조한다. (배열 요소) 3. 선택자를 사용한 탐색 1) document.querySelector("selector") 해당 선택자를 통해 요소를 찾아 참조한다. (단일 요소) 해당 선택자에 해당하는 요소가 복수 있더라도 하나의 요소만 참조한다. 2) document.querySelectorAll("selector"..

카테고리 없음 2024.02.21

0. Key Event

Key Event `KeyDown`, `KeyUp`, `KeyPress` 상황에서의 이벤트 처리 1. KeyUp 이벤트 `KeyUp` 이벤트는 키보드를 누른 후 손을 땠을 때 발생한다. 1) `KeyUp` 이벤트에 대한 객체 정보를 출력 발생한 이벤트에 대한 객체를 출력하면 위와 같은 결과가 출력된다. 2) event 객체의 `keyCode` 속성 사용 입력한 키에 대한 `keyCode` 정보가 출력된다. 3) event 객체의 `key`, `keyCode` 속성 사용 `key` 속성은 타이핑한 키 정보에 대해, `keyCode`는 그 키의 코드 정보를 담고있다. `keyup` 이벤트가 발생할 때 마다, p 태그에 그 키와 키 코드를 출력해주고있다. 대소문자를 구분하지 못한다. (제어 문자 키를 인식하기..

카테고리 없음 2024.02.21

0. Closure

Closure 함수와 함수가 선언된 어휘적 환경의 조합이다. 즉, 함수 안에 함수를 선언한 환경에서의 관계를 의미하며 내부 함수가 외부 함수의 변수에 접근할 수 있는 것을 의미한다. 정보 은닉: 외부에서 접근할 수 없도록 변수를 보호하고, 내부 함수를 통해서만 접근하도록 할 수 있다. 데이터 보존: 함수가 생성될 당시의 환경을 유지하면서, 데이터를 영구적으로 보존할 수 있다. 비동기 처리: 비동기적인 작업에서 결과를 유지하고, 필요할 때 접근할 수 있다. 1. 정보의 은닉화 함수 `outerFunc()`은 상태 변수 `state`를 가지고 내부 함수 `addStateOne`의 위치 정보를 return하는 함수이다. 변수 `a`에 `outerFunc()`을 사용하여 내부 함수의 위치값을 리턴받아 내부 함수..