LazyWon Story

목차 [jQuery] $(document).ready()와 $(function(){}) [Vanila Javascript] window.onload 정리 [jQuery] $(document).ready()와 $(function(){}) 두 소스는 같은 역할을 한다. 외부 리소스, 이미지와는 상관 없이 브라우저가 DOM(Document Object Model) 트리를 생성한 직후에 실행된다. 따라서 $(document).ready()는 리소스들이 로드되기 전에 동작할 수 있다. window.onload 보다 더 빠르게 실행되며, 중복으로 사용하여 실행할 수 있고, 선언 순서대로 실행된다. .ready() 이벤트는 jQuery 3.0 이후부터는 사용하지 않는 것을 권장한다. 권장 방법 $(function()..

목차 Promise의 등장 이유 Promise 객체 생성 Promise Chaining 막연하게만 알고 있던 Promise가 대체 무엇이고, 왜 등장하게 되었는지, 어떤 방식으로 사용할 수 있는지 ! Lazywon 게을러지기 전에 제대로 한번 공부해보자 ! 😂 🦄 들어가기 앞서.. Promise의 등장 이유!? 자바스크립트에서 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬(Callback Hell)로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러 처리가 곤란하며, 여러 개의 비동기 처리를 한 번에 처리하는데 한계가 있다는 단점이 존재한다. 잠깐, Callback Hell 이 뭔데? ..을 알아보기 전에 먼저 동기식 처리 모델과 비동기식 처리 모델에 대..

목차 jQuery를 이용한 스크롤 이동 JavaScript를 이용한 스크롤 이동 홈페이지나 모바일 웹뷰에서 기본적으로 많이 사용하는 TOP 버튼 클릭시, 상단으로 스크롤바 이동시키는 기능을 만들려고 한다. jQuery를 덜어내는 작업 중, 순수 JavaScript에서 어떤 식으로 작성하는지 기록해보고자 한다. jQuery를 이용한 스크롤 이동 윈도우 스크롤 이동시키기 $(window).scrollTop(0); 애니메이션 효과 주면서 스크롤 이동시키기 $('html, body').animate({ scrollTop: 0 }, 200); JavaScript를 이용한 스크롤 이동 윈도우 스크롤 이동시키기 window.scrollTop(0, 0); 부드럽게 이동하는 애니메이션 효과를 지정하여 스크롤 이동시키기...

목차 변수 바람직한 변수명 모던 자바스크립트 기초 다지기를 위한 공부입니다. let, var, const 구분이 아직도 잘 안되고, 엉터리로 되어 있는 코드 처음부터 잘 만들고 싶어 짚어 넘어가 보려 합니다. 변수 var 오래된 변수 선언 키워드로 현재는 잘 사용하지 않는 키워드이다. 예전에는 자바스크립트의 변수 선인이 var 로만 가능했었다. var 로 변수 선언을 할 경우 가장 큰 특징은 중복 선언이 가능하다는 점이다. var a = 10; console.log(a) // 결과 10 var a = 20; console.log(a) // 결과 20 var a = 30; console.log(a) // 결과 30 var 를 사용하면 중복으로 같은 변수명을 계속 선언하고 값을 넣어도 에러가 나지 않으며, ..