JavaScript (32) 썸네일형 리스트형 debounce 과 throttle 쓰로틀 (Throttle) 과 디바운스 (Debounce) - DOM 이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 JS의 이벤트를 제어(제한)하는 방법 디바운스 (Debounce) 배경지식 - 전자에서는 기계적인 접점을 가지는 스위치는 접점이 붙거나 떨어지는 순간에 바운싱 현상이 있다. 이 바운싱 현상은 접점이 붙거나 떨어지는 그 짧은 순간에 접점이 고속으로 여러번 on/off 되는 현상 이런 바운싱 현상을 방지하기 위한 것이 디바운싱 기법 - 이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술 (즉, 순차적 호출을 하나의 그룹으로 "그룹화" 할 수 있음) 연이어 호출되는 함수들 중 마지막 함수 (또는 제일 처음)만 호출하도록 하는 것 디바운스 (Debounce) .. [ES6] 라이브러리 의존성 관리 Do it! 리액트 프로그래밍 정석 책과 다른 책을 참고하며 공부한 내용을 정리하는 글입니다. 의존성 어떤 파일이나 코드가 다른 파일이나 코드를 필요로 하는 것을 뜻함 기존 자바스크립트의 라이브러리 의존성 관리 방법 기존 자바스크립트는 라이브러리나 모듈을 관리하는 방법이 매우 불편했음 1. script 와 같은 엘리먼트를 이용하여 관리 script.js 를 먼저 참조할 경우 정의되지 않는 함수를 참조하는 의존성 문제가 발생 ES6 라이브러리 의존성 관리 방법 1. import 구문 사용 script 엘리멘트 없이 연결된 파일 및 의존 파일을 먼저 모두 내려 받고 코드를 구동하는 방식 import MyModule from './MyModule.js'; //기본 import { ModuleName } fro.. [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 문법] 전개 연산자 (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 .. [3] 자바스크립트로 투두리스트(todo-list) 만들기 + localStorage에 대해서 자바스크립트로 투두리스트 (todo-list) 만들기 3편입니다. 완성본과 HTML 과 CSS 는 1편에서 확인해주세요 1편 https://qowbtm45.tistory.com/44 2편 https://qowbtm45.tistory.com/46 기능 설명 (3편) 1. 새로고침해도 데이터가 저장될 수 있도록 하기 2.데이터마다 id, content, status 값 저장하기 local Storage (로컬 스토리지)에 대해서 - 데이터를 사용자 로컬에 보존하는 방식 - 데이터를 저장, 덮어쓰기, 삭제 등 CRUD (Create, Read, Update, Delete를 앞글자를 따서 만든 단어)가 가능 - 자바스크립트로 조작하며, 모바일에서 사용이 가능함 local Storage (로컬 스토리지) 와 쿠키.. [2] 자바스크립트로 투두리스트(todo-list) 만들기 자바스크립트로 투두리스트 (todo-list) 만들기 2편입니다. 완성본과 HTML 과 CSS 는 1편에서 확인해주세요 1편 https://qowbtm45.tistory.com/44 기능 설명 (2편) 1. router 기능 구현 2.카테고리 클릭 시 카테고리에 맞는 주소로 이동하게 하기 라우팅 (routing)에 대해서 - 출발지에서 목적지까지의 경로를 결정하는 기능 - 일반적으로 사용자가 요청한 URL 또는 이벤트를 해석 => 새로운 페이지로 전환하기 위해 데이터를 서버에 요청하고 페이지를 전환하는 일련의 행위 - 애플리케이션의 라우팅 경우에는 사용자가 task 를 수행하기 위해 어떤 화면 (view) 에서 다른 화면으로 화면을 전환하는 내비게이션을 관리하기 위한 기능을 의미함 브라우저가 화면을 전환.. [1] 자바스크립트로 투두리스트(todo-list) 만들기 자바스크립트로 투두리스트 (todo-list) 만들기 1탄입니다. 강의를 보고 난 후 혼자 정리하는 느낌이라.. 조금 조잡하고 설명이 정확하지 않을 수 있습니다 HTML,CSS는 강의자료로 받았고, 기능만 구현했습니다. 어떻게 기능을 구현했는지를 보시는게 좋을 것 같습니다. (개발환경이 다를 것 같기에) 완성본 기능 설명 (1탄) 1. 할일 추가 2. 할일 수정 3. 할일 지우기 4. 할일 카테고리별로 필터링 HTML 과 CSS 강의 자료이기때문에, 참고용으로 보시라고 캡쳐본으로 올립니다 * 모듈 번들러는 rollup 을 사용했습니다. 커스텀 설정은 제 github 에 있습니다. 기초 작업 스크립트는 ES6 클래스 문법을 사용했습니다. ( 저도 아직 ES6 문법에 익숙치 않아서 기능 구현에 중점을 맞춰서.. 이전 1 2 3 4 다음
