react36 리액트의 Switch는 언제 사용할까? 기본적인 라우터의 동작 방식 라우터에는 가 보통 많이 사용되며 와 를 통해서 라우팅을 구현하는 방식이다. 예를 들어, 홈페이지, 영화페이지, 리뷰페이지가 있다고 하자. 각각의 URL을 / , /movies , /reviews 라고 했을 때, 다음과 같이 구현할 수 있다. import React from 'react'; import { BrowserRouter as Router, Route } from 'react-router-dom'; const Routes = () => { return ( ); }; 3가지 컴포넌트가 있다는 가정하에, 위와 같이 path 속성을 통해서 각각의 컴포넌트가 렌더링 되는 URL이 정해진다. 그러나 여기서의 문제점은, 홈페이지에 들어갔을 때 /movies 와 /reviews .. 2021. 3. 17. 제너레이터(Generator) | Generator 란 ? 제너레이터의 핵심은 동시성 프로그래밍입니다. ( 동시성이란? 동시에 여러가지 일을 처리하는 것처럼 행동하는 것입니다. 병행과 병렬을 혼동하면 안됩니다. 병렬은 실제로 동시에 여러가지 일을 처리하는 것입니다. ) 동시성의 예로, javascript 는 싱글 스레드 입니다.( 이말은 ? 한 번에 한 가지 일 밖에 못 한다는 뜻 ) 하지만 실제로 javascript는 한 번에 여러 가지 일을 처리하는 것을 우리는 알고 있습니다. ex) ajax 요청을 한다고 해서 "응답이 올 때까지 시스템은 멈추지 않는다." 결론은 javascript 는 싱글 스레드이지만, event 루프를 통해 동시성 을 지원하고 있습니다. 제너레이터는 이터레이터에 의존하는 개념으로, 이터레이터를 사용해 자신의.. 2021. 2. 23. 리덕스 reselect 사용하기 reselect를 알기 전, Selector를 먼저 알아야합니다. | Selector란 ? state 에서 필요한 데이터를 가져오거나, 계산을 수행해서 원하는 형태의 데이터를 가져오는 역할을 말합니다. 왜 사용할까? selector는 Redux가 적은 양의 필요한 데이터만을 갖고 있게 data들의 연산을 도우며, state를 가져오는 컴포넌트들과 state의 구조 사이에 1개의 층(selector)를 두어 구조가 바뀌어도 연관된 모든 컴포넌트를 바꿀 필요 없이 selector 만 바꿔주면 성능이 향상되기 때문에 사용합니다. | reselect 란? selector 역할을 수행하면서 캐싱을 통해 동일한 계산을 방지해 성능을 향상시켜줍니다. 연산을 효율적으로 처리할 수 있게 도와주는 역할을 합니다. 즉, 새.. 2021. 2. 22. CORS와 Webpack DevSercer Proxy | CORS 란 ? 브라우저에서 기본적으로 API를 요청 할 때 브라우저의 현재 주소와 API의 주소의 도메인이 일치해야만 데이터를 접근 할 수 있습니다. 만약 다른 API를 요청해서 사용 할 수 있게 해주려면 CORS 설정이 필요합니다. json-server 로 만든 서버의 경우에는 모든 도메인을 허용해주는 CORS 규칙이 적용되어있습니다. 하지만, Open API를 만드는게 아니라면 모든 도메인은 허용하면 안됩니다. webpack 개발 서버에서 제공하는 Proxy 기능을 사용하여 도메인을 사용해 봅시다. | Proxy 설정 웹팩 개발서버의 프록시를 사용하게 되면, 브라우저 API 를 요청 할 때 백엔드 Server에 직접적으로 요청을 하지 않고, 현재 개발 서버의 주소로 요청을 하게 됩니다. 그러면 .. 2021. 2. 18. redux-thunk란? | redux-thunk redux-thunk는 리덕스에서 비동기 작업을 처리 할 때 가장 많이 사용하는 미들웨어입니다. 이 미들웨어를 사용하면 액션 객체가 아닌 함수를 디스패치 할 수 있습니다. 함수를 디스패치 할 때에는, 해당 함수에서 dispatch 와 getState 를 파라미터로 받아와야 합니다. 이런 함수를 만들어주는 함수를 thunk 라고 부릅니다. thunk 사용 예 const getComments = () => (dispatch, getState) =>{ //여기서는 action을 disaptch 할 수 있습니다. //또한 getState 를 이용하여 현재 상태로 조회가 가능합니다. const id = getState().post.activeId; //요청이 시작했으을 알리는 액션 dis.. 2021. 2. 18. 리덕스 미들웨어 | 리덕스 미들웨어 리덕스 미들웨어는 action을 dispatch 했을 때 reducer 에서 처리하기에 앞서 사전에 지정된 추가적인 작업을 실행할 수 있게 해줍니다. 즉, 중간역할 을 담당한다고 생각하시면 됩니다! 일반적으로 리덕스 미들웨어는 라이브러리를 설치하여 사용하며, 주로 비동기 작업을 처리 할 때 사용됩니다. 라이브러리의 종류로는 redux-thunk redux-saga redux-observable redux-promise-middleware 등이 있습니다. 이 중 자주 사용되는것은 redux-thunk 와 redux-saga 입니다. 흐름 액션 -> 미들웨어 -> 리듀서 -> 스토어 추가적은 작업의 종류 특정 조건에 따라 action 을 무시하게 만들 수 있습니다. 액션을 콘솔에 출력 O.. 2021. 2. 17. 이전 1 2 3 4 5 6 다음
