개발언어/JavaScript 4

[JavaScript] 이벤트 루프

자바스크립트 특징 ‘단일 스레드’ 기반언어 → 동시에 하나의 작업만을 처리 가능 동시에 여러가지 작업을 처리하기 위해서 → 이벤트 루프 사용 따라서, 이벤트 루프를 이용해 비동기 방식으로 동시성을 지원 ex) function delay() { for (var i = 0; i < 100000; i++); } function foo() { delay(); bar(); console.log('foo!');// (3) } function bar() { delay(); console.log('bar!');// (2) } function baz() { console.log('baz!');// (4) } setTimeout(baz, 10);// (1) foo(); → setTimeout함수 이벤트 요청 후 스택에서 ..

[JavaScript] var, let, const 차이점

1. 변수 선언 방식 javascript에서 변수 선언 방식을 크게 var, let, const로 나눌 수 있다. [var] ex) var name = 'type' console.log(name) // type var name = 'javascript' console.log(name) // javascript var는 다음과 같이 같은 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 다른 값이 출력되는 것을 확인 할 수 있다. 이는 유연한 변수선언에 유리하지만, 코드량이 많아진다면 어디에 어떻게 사용 될지도 파악하기 힘들뿐더러 값이 바뀔 우려가 있다. ES6이후, 이를 보완하기 위해 추가 된 변수 선언 방식이 let과 const이다. [let] ex) let name = 'type' cons..

[JavaScript] AJAX (fetch,axios,비동기처리)

1. 동기 vs 비동기 동기와 비동기를 나누는 가장 큰 차이점은 어떻게 실행 순서를 가지는 지에 있다. 동기적 방식은 발생하는 하나의 이벤트가 모두 끝나야 다음 이벤트를 처리할 수 있는, 실행 순서가 확실한 방식이고 비동기적 방식은 연속적으로 발생하는 이벤트를 담은 후, 완료되는 순서대로 일을 처리하는 실행 순서가 확실하지 않은 방식을 말한다. 2.AJAX란? JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML데이터를 주고받는 기술을 의미한다. XMLHttpRequest 객체를 이용해 전체 페이지를 리로드하지 않고 필요한 데이터만 로드할 수 있다. 3. Ajax 구현방식 - fetch javascript 내장 라이브러리로 imprt할 필요가 없다. return 값은 Promise 객체..

[JavaScript] 이벤트의 종류

UI 이벤트 – 사용자가 웹페이지가 아닌 브라우저의 UI와 상호작용할 때 발생 load 웹 페이지의 로드가 완료되었을 때 unload 웹 페이지가 언로드 될 때(새로운 페이지를 요청한 경우 ) error 브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 없는 경우 resize 브라우저의 창 크기를 조정했을 때 scroll 사용자가 페이지를 위아래로 스크롤 할 때 키보드 이벤트 - 사용자가 키보드를 이용할 때 발생 keydown 사용자가 키를 처음 눌렀을 때 keyup 키를 땔 때 keypress 사용자가 눌렀던 키의 문자가 입력되었을 때 마우스 이벤트 - 사용자가 마우스나 터치화면을 사용할 때 발생 click 사용자가 동일한 요소 위에서 마우스 버튼을 눌렀다 땔 때 dbclick 두 번 눌렀다 땔 때..