본문 바로가기

Frontend145

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.
JavaScript : Symbol에 대해서 알아보자 Symbol은 생성자가 기본형 값을 반환하는 내장 객체이다. Symbol의 값은 변경 불가능한 기본값(primitive value)이며 고유한 값이기 때문에 충돌하지 않도록 할 때 많이 쓰인다. Symbol();Symbol의 경우 매번 호출할 때마다 새로운 고유한 값을 생성하기 때문에, 객체의 속성 key로 사용하여 충돌하지 않게 하는 등의 역할을 한다.   Symbol의 경우 숫자로 변환하거나 문자열을 추가하는 등의 값을 변경할 수 없으며 for~in 문에서 Symbol key를 가지고 있는 경우 열거되지 않는다. 2024. 8. 6.

티스토리툴바