본문 바로가기

Frontend146

JavaScript : 비동기 통신에 대해서 (Fetch & Axios) 통신 종류동기 통신동기 통신은 클라이언트가 요청(request)을 전송하면, 해당 요청에 대한 응답(response)을 받을 때까지 기다리는 방식이다.  따라서 응답이 도착하기 전에는 다른 요청을 할 수 없다. 이 방식은 요청에 대한 처리 결과를 보장받을 수 있지만, 응답이 지연되면 클라이언트는 계속해서 기다려야 한다는 단점이 있다. 비동기 통신비동기 통신의 경우 request를 보내더라도 response을 기다리지 않고 다른 작업을 계속 수행할 수 있다. 따라서 response가 지연되더라도 계속해서 다른 요청을 보낼 수 있다. 그러나 비동기 통신은 요청에 대한 처리 결과나 응답의 순서를 보장받기 어렵다는 단점이 있다.   JavaScript의 비동기 처리 필요성 JavaScript의 경우 싱글 스레드.. 2024. 8. 14.
JavaScript : 비동기를 처리하는 방법 (Async / Await) ES8에 정의된 문법으로 기존의 콜백함수와 Promise로 비동기를 처리하는데 있어서 가독성이 떨어지는 단점을 보완하기 위해 나왔다. Promise를 좀 더 편하게 사용할 수 있도록 한다. 콜백의 깊이가 깊지 않을 경우에는 콜백함수나 Promise를 사용하는 것이 나을 수 있다. async function 변수명(매개변수1, 매개변수2,..){      변수명 = await 표현식;}async는 비동기 기능이 존재하는 function 앞에 선언한다. async를 붙이면 해당 함수는 암묵적으로 Promise를 사용하여 결과를 반환한다. await는 async 함수 내에서만 동작하며, async함수의 실행을 일시 중지하고 전달된 promise가 완료된 후에 async 함수를 다시 시행한다. await로 선언.. 2024. 8. 13.
JavaScript : DOM의 키보드 이벤트에 대해서 키보드 이벤트 사용자가 키보드를 누르거나 뗄 데 발생하는 이벤트다. keydown키보드의 키를 누를 때 발생하는 이벤트로 키를 계속 누르고 있으면 이벤트가 반복적으로 발생한다.keyup키보드의 키를 뗄 때 발생하는 이벤트다.keypress키보드의 키를 누르고 있을 때 발생하는 이벤트다. Shift, Ctrl, Alt, Meta와 같은 특수키는 이벤트가 발생하지 않는다. 키보드 이벤트의 속성속성설명type이벤트의 종류target 이벤트가 발생한 요소key이벤트가 발생한 키의 값code이벤트가 발생한 키의 물리적인 위치keyCode이벤트가 발생한 키의 숫자 코드altKey 이벤트가 발생할 때 Alt 키가 눌려있는지 여부ctrlKey 이벤트가 발생할 때 Ctrl 키가 눌려있는지 여부shiftKey이벤트가 발생.. 2024. 8. 12.
JavaScript : 비동기를 처리하는 방법 (Promise) Promise콜백함수에대 해 설명하면서 비동기 처리에 사용이 된다고 한 적이 있다. 하지만 콜백함수의 경우에는 콜백함수의 깊이가 깊어질 수록 난독을 발생시키고 코드관리가 어려워진다. 이러한 단점을 보완하기 위해서 ES6부터 Promise를 제공하게 되었다.  new Promise(function(resolve, reject){ 코드 });promise 클래스 선언을 하고, 클래스 선언 시에 콜백 함수를 인자로 가지게 되는데 해당 콜백함수에는 매개변수로 resolve와 reject란 매개변수를 갖고 있다. 코드 내에 콜백 함수 인자 resolve를 시행하면, then()을 이용하여 처리 결과값을 받을 수 있고, reject를 시행하면 실패상태가 되며 처리 결과를 then() 혹은 catch()로 받을 수 .. 2024. 8. 11.
JavaScript : Geolocation API를 사용하여 현재 위치를 가져와보자 Geolocation API는 위도와 경도같은 현재 위치 정보를 검색하는 API로, 이 기능을 사용하기 위해서는 반드시 개인정보의 사용 허가가 필요하다. Geolocation API는 window.navigator.geolocation 객체를 통해 사용할 수 있다. navigator.geolocation.getCurrentPosition(성공시 함수, 에러시 함수 , 옵션);사용자의 현재 위치를 얻을 수 있다. 성공 시 함수는 위치 정보를 얻는 것을 성공했을 때 GeolocationPosition 객체를 매개변수로 받는 콜백함수를 이야기하며, 에러시 함수는 위치 정보를 얻는 것을 실패했을 때 GeolocationPositionError 객체를 매개 변수로 받는 콜백함수이다.개인정보의 사용 허가 알람이 뜨.. 2024. 8. 11.
JavaScript 내장함수 : Object관련 내장함수 Object는 참조형 타입을 생성할 때  객체 간의 상속에서 가장 최상위에 위치하는 객체이다. 참조형 타입의 경우 Object을 상속받아 Object의 다양한 속성들을 사용할 수 있다. 속성설명객체.hasOwnProperty(속성)객체의 속성이 상속받지 않은 속성인지 알려준다, 자신의 속성이면 true반환객체.isPrototypeOf(대상)객체가 대상의 조상인지 알려준다, 조상이면 true반환Object.getPrototypeOf(객체)객체의 prototype을 조회할 수 있다.Object.setPrototypeOf(객체, 상위 객체)객체의 prototype을 설정할 수 있다. 객체 instanceof 생성자객체가 특정 생성자의 자식인지 조회할 수 있다.객체.propertyIsEnumerable(속성)객.. 2024. 8. 10.

티스토리툴바