프론트엔드/Javascript
-
mouseup 이벤트가 동작하지 않을때 해결방법프론트엔드/Javascript 2024. 9. 27. 17:29
https://stackoverflow.com/questions/9506041/events-mouseup-not-firing-after-mousemove Events-- 'mouseup' not firing after mousemoveI am trying to drag an image with Javascript (no libraries). I am able to listen to mousedown and mousemove events. For some reason, I am not able to capture the mouseup event after mousemove. (I canstackoverflow.com Found the issue, if it is going to be of help to a..
-
현재 디바이스가 모바일인지 아닌지 검사하기프론트엔드/Javascript 2024. 9. 6. 17:01
https://stackoverflow.com/questions/3514784/how-to-detect-a-mobile-device-using-jquery How to detect a mobile device using jQueryIs there a way to detect whether or not a user is using a mobile device in jQuery? Something similar to the CSS @media attribute? I would like to run a different script if the browser is on a handh...stackoverflow.com var isMobile = false; //initiate as false// device ..
-
함수와 this프론트엔드/Javascript 2024. 4. 20. 08:53
function 으로 생성한 함수에는 항상 this 와 prototype 속성이 존재한다. const Shadow = function(){ console.log(this) } console.log(Shadow()) this 는 윈도우 객체이다. console.log(new Shadow()) this 는 생성자함수이다. var Human = function(type){ this.type = type || 'human' } Human.isHuman = function(human){ return human instanceof Human } Human.prototype.breathe = function(){ alert('h-a-a-a-m') } 자바스크립트에서는 객체 복사로 상속한다. 복사하는 원본객체를 프로토..
-
비동기 - async, await프론트엔드/Javascript 2024. 3. 18. 16:33
* async 함수 async, await 문법을 사용하면 프로미스를 조금더 편하게 사용할 수 있다. async function f() { return 1 } function 앞에 async 를 붙이면 해당 함수는 항상 프로미스를 반환한다. 프로미스가 아닌 값(return 1)을 반환하더라도, 내부적으로는 해당 값(1)을 프로미스로 감싸서 반환한다. return 이 resolve 호출과 동일하다. async function f() { return 1 } f().then(alert) // 1 해당 코드를 실행하면 result 가 1인 이행 프로미스가 반환된다. 그러므로 then 을 연결해서 사용할 수 있다. async function f() { return Promise.resolve(1) } f().th..
-
비동기 - 프로미스 체이닝프론트엔드/Javascript 2024. 3. 15. 16:44
* 프로미스 체이닝 "비동기 - 콜백" 수업에서 스크립트를 순차적으로 불러오는 비동기 작업이 여러개인 경우에 콜백기반 프로그래밍을 사용하였다. 이때 콜백지옥(callback hell)과 같이 코드가 복잡해지는 문제가 발생하였다. 프로미스 체이닝을 이용하면 이러한 문제를 간단하게 해결할 수 있다. new Promise(function(resolve, reject) { setTimeout(() => resolve(1), 1000) }).then(function(result) { alert(result) // 1 return result * 2 }).then(function(result) { alert(result) // 2 return result * 2 }).then(function(result) { al..
-
비동기 - 프로미스 (Promise)프론트엔드/Javascript 2024. 3. 14. 18:19
* 프로미스와 현실상황 비교 본인이 유명한 가수라고 가정해보자! 그리고 본인의 싱글 앨범이 언제 나오는지 밤낮으로 물어보는 팬들을 상대해야 한다고 해보자! 여러분은 앨범제작이 완료되면 즉시 팬들에게 소식을 전달할 수 있도록 할 것이다. 예를 들어, 구독리스트를 만들어서 팬들에게 전달하고, 이메일 주소를 기재하도록 부탁한다. 이렇게 하면 앨범제작이 끝났을때 팬들에게 이메일을 보내 앨범 관련 소식을 곧바로 알려줄 수 있다. 녹음 스튜디오에 불이 나서 앨범제작이 연기되더라도 관련된 소식을 팬들에게 전달할 수가 있다. 결과적으로 밤낮으로 질문하는 팬들이 사라지고, 팬들은 앨범출시일을 놓치지 않게 되었다. 1. 제작코드(producing code)는 원격에서 스크립트를 로딩하는 등의 시간이 걸리는 작업을 한다. ..
-
비동기 - 콜백프론트엔드/Javascript 2024. 3. 13. 16:05
자바스크립트는 다양한 함수를 사용하여 원하는 시점에 동작하는 비동기 처리를 할 수 있다. setTimeout 과 setInterval 메서드가 비동기 스케쥴링의 대표적인 예시이다. 1. 서버에서 데이터를 가져오는 경우 2. 고화질의 이미지를 로딩하는 경우 3. 스크립트 파일을 로딩하는 경우 실무에서 경험하는 비동기 처리는 위와 같이 다양하다. function loadScript(src) { // 태그를 만들고 페이지에 태그를 추가(마운트)합니다. // 태그가 페이지에 추가되면 src에 있는 스크립트를 비동기적으로 로딩하고 실행합니다. const script = document.createElement('script') script.src = src document.head.append(script) } ..