인생이 쓰다!인생쓰
반응형

개발/JavaScript 8

Debounce 와 Throttle

오늘은 많은 홈페이지에서 사용되는 Debounce와 Throttle에 대해서 알아보려고 합니다. Debounce는 무엇일까요? 여기서 Debounce는 debouncing 이라는 용어에서 나오게 된 기법이라고 생각하시면 됩니다. 여기서 debouncing 은 기계식 스위치의 동작을 전기적 신호로 변경 시에 생기는 진동 잡음을 제거하기 위하여 사용하는 하드웨어의 지연 회로, 소프트웨어의 적절한 지연시간으로 나와있습니다. 저희가 흔히들 쓰는 검색창입니다. 여기서 키를 입력하게 되면 그에 맞는 단어를 조합하여 밑에 자동완성이 되는 것을 볼 수 있는 데요. 여기서 Keboard가 한자씩 입력될때마다 Api로 데이터를 가져온다면 저의 의도와는 다르게 무관한 요청이 발생되면서 오류가 생기고 이러한 것들은 성능 측면..

개발/JavaScript 2021.05.25

자바스크립트 비동기 통신 (Ajax,axios,async await)

일단 비동기 통신이 무엇인지 알고 넘어가면 더 이해가 빠를거라고 생각합니다. 일반적으로 주어진 프로그램은 한 번에 한 가지만 발생하며 실행됩니다. 함수가 다른 함수의 결과에 의존하는 경우 다른 함수가 완료되고 반환 될 때까지 기다려야하며 그 때까지 전체 프로그램은 기본적으로 사용자의 관점에서 중지됩니다. 다른 작업이 다른 프로세서 코어로 이동하도록하고 작업이 완료되면 알려줄 수있을 때 무언가를 기다리는 것이 의미가 없습니다. 이를 통해 그 동안 비동기 프로그래밍 의 기초가되는 다른 작업을 수행 할 수 있습니다. 페이지가 호출됬을때에 한가지만 발생하지 않고 여러프로그램들이 백그라운드에서 돌아가는 것을 의미합니다. 현대의 소프트웨어 디자인은 프로그램이 한 번에 두 가지 이상의 작업을 수행 할 수 있도록 비동..

개발/JavaScript 2021.05.03

자바스크립트 es6 최신문법 사용하기

Babel을 이용하면 ES6 이상의 최신 문법으로 작성한 자바스크립트 코드를 ES5 이하의 예전 문법으로 작성한 것 처럼 소스 코드 내의 문법의 형태를 변경할 수 있습니다. 예를 들면 제가 막혔던 부분은 $("textarea[name='testArea').text(` 변수 `); text 로 받아줄 변수가 Enter (줄바꿈) 이 포함되 있을때 . $("textarea[name='testArea').text(` 변수 `); 이런식으로 변수를 호출할시에 스크립트 페이지 내에서 줄바꿈 현상이 발생을 해서 스크립트 오류가 발생하였다. 이러한 막히는 부분을 해결하는방법을 찾다가 es6문법을 생각했고. 그러면서 babel이라는 트랜스 컴파일러를 사용했다. babel 을 사용하게 되면 정상적으로 스크립트 오류가 나..

개발/JavaScript 2020.02.14
728x90
반응형