리액트를 사용하다보면 주로 배열을 이용해 반복문을 돌린다.예를 들면이러한 경우다.당연히 가능하다. Object.keys를 이용하자.

리액트 - 페이지네이션 컴포넌트

리액트에서 타이머 기능을 추가하면서 setInterval을 써야했는데 원하는대로 동작하지 않았다.공부한 내용을 토대로 정리해보려고 한다.javascript와 달리 React에서는 state가 변하면 App이 re-rendering 되기 때문에 setInterval()함

UseRef? 자 우선 React에서 useRef hook을 어떻게 사용하는 지 살펴봅시다. 리액트 컴포넌트 내에서 useRef hook을 사용해 초기값 0을 넘겨주었습니다. 위 예시에서, useRef는 다음과 같은 객체를 return합니다. 이제 ref.cur

async는 function 앞에 위치합니다.function앞에 async를 붙이면 해당 함수는 항상 프로미스를 반환합니다.프로미스가 아닌 값을 반환하더라도 이행 상태의 프로미스(resolved promise)로 값을 감싸 이행된 프로미스가 반환되도록 합니다.아래 예시

HTML5의 Canvas는 오늘날 웹을 통해서 실현할 수 있는 그래픽의 수준을 크게 끌어올렸으나, 이를 구현하기 위해 사용하는 API는 복잡하고 어려운 편입니다.그런 측면에서 Fabric.js 라이브러리는 동일한 그래픽 결과물을 구현함에 있어 방법이 단순하고, 객체 집

비구조화 할당 (구조분해) 문법이란? 비구조화 할당 문법을 사용하면 다음과 같이 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언이 가능합니다.

화살표 함수는 인스턴스를 생성할 수 없으므로 prototype 프로퍼티가 없고 프로토타입도 생성하지 않는다.일반 함수는 중복된 매개변수 이름을 선언해도 에러가 발생하지 않는다.단, strict mode에서 중복된 매개변수 이름을 선언하면 에러가 발생한다.화살표 함수에서

Array.prototype.reduce() reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. 파라미터 callback function accumulator : accumulator는

sort() 메서드는 배열을 정렬한 후 그 배열을 반환하는 함수입니다.Array 객체의 sort() 메서드 구문입니다. compareFunction은 옵션입니다.sort() 메서드는 기본적으로 배열 안의 요소들을 오름차순(Ascending Order, ASC)으로 정렬

Virtua DOM을 이해하기 전에 우선 DOM에 대해서 알아보자.앞선 포스팅에서도 정리했지만 DOM(Document Object Model)은 문서 객체 모델이라고 하는데 결국은 브라우저에서 다룰 HTML 문서를 파싱하여 '문서의 구성요소들을 객체로 구조화하여 나타낸

preventDefault(), stopPropagaion()은 Event 인터페이스에서 제공하는 메서드 입니다. DOM 내에 위치한 요소들은 Event 인터페이스를 통해 이벤트 관련 다양한 속성과 메서드를 제공받아 이벤트를 수신 받고 받은 이벤트를 처리하는 코드를 실

사전적으로 불변성이란 값이나 상태를 변경할 수 없는 것을 의미합니다.이 의미만 놓고보면, 잘 이해가 되지 않을 수 있습니다. 하지만 프로그래밍에서 불변성의 진짜 의미는 '메모리 영역에서 값이 변하지 않는다' 라는 의미입니다.리액트에서 불변성을 지켜주는 이유는 리액트가

자바스크립트에서 얕은 복사, 깊은 복사란 '객체를 복사하는 방법'을 말한다.얕은 복사와 깊은 복사에 대해 이해하기 위해서는 먼저 자바스크립트의 데이터 타입에 대한 이해가 필요하다. 복사는 어떤 데이터 타입인지에 따라 다르게 진행되기 때문이다.자바스크립트에서 사용되는 데

웹개발을 할 때, AJAX라는 비동기적인 통신 방법을 통해 클라이언트 쪽에서 서버에 추가 정보를 요청하여 가져올 수 있게 합니다.fetch API는 이러한 AJAX 통신 기술의 일종으로 별도의 라이브러리를 추가하지 않더라도 최신 브라우저에 내장되어 있기 때문에, 함수를

JavaScript에서 Promise는 비동기 처리를 간편하게 처리할 수 있도록 도와주는 객체입니다.Promise는 주로 웹 서비스 구현 시 원활한 데이터 통신을 위해 활용됩니다. 서버에 데이터를 요청했을 때, 데이터를 모두 받아보기 전에 웹에 출력하려고 할 때 발생하

리액트 컴포넌트에서 동적인 값을 상태(state)라고 부른다.사용자 인터랙션을 통해 컴포넌트의 상태값이 동적으로 바뀔 경우에는 상태를 관리하는 것이 필요하다.React Hooks가 나오기 이전에는 상태값을 관리하기 위해 class 기반의 클래스 컴포넌트를 작성해야 했다

동기 방식은 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있다. 즉 A 작업이 모두 진행 될 때까지 B 작업은 대기해야 한다.비동기 방식은 반대로 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행할 수 있다. 즉 A 작업이 시작하면 동시에

swiper를 사용하려면 여러 방법이 존재합니다.실제 swiper js파일을 swiper github에서 다운 받아 삽입하는 방식프로젝트에 따라서 원하는 방식으로 공식 문서에서 제공하는 설치법에 따라 설치하시면 됩니다.https://swiperjs.com/ge

출처 : https://medium.com/@seohyoda/fabric-js-%EC%9E%85%EB%AC%B8-part-1-78dd390536cfHTML5의 Canvas는 오늘날 웹을 통해서 실현할 수 있는 그래픽의 수준을 크게 끌어올렸으나, 이를 구현하기