목록JavaScript (32)
프론트엔드 정복하기
Javascript의 여러 엔진들에 대해 알아보자. Javascript 엔진이란?) JS 코드를 실행하는 프로그램 또는 인터프리터*이다. V8 - 개발사: Google - 개발언어: C++ - 사용처: Node.js 런타임, Chrome 브라우저 - 속도 향상을 위해 인터프리터 대신 JIT 컴파일러*를 사용해 더 효율적으로 JS를 기계어로 번역한다. - 바이트코드와 같은 중간 코드를 생산하지 않는다. - 멀티 스레드(메인스레드, 컴파일 담당 스레드, 프로파일러 스레드 등으로 이루어짐.) Javascript Core - 개발사: Apple - 사용처: Safari, RN App SpiderMonkey - 최초의 엔진 / C++ / FireFox에 사용 Chakra - MS 개발 / IE, Edge에 사용 ..
6.3 이벤트 루프와 매크로, 마이크로 태스크 자바스크립트 엔진을 활성화하는(=이벤트 루프가 활성화되는) 태스크 - script 가 로드될 때 - mouse 이벤트 등의 이벤트 핸들러 실행될때 - setTimeout 에서 콜백함수가 실행될때 기타 등등.. 알아둘만한 지식! - 엔진이 특정 태스크 처리하는 동안 --> 렌더링이 일어나지 않는다! (DOM 변경 x) - 마이크로태스크는 다른 이벤트 핸들러, 렌더링 작업, 매크로태스크가 실행되기 전에 처리된다. - 마이크로태스크 전체가 처리되는 동안에는 UI 변화나 네트워크 이벤트 핸들링이 일어나지 않습니다. 렌더링이나 네트워크 요청 등의 작업들은 마이크로태스크 전부가 처리되고 난 직후 처리됩니다. 이에 따른 활용방안 - CPU 소모가 많은 태스크는 쪼갠다. ..
11.1 콜백 알아둘만한 지식 let script = document.createElement('script') script.onload = ()=> callback() script의 onload 속성은 --> 스크립트 로딩이 끝난 후 속성에 할당한 함수를 실행하게 한다! 에러 처리 패턴: '오류 우선 콜백' (error-first-callback) - callback의 첫번째 인수를 에러를 위해 남겨두고, 두번째 인수는 에러가 발생하지 않았을 때를 위해 남겨둔다. ex) loadScript('test.js', function(error, script){ if(error) ... else .... }) script.onload = ()=> callback(null, script) script.onerro..
https://ko.javascript.info/ 모던 JavaScript 튜토리얼 ko.javascript.info 모던 Javascript.INFO 라는 사이트가 있다. (자바스크립트 기본 개념, 동작 원리 정리) 15k star 수를 가지고 있는 꽤 유명한 사이트이다. 해당 사이트를 한국어로 번역한 사이트이다. 자바스크립트 공부하기에 매우 좋은 사이트이다!
https://velog.io/@suyeonme/react-Infinite-Scroll-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0 [react] Infinite Scroll 구현하기 React에서 Infinite Scroll 구현하기(scroll event, intersectionObserver, useRef) velog.io intersection observer 개념 infiniter 구현하는 법 등 정리하기 범구님 예시 import 'intersection-observer'; import { RefObject, useCallback, useEffect, useRef } from 'react'; export function useIntersectionObserver( effec..