본문 바로가기

ES64

AbortController를 사용해 API 비동기요청 취소하기 최근 Javascript 웹 페이지 제작을 하면서 fetch를 통한 비동기요청이 진행되는 동안에 요청을 취소해야하는 기능구현이 필요하게 되었다. 페이지 이동, 취소 요청과 같은 이벤트가 발생하게 되면 이전 비동기요청을 취소하는 방법에 대해서 알아보다 이를 더 잘 이해하기 위해 포스팅을 작성하게 되었습니다. 1. AbortController 개요 Fetch 객체는 promise 객체를 리턴하는 비동기함수입니다. 원래 promise 객체는 자체 abort 기능이 없기 때문에 abortcontroller 를 통해서 비동기 동작 중단 기능을 구현 할 수 있습니다. - 사용해야 하는 이유 1) 필요하지 않은 API 호출을 취소하여 웹페이지 성능개선 2) API 호출로 인해 발생하는 비용 절감 2. 기본적인 사용방.. 2020. 10. 3.
웹 성능 향상을 위한 Throttle과 Debounce 개념부터 활용까지 저는 Javascript 웹 페이지 제작을 하면서 성능 향상을 위해 쓰로틀(Throttle)과 디바운스(Debounce) 기능이라는 것을 알게 되었습니다. 그에 대한 이해를 더욱 깊이있게 하고 배운 것을 공유하기 위해 포스팅 하게되었습니다. 두 가지 기능에 대한 개념부터 활용까지 한 번 알아보겠습니다. 1. 둘의 개념과 사용법은? 1) Throttle 이란? - 개념 : 여러 호출이 발생할 때 일정 시간이 지나기 전에는 기능이 호출 되지 않도록 하는 기능 - 사용예 : 무한 스크롤을 사용한 LazyLoading 기능을 구현할 때 사용, 스크롤로 인한 성능 저하 방지 Throttle을 적용하지 않으면 스크롤이 조금 움직일 때 마다 기능을 계속 호출하게 된다. 스크롤 이동시 많은 기능이 로드되어야 한다면 부.. 2020. 9. 7.
타입스크립트 설치 및 타입 정의해보기 이번 포스팅에서는 타입스크립트 소개와 간단한 사용법에 대해 알아보겠습니다. 1. 타입스크립트란? Javascript의 변수에 형(Type)을 부여해주고 그와 관련된 문법 검사를 해주는 것 특징 1) Javascript에 타입 기능을 추가하는것 (string, boolean, int 등) 2) 실시간 에러 처리 3) 오픈소스이며 정적타입 추가에 가장많이 사용되는 툴 4) 브라우저, OS에 독립적 5) .js 코드나 .ts 코드는 결과적으로는 동일하게 작동함 2. 왜 사용해야 할까? 1) Javascript에는 변수에 타입을 명시 할수있는 기능이 없다는 단점을 해결 가능함 ex) 함수나 변수명만으로는 그 타입을 한번에 알기 어렵다 2) 에디터에서 코드를 작성하면서 동시에 자동으로 문법오류 체크가 가능함 3... 2020. 8. 31.
트랜스파일을 위한 바벨(Babel) 예제 만들어보기 VSCode 사용법을 익히면서 바벨의 사용법을 알 필요가 생겨서 알아보았고 개념과 사용법에 대해 공유하고자 글을 쓰게 되었다. 1. 바벨(Babel) 이란? - 바벨 공식 홈페이지 Babel · The compiler for next generation JavaScript The compiler for next generation JavaScript babeljs.io 공식홈페이지의 설명에 따르면 자바스크립트 컴파일러라고 한다. 컴파일러(compiler, 순화 용어: 해석기, 번역기)는 특정 프로그래밍 언어로 쓰여 있는 문서를 다른 프로그래밍 언어로 옮기는 프로그램을 말한다. 컴파일러 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 컴파일은 여기로 연결됩니다. 일본의 기업에 대해서는.. 2020. 8. 13.

티스토리툴바