반응형 Archive188 window load는 한개가 아니다 지난번에 SPA를 직접 만드는 코딩과제를 하면서 react 컴포넌트처럼 라이프 사이클은 어떻게 만들지? 라는 고민을 잠깐 했었는데 그 연장으로 웹페이지 자체에대한 라이프사이클이 궁금해졌다. window객체에대한 이벤트 발생이 핵심이었고, 꽤나 흥미로웠다. load, DOMContentLoaded, defer 아래 콘솔의 순서는 어떻게 나올까? 결과는 defer > DOMContentLoaded > load 이다. load는 html에서 필요한 js, font, image 등 모든 리소스가 로딩될때 이고, DOMContentLoaded는 html 요소만 완료된다면 호출된다. defer은 DOMContentLoaded와 비슷한 시점에 먼저 호출된다. unload, beforeunload 페이지를 나가기 전 .. 2022. 9. 17. JS 높이와 스크롤 자바스크립트에서 좌표와 사이즈를 다룰 때 정말 해깔리는 경우가 많다. 또 개발중에 사이즈를 사용하는일이 그렇게 흔한일도 아니기 때문에 더욱이 쓸때마다 기억이 가물가물하다. 확실하게 정의해놔야 해깔리지 않을 거같아서 정리해본다. 좌표 : client vs page 우선 좌표(coordinates)는 3 가지가 있다. client와 page. screen 이다. client는 실제로 보이는 view 상에서의 위치를 나타낸 값이고 page는 보이지 않는 영역도 감안한 실제 요소 상에서의 위치이다. page라는 키워드로 직관적으로 기억하면 될 것 같다. screen 은 모니터 기준이다. blue.addEventListener("click", (e) => { console.log(e.clientX, e.clien.. 2022. 9. 17. stompJS에 기여하기와 한단계 성장한 느낌 usestomp-hook react hook for stomp. Latest version: 1.2.1, last published: 2 days ago. Start using usestomp-hook in your project by running `npm i usestomp-hook`. There are no other projects in the npm registry using usestomp-hook. www.npmjs.com 항해 마지막 프로젝트에서 stomp로 socket 통신을 구현하면서 조금은 복잡하다고 느꼈다. 또 다른 조에서도 stomp사용에 어려움을 많이 겪고있엇다. stomp에서 react를 위한 공식적으로 hook을 제공하면 어떨까 싶어서 개발하면서 이를 염두하면서 hook을 만.. 2022. 9. 16. JS 모듈 모듈은 내가 js를 하면서 가장 관심있게 공부했던 주제이다. 눈으로 위에서 아래로 읽어나가면서 직관적으로 흐름이 파악되는 코드작성하는 것을 좋아하는데, 그 중심에는 선언적 프로그래밍과 모듈이 있었다. 주로 순수함수를 여러개 만들어서 레고조립하듯이 했는데, 어느순간부터는 객체로 관리가 필요한 시점이왔고, Array, Math 와 같이 비슷한 기능을 하는것을 모듈로 만들어보고 싶었다. 이번에 재대로 한번 더 공부해 볼 수있어서 설렌다 태초의 자바스크립트 는 모듈기능이 없었다. 그러나 점차 스크립트의 크기가 커지고 기능이 다양해지면서 특별한 라이브러리들이 공유되기 시작했고, 모듈시스템을 도입하게 되었다. 대표적으로 1. AMD - requireJS라는 라이브러리를 통해 개발 2. CommonJS - node에.. 2022. 9. 4. 제너레이터 함수는 하나의 값을 반환하지만, generator 는 여러개의 값을 필요에 따라서 하나씩 반환(yield)한다. function* 로 선언할 수 있다. function* generator() { yield 1; yield 2; return 3; } let gen = generator(); console.log(gen.next()); // {value: 1, done: false} console.log(gen.next()); // {value: 2, done: false} console.log(gen.next()); // {value: 3, done: true} console.log(gen.next()); // {value: undefined, done: true} for.. of 마지막 return 값은.. 2022. 9. 4. Promise의 5가지 API Promise.all(iterable) 완료된는 순서가 상관없는 여러개의 promise를 비동기적으로 실행하고, 결과값을 한번에 받는 함수 let urls = [ 'https://api.github.com/users/iliakan', 'https://api.github.com/users/Violet-Bora-Lee', 'https://api.github.com/users/jeresig' ]; // fetch를 사용해 url을 프라미스로 매핑합니다. let requests = urls.map(url => fetch(url)); // Promise.all은 모든 작업이 이행될 때까지 기다립니다. Promise.all(requests) .then(responses => responses.forEach( res.. 2022. 9. 4. 이전 1 2 3 4 ··· 32 다음 반응형
