활용 리액트 라우터의 인덱스 라우터 - IndexRoute는 Route 처럼 행동 하지만,해당 url을 자식이 아닌 부모인 path만 매치 시킴 - routes.js image.png 실행화면. PostIndex컴포넌트와 App 컴포넌트의 내용이 보여지고있음...

npm install save react-router@3.2 강의에서는 2.5버전을 사용하였는데, 현재는 3.2버전이상을 사용해주어야 func를 찾을수없다는 에러가 안남 리액트 라우터 요약 - 히스토리 url을 관찰하다가 필요하면 이를 업데이트, url이 바뀌면 리액트 라우터로 전달 - 리액트라우터 이를 받아 url에 기반하여 보여줄 컴포...

postAPI를 활용하여 get,post,delete 기능을 만듦 postAPI를 제대로 사용하기위해서postMan 를 활용함 get image.png - 색칠한 곳은 key의 값 - 밑줄 친 url은 postAPI 사이트 메인에 있는 get 주소를 복사해서 붙여넣은것 - 다 기입후 send 버튼 클릭 post image.p...

들어가기에 앞서 내가 보는 리덕스강좌는 옛버전이라 다소 구식적인 부분이있으니 주의.. ( 최신버전은 한글화가 안되있어..ㅠㅠ)

리덕스 준비하기 리덕스를 사용할 때 가장 많이 사용하는 패턴은 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트를 분리하는 것이다. 여기서 프레젠테이셔널 컴포넌트란 주로 상태 관리가 이루어지지 않고, 그저 props를 받아와서 화면에 보여주기만 하는 컴포넌트를 말한다. 컨테이너 컴포넌트는 리덕스와 연동도어 있는 컴포넌트로, 리덕스로부터 상태를 받아 오기도...

Today What I Learned Javascript를 배우고 있습니다. 매일 배운 것을 이해한만큼 정리해봅니다. 이번 주에 배운 내용 대방출 중입니다... * 1. URL Shortening Client Service Review 1. URL 축소 클라이언트 리뷰 - 이번 스프린트에서는 URL을 축소하는 bit.ly 유사 서비스를 구...

미들웨어를 사용하는 이유 리덕스에서 리듀서는 순수함수여야 하는 규칙이 있습니다. 지키지 않는다고 오류가 나는 것은 아니지만, state가 동일한지 여부를 따져서 리덕스가 동작하기 때문에 state를 만드는 리듀서 자체에 같은 인풋에 따른 같은 아웃풋 값을 보장할 수 없다면 불필요한 연산이 실행될 수 있습니다. 따라서 리듀서를 순수함수로 남겨두기 위해 red...

리듀서까지 만들었다면 이제 붙여서 확인해볼 수 있는 준비는 완료된 것입니다. 하나씩 해보도록 합시다 _ 잠깐, next.js를 사용하신다면.. 현재 next.js로 프로젝트를 만들면서 블로그 작성중이라 next.js에 대한 내용이 추가되네요. 이 시리즈에서 next.js를 사용하신다면 추가로 설치해야 할 게 있습니다.

'Redux'는 애플리케이션(application)의 'state'를 관리하는 자바스크립트의 오픈소스 라이브러리로, 유저 인터페이스(user interfaces)를 만들기 위해 보통 'React', 'Angular'와 함께 쓰인다. Q. 'context API'를 쓰는 것과 무슨 차이가 있을까? 1. '미들웨어'를 이용할 수 있다 - 특정 조건에...

redux .1 제가 만들고 있는 포트폴리오 페이지에 다크모드를 만드는 것으로 리덕스를 사용해 보겠습니다. 물론 작은 프로젝트라서 필요하다고 할수는 없지만 그래도 리덕스의 장점을 보여줄수 있는 예라고 생각합니다. 글로벌로 스테이트를 관리하고 어떤 컴포넌트에서든지 그 스테이트의 상태를 받아 상황에 맞게 랜더링을 해줄 수 있습니다. store cons...

1. 개요 스토어 안에는, 현재의 앱 상태와, 리듀서가 들어가있고, 추가적으로 몇가지 내장 함수들이 있습니다. 디스패치 (dispatch) store.dispatch(action) * 디스패치는 액션을 발생 시키는 것 이라고 이해하시면 됩니다. * dispatch 라는 함수에는 액션을 파라미터로 전달합니다. 그렇게 호출을 하면, 스토어는 리듀서 ...

1. 개념 redux-thunk는 리덕스에서 비동기 작업을 처리 할 때 가장 많이 사용하는 미들웨어입니다. 이 미들웨어를 사용하면 액션 객체가 아닌 함수를 디스패치 할 수 있습니다. 함수를 디스패치 할 때에는, 해당 함수에서 dispatch 와 getState 를 파라미터로 받아와주어야 합니다. 이 함수를 만들어주는 함수를 우리는 thunk 라고 부릅니다...

Redux란? Redux is a predictable state container for JavaScript applications. It helps you write applications that behave consistently, run in different environments(client, server, and native), and ar...

부스트캠프 4기 과정을 참여중인, Node.js와 Docker를 좋아하는 주니어 개발자입니다. 이 글은 러닝커브가 높은 Redux를 도입하지 않기 위해 hooks로 Redux의 개념을 따라해본 과정을 담고 있습니다. 이 글 에 저희 프로젝트가 어떤 것을 하고있는지 담고 있습니다. 간단하게 어떤 프로젝트인지 살펴보시려면 위의 글을 읽어보시는 것을 추천합니...