# redux

325개의 포스트
post-thumbnail

리액트 Life cycle 과 Redux & JWT 기반의 사용자 인증에 대한 고찰

최근 리액트와 Redux를 이용한 사이드 프로젝트를 진행하다가 좋은 아이디어가 생겨서 프로젝트의 전반적인 구조를 바꾸게되면서 사용자 인증 관련 로직들 또한 재구성해야 했고, 그 과정에서 겪었던 여러가지 문제들과 새로 배웠던 것들을 기록해보려한다. API를 사용하는 웹

약 15시간 전
·
0개의 댓글
post-thumbnail

Redux 예제 - 장바구니

컴포넌트간 값의 전달을 props 로만 하다보면 복잡도가 상승하여 머리가 지끈해지게 됩니다. 이럴 때 redux 를 도입하면 이러한 복잡성을 해결핼 수 있습니다. 작업 파일 Redux 를 공부하기 위해 간단한 예제를 만들었습니다. 상품을 장바구니에 담으면 nav 바

4일 전
·
0개의 댓글
post-thumbnail

redux-saga 흐름

redux saga 는 redux 에서 API의 데이터를 받아와서 store 에 등록할 때 주로 쓰인다. 물론 saga를 안쓰고 API 의 데이터를 가져와서 저장할 수 있긴 하지만, 둘다 경험해본 결과 saga 를 쓰는 것이 코드가 더 깔끔하게 정리되고, 속도가 더 빠

5일 전
·
0개의 댓글

리덕스 실습 (1)

이론적으로 알고 있지만 코드로 구현해보지 못했던 리덕스.리덕스를 실제로 코드로 쳐보기 위해서 여러 가지 실습을 해보려고 한다.첫 번째로 벨로퍼트의 카운터 만들기 실습을 해봤다.실습을 하며 기억하고 싶은 내용을 간단하게 정리한다.src 디렉토리 내부에 아래의 디렉토리들을

6일 전
·
0개의 댓글
post-thumbnail

Redux_2

아직 익숙하지 않은 리덕스. 다시 정리한 것을 기록해보자! 리덕스는 state를 관리한다!

6일 전
·
0개의 댓글
post-thumbnail

Redux

http://dobbit.github.io/reduxVuex와 같은 중앙 집중형 저장소이다. 프로젝트의 규모가 크고 복잡해지면 컴포넌트의 상태(state)를 관리하기가 힘들다. 왜냐하면, 트리 구조이기때문에 멀리 있는 컴포넌트에 값을 전달하려면 상위 루트(공통

7일 전
·
0개의 댓글
post-thumbnail

React 최적화 - buffer를 활용하여 상태 갱신 줄이기

업비트 리랜더링업비트 클론 프로젝트를 진행하기 전엔 최적화에 쓰는 기술은 React.memo나 useCallback 정도를 많이 사용했다. 그리고 최적화를 하면서도 최적화를 하나 안하나 웹 성능 향상이 크게 체감되지 않아서 성능이 좋아졌겠거니 하며 사용했었다.그런데 업

2020년 11월 18일
·
2개의 댓글

til - redux, redux-saga, createAction

이번 시간에는 내가 만들었던 어때시네마에서 사용한 기술인 redux에 대해서 정리하려 한다. 그럼 먼저 redux가 뭔지 부터 살펴보도록 한다.이걸 알아 보기 위해 일단 redux의 홈페이지로 갔다. 어떤 라이브러리든 메인 홈페이지에 가면 이게 뭔지 정의해두기 마련이지

2020년 11월 18일
·
0개의 댓글
post-thumbnail

[TIL] 상태관리, Local과 Store

누군가에게 이런 얘기를 들었던 적이 있다. React / Redux를 사용하면서 onChange같은건 하나 만들어놓고 가져와서 계속 사용할 수 있는거 아니야? 라고 생각했었다.React state는 컴포넌트 지역에서 저장되는 값으로 하위 컴포넌트에 props를 활용하여

2020년 11월 18일
·
0개의 댓글

TIL] React-Redux란?

Redux란? 이다. redux를 사용하면 모든 것은 root, 즉 경로로 data 교환이 일어난다. (자신의 state/props가 변경될 때) Redux의 3가지 사용원칙 전체의 상태값은 1개의 JavaScript 객체로 표현돼야 한다. 상탯값은 읽기 전

2020년 11월 15일
·
0개의 댓글
post-thumbnail

원티드 클론 프로젝트 후기

https://youtu.be/--cqt9fAI9wWanted 클론 프로젝트를 시작하기 전에 다짐했던 것이 두가지 있다. 첫째는 Back-End와 소통을 잘하자! 였다. 그래서 기능을 구현하기에 앞서서 어떤식으로 BE와 데이터를 주고 받을지 이야기를 많이 나눴

2020년 11월 15일
·
0개의 댓글

[ Redux ]

리덕스ReduxRedux는 JS 앱을 위한 예측 가능한 상태 컨테이너를 말한다.서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도와준다. '굳이' 리덕스를 사용해야하는 이유 : 멀리 떨어진 컴포넌트끼리 상태값을 교환할 때 복

2020년 11월 15일
·
0개의 댓글
post-thumbnail

[TIL] ReactJS 라우트와 리덕스

Route라우팅을 통하여 리액트 프로젝트에서의 페이지 전환을 주로 진행한다라우트 내에는 History, match , location등을 활용하여 라우트를 사용한다match 같은 경우는 랜더링이 된 컴포넌트 내에서의 정보를 보여준다.location.goBack, loc

2020년 11월 14일
·
0개의 댓글
post-thumbnail

[사이드 프로젝트] 리액트에서 페이스북 로그인 구현 하기

카카오 로그인 기능에 이어서 페이스북 로그인 기능도 추가했다. 페이스북 로그인 기능 또한 리액트용 라이브러리를 사용하면 빠르게 구현할 수 있었고,클라이언트에 컴포넌트 추가 이후의 후처리는 카카오 로그인 때문에 수정해 뒀던 서버 단의 로그인 관련 API를 그대로 사용하면

2020년 11월 14일
·
0개의 댓글
post-thumbnail

Redux 및 미들웨어 Redux-saga 기본 정리 및 적용

Redux와 미들웨어 Redux-saga에 대해 알아보고 간단하게 적용해보기

2020년 11월 13일
·
0개의 댓글
post-thumbnail

내가 이해 하려고 정리한 리액트 리덕스

더이상 미룰 수 없어 정리한 리덕스... 8ㅅ8

2020년 11월 13일
·
0개의 댓글
post-thumbnail

Redux-Saga를 통한 비동기 상태 관리

Redux는 리액트의 전역 상태를 관리해주는 라이브러리이다. React로 개발을 하다보면 수 많은 상태 관리의 늪에 빠지게 된다. 예를 들면 다양한 컴포넌트 사이에서 동일하게 이용되는 상태들을 관리할 때 useState로 정해진 상태들을 props로 자식 컴포넌트에 내

2020년 11월 13일
·
0개의 댓글

TIL6

https://hokeydokey.tistory.com/75 https://medium.com/@ca3rot/%EC%95%84%EB%A7%88-%EC%9D%B4%EA%B2%8C-%EC%A0%9C%EC%9D%BC-%EC%9D%B4%ED%95%B4%ED%95%98%EA%

2020년 11월 13일
·
0개의 댓글
post-thumbnail

[사이드 프로젝트] 리액트에서 카카오 로그인 구현 하기

진행중인 사이드 프로젝트 'Tindux'에 소셜 로그인 기능을 추가했다. 리액트 관련 라이브러리와 카카오 개발자 사이트의 공식문서 덕분에 카카오 API를 통한 카카오계정 인증까지는 빠르게 구현 했지만, 인증 후 사이드 프로젝트 앱 의 계정 및 JWT 인증 시스템과 어떻

2020년 11월 12일
·
0개의 댓글