IT_susu

블로그 이전 https://velog.io/@susu1991/%EC%9D%B4%EC%A0%84%EC%9E%90%EB%A3%8C%EB%B0%B1%EC%97%85-useEffect

ES6에서 도입된 제너레이터(Generator) 함수는 이터러블을 생성하는 함수입니다. 또한 제너레이터 함수는 비동기 처리에 유용하게 사용됩니다.

리덕스 미들웨어의 하나인 리덕스 사가. 리덕스 미들웨어는 dispatch()메소드를 통해 store로 가고 있는 액션을 가로채는 코드. action에 대한 listener이다.

redux를 사용하기 위해 설치할 것들 redux: 리덕스 모듈 react-redux: 리액트 컴포넌트에서 리덕스를 사용하기위한 유용한 도구들이 들어가있습니다. redux-actions: 이 라이브러리를 꼭 설치 할 필요는 없습니다. 단, 알아두면 굉장히 유용합니다. yarn add redux react-redux redux-actions 1. 모듈 만들기 모듈이란 액션, 액션생성함수, 미들웨어, 초깃값, 리듀서함수가 들어있는 파일 1.1 액션타입 정의 // modules/counter.js const INCREASE = 'counter/INCREASE'; 1.2 액션 생성 함수 만들기 // modules/todos.js export const changeInput = (input) => ({ type:..

1. 리덕스란? 리덕스는 상태(state) 관리 라이브러리입니다. 상태들을 전역적으로 만들어서 여기저기서 동일하게 사용가능하도록 해줍니다. 2. 전역 상태관리가 필요한 이유 1) 상태의 전역 관리 리액트는 무조건 부모에서 자식으로 흐르는 단방향으로 진행되며, 그러기 위해서 해당 컴포넌트에서 사용하지 않는 값이라도 자식에게 전달하기 위해 작성해야 하는 상황이 발생합니다. 이는 그 것의 이름이라도 하나 바꾸려면 그 값이 통과하는 모든 곳에서 바꾸어야 하는 매우 비생산적인 활동이 일어나고, 실수할 가능성도 매우 높아집니다. 2) 기능의 재사용성 화면에서 컴포넌트를 만들어서 ui를 재사용하는 것과 같이 state와 연관된 기능들을 재사용 가능하게 되어 활용도가 높아집니다. 3. 사전 개념 리덕스를 사용하기 위해..

useState는 함수형 컴포넌트에서 상태관리를 할 수 있도록 제공하는 훅입니다. class example class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return ( You clicked {this.state.count} times this.setState({ count: this.state.count + 1 })}> Click me ); } } hook example import React, { useState } from 'react'; function Example() { // 새로운 state 변수를 선언하고, count라 부르겠습니다...

이전했습니다. https://velog.io/@susu1991/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC

axios란? http client library. XHR을 이용한 HTTP 요청을 Promise 기반으로 처리합니다. 즉, 우리가 XHR을 다루지 않고도 ajax 호출을 가능하게 해줍니다. fetch API보다 Axios가 더 좋은 점은 아래와 같습니다. 1. 구형 브라우저 지원(IE8~) 2. 요청 중단 가능 3. 응답시간 초과 설정방법 있음. 4. CSRF 보호 기능 내장. 5. JSON 데이터 자동변환 6. 브라우저 뿐만 아니라 Node.js 사용 가능 1. 요청 1-1. 합쳐서 아래와 같이 기술 가능. axios({ url: 'https://test/api/cafe/list/today', method: 'get', data: { foo: 'diary' } }); url : 요청하는 주소 meth..

1. 프로미스란? http 통신의 결과를 우리 입맛에 맞게 처리할 때 비동기 처리를 위한 패턴방식중에 하나. es6에서 비동기 처리를 위한 패턴으로 도입하였으며 기존 콜백 패턴이 가진 단점을 보완하고 비동기 처리 시점을 명확하게 표현합니다. promise는 비동기식 작업의 최종 완료 또는 실패를 나타내는 객체. 2. 배경 기존 비동기 처리를 위한 패턴의 불편함. 2.1 콜백 헬 비동기로 처리를 하게되면 동기로 처리해야하는, 즉 앞선 처리의 결과값으로 뒤에 처리를 해야할 때 처리순서를 보장할 수 없기에 콜백패턴을 사용한다. 그런데 이게 많아질수록 중첩이 많이 되고 복잡도가 올라가게 된다. 코드는 위에서 아래로 보는데 왼쪽에서 오른쪽으로 읽게되어 가독성도 많이 떨어진다. 따라서 아래 블로그와 같은 콜백헬에 ..

1. Ajax Asynchronous JavaScript and XML은 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 통신방식입니다. 일반 서버통신과의 차이는 페이지의 일부만 갱신할 수 있어 빠른 퍼포먼스와 부드러운 화면 표시효과를 기대할 수 있습니다. 1-1. 비동기란? 컴퓨터 프로그래밍에서 메인 프로그램의 플로우에 독립적인 이벤트의 발생과 그 이벤트들을 다루는 방법을 의미합니다. 즉, 병렬적으로 코드를 진행하는 것을 말합니다. 하지만 자바스크립트는 단일 쓰레드 기반이기 때문에 병렬적으로 수행할 수가 없습니다. 그래서 I/O모델을 통해 비동기 프로그래밍을 수행합니다. I/O작업은 병렬적으로 Ajax, websocket 연결을 통해 데이터를 가져오는 작업을 할 수 있는데..