Frontend/JavaScript55 JavaScript : 모듈(module)에 대해서 초창기의 JavaScript의 경우 스크립트의 크기도 작고 기능도 단순했기 때문에 모듈이 필요 없었다. 이후 Node.js의 등장하면서 자바스크립트의 사용법이 확장되면서 코드가 전체적으로 비대해지면서 모듈의 필요성이 증가하게 된다. 이에 ECMAScript6에서 모듈 시스템을 표준화 하여 import와 export 문을 통해 모듈화된 코드를 지원하게 된다. 모듈(module)모듈이란 기본적으로 JavaScript 코드를 담고 있는 파일을 의미한다. 이 파일은 관련된 함수, 객체, 클래스, 변수 등을 포함하고 있다. 모듈 시스템을 통해서 코드의 재사용성 및 유지보수를 용이하게 할 수 있다. 모듈은 모듈마다 자신의 스코프를 갖는다. 따라서 변수나 함수를 내보내거나(export) 가져오지(import)않는다.. 2024. 8. 14. 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. 이전 1 2 3 4 5 ··· 10 다음