Javascript/이론+예제 (23) 썸네일형 리스트형 debounce 과 throttle 쓰로틀 (Throttle) 과 디바운스 (Debounce) - DOM 이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 JS의 이벤트를 제어(제한)하는 방법 디바운스 (Debounce) 배경지식 - 전자에서는 기계적인 접점을 가지는 스위치는 접점이 붙거나 떨어지는 순간에 바운싱 현상이 있다. 이 바운싱 현상은 접점이 붙거나 떨어지는 그 짧은 순간에 접점이 고속으로 여러번 on/off 되는 현상 이런 바운싱 현상을 방지하기 위한 것이 디바운싱 기법 - 이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술 (즉, 순차적 호출을 하나의 그룹으로 "그룹화" 할 수 있음) 연이어 호출되는 함수들 중 마지막 함수 (또는 제일 처음)만 호출하도록 하는 것 디바운스 (Debounce) .. [ES6] 비동기 함수 (Promise) Do it! 리액트 프로그래밍 정석 책과 다른 책을 참고하며 공부한 내용을 정리하는 글입니다. 동기적 처리 작업을 요청함과 동시에 작업의 결과를 그 자리에서 받을 수 있는 데이터 처리 방식 비동기 처리 작업을 요청하지만 결과는 그 자리에서 꼭 받지 않아도되는 데이터 처리 방식 비동기 처리의 대표적인 예 서버에 데이터를 요청하고 결과를 기다리는 과정 - 서버에 데이터를 요청하는 동안 다른 작업을 진행하다가 데이터 요청이 완료되면 본격적으로 작업을 진행 자바스크립트의 비동기 처리 - 자바스크립트의 엔진은 싱글 스레드로 이루어져 있어, 동시에 두가지 작업을 할 수 없다 - 자바스크립트의 엔진은 비동기 처리가 가능하도록 설계되어있음 - 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 .. [ES6] 라이브러리 의존성 관리 Do it! 리액트 프로그래밍 정석 책과 다른 책을 참고하며 공부한 내용을 정리하는 글입니다. 의존성 어떤 파일이나 코드가 다른 파일이나 코드를 필요로 하는 것을 뜻함 기존 자바스크립트의 라이브러리 의존성 관리 방법 기존 자바스크립트는 라이브러리나 모듈을 관리하는 방법이 매우 불편했음 1. script 와 같은 엘리먼트를 이용하여 관리 script.js 를 먼저 참조할 경우 정의되지 않는 함수를 참조하는 의존성 문제가 발생 ES6 라이브러리 의존성 관리 방법 1. import 구문 사용 script 엘리멘트 없이 연결된 파일 및 의존 파일을 먼저 모두 내려 받고 코드를 구동하는 방식 import MyModule from './MyModule.js'; //기본 import { ModuleName } fro.. [ES6] 객체 확장 표현식과 구조 분해 할당 Do it! 리액트 프로그래밍 정석 책과 다른 책을 참고하며 공부한 내용을 정리하는 글입니다. 객체 확장 표현식 객체 생성 방식을 좀 더 간결하고 동적으로 생성할 수 있음 기존 자바스크립트의 객체 확장 표현식 사용 방법 객체와 객체의 값을 선언하기 위해 키 이름과 값을 각각 할당해야 했음. const x = 0; const y = 0; const obj = { x: x, y: y}; const randomKeyString = 'other'; const combined = {}; combined['one' + randomKeyString] = 'some value'; const obj2 = { methodA: function() { console.log('A'); }, methodB: function() .. [ES6] 화살표 함수 (arrow function) Do it! 리액트 프로그래밍 정석 책과 다른 책을 참고하며 공부한 내용을 정리하는 글입니다. 화살표 함수에 대해서 - ES6에 추가된 표현식을 사용하는 함수로 화살표 기호 ( => ) 로 함수를 선언함 - 화살표 기둥 = 을 사용하므로 fat arrow function 이라고도 함 - 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 장점을 가지고 있음 화살표 함수의 제한점 - this 나 super 에 대한 바인딩이 없음 - methods 로 사용될 수 없음 - new.target 키워드가 없음 - 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind 메소드를 사용할 수 없음 - 생성자로 사용할 수 없음 (constructor) - yield를 화살표 함수 내부에서 사용.. [ES6 문법] 클래스 (Class) Do it! 리액트 프로그래밍 정석 책과 다른 책을 참고하며 공부한 내용을 정리하는 글입니다. 클래스 (Class)에 대해서 - 기존 자바스크립트는 클래스 표현식이 없어서 프로토타입 기반(prototype-based) 객체지향 언어 - 클래스는 객체 지향 프로그래밍 (OOP) 을 정의하는 개념 중 하나 - 똑같은 객체를 여러 번 다시 찍어내기 위한 틀 , 즉 템플릿 (template) 이다. 동일한 변수와 메서드 등을 가지는 객체를 붕어빵에 비유한다면, 클래스는 붕어빵 틀에 비유할 수 있음 클래스 (Class) 와 인스턴스 (instance) - 인스턴스 (instance) 란 객체를 만들기 위한 틀 (template) 을 의미하는 클래스를 실제로 사용할 수 있는 객체로 만드는 것 - 클래스로 구현된 구.. [ES6 문법] 가변 변수와 불변 변수 Do it! 리액트 프로그래밍 정석 책을 보면서 공부한 내용을 정리하는 글입니다. 가변 변수 와 불변 변수의 의미 - 기존 자바스크립트 문법은 변수 선언에 var 키워드를 사용했다. 가변 변수 - 값을 수정할 수 있는 변수 - let 키워드 - 읽거나 수정할 수 있음 - 재선언 X , 재할당 O let jin = "유진"; jin = "yujin" console.log(jin) => yujin ... let jin = "유진"; let jin = "yujin" console.log(jin) => error 불변 변수 - 값을 수정할 수 없는 변수 - const 키워드 - 읽기만 가능함 - 재선언 X, 재할당 X const jin = "유진" console.log(jin) => 유진 ... const j.. [ES6 문법] 전개 연산자 (spread operator) Do it! 리액트 프로그래밍 정석 책을 보면서 공부한 내용을 정리하는 글입니다. 전개 연산자란 - 나열형 자료를 추출하거나 연결할 때 사용하는 문법 - 배열이나 객체, 변수명 앞에 마침표 세 개(...) 를 입력하는게 특징 - 배열, 객체, 함수 인자 표현식([].{},()) 안에서만 사용해야함 이전 배열 문법 예제 1. 배열의 각 요소를 추출하여 새로운 배열을 만듬 const array1 = ['one', 'two']; const array2 = ['three', 'four']; const combined = [array1[0], array1[1], array2[0], array2[1]]; console.log(combined) 2. concat () 함수로 두 배열을 합치기 const array1 .. 이전 1 2 3 다음
