| CORS 란 ? 브라우저에서 기본적으로 API를 요청 할 때 브라우저의 현재 주소와 API의 주소의 도메인이 일치해야만 데이터를 접근 할 수 있습니다. 만약 다른 API를 요청해서 사용 할 수 있게 해주려면 CORS 설정이 필요합니다. json-server 로 만든 서버의 경우에는 모든 도메인을 허용해주는 CORS 규칙이 적용되어있습니다. 하지만, Open API를 만드는게 아니라면 모든 도메인은 허용하면 안됩니다. webpack 개발 서버에서 제공하는 Proxy 기능을 사용하여 도메인을 사용해 봅시다. | Proxy 설정 웹팩 개발서버의 프록시를 사용하게 되면, 브라우저 API 를 요청 할 때 백엔드 Server에 직접적으로 요청을 하지 않고, 현재 개발 서버의 주소로 요청을 하게 됩니다. 그러면 ..
| redux-thunk redux-thunk는 리덕스에서 비동기 작업을 처리 할 때 가장 많이 사용하는 미들웨어입니다. 이 미들웨어를 사용하면 액션 객체가 아닌 함수를 디스패치 할 수 있습니다. 함수를 디스패치 할 때에는, 해당 함수에서 dispatch 와 getState 를 파라미터로 받아와야 합니다. 이런 함수를 만들어주는 함수를 thunk 라고 부릅니다. thunk 사용 예 const getComments = () => (dispatch, getState) =>{ //여기서는 action을 disaptch 할 수 있습니다. //또한 getState 를 이용하여 현재 상태로 조회가 가능합니다. const id = getState().post.activeId; //요청이 시작했으을 알리는 액션 dis..
| 리덕스 미들웨어 리덕스 미들웨어는 action을 dispatch 했을 때 reducer 에서 처리하기에 앞서 사전에 지정된 추가적인 작업을 실행할 수 있게 해줍니다. 즉, 중간역할 을 담당한다고 생각하시면 됩니다! 일반적으로 리덕스 미들웨어는 라이브러리를 설치하여 사용하며, 주로 비동기 작업을 처리 할 때 사용됩니다. 라이브러리의 종류로는 redux-thunk redux-saga redux-observable redux-promise-middleware 등이 있습니다. 이 중 자주 사용되는것은 redux-thunk 와 redux-saga 입니다. 흐름 액션 -> 미들웨어 -> 리듀서 -> 스토어 추가적은 작업의 종류 특정 조건에 따라 action 을 무시하게 만들 수 있습니다. 액션을 콘솔에 출력 O..
프로젝트에 리덕스를 적용하기 위해 리덕스 모듈을 만들어 보겠습니다. | 리덕스 모듈이란 ? 구성요소 액션타입 액션 생성함수 리듀서 위와 같이 리덕스 모듈을 사용하기 위해 총 3가지 항목이 존재합니다. 첫 번째 리덕스 모듈.js //액션 타입 만들기 //Ducks 패턴을 따를땐 액션의 이름에 접두사를 넣어주세요, // -> 다른 모듈과 액션 이름이 중복되는 것을 방지할 수 있습니다. const SET_DIFF = 'counter/SET_DIFF'; const INCREASE = 'counter/INCREASE'; const DECREASE = 'counter/DECREASE'; //액션 생성함수 만들기 export const setDiff = (diff) => ({ type: SET_DIFF, diff }..
리덕스를 사용하게 될 때 앞으로 접하게 될 keyword 입니다. | 1. Action 상태에 어떠한 변화가 필요하게 되면, action을 발생시킵니다. (= 하나의 객체) { type:"TOGGLE_VALUE" } 위와 같은 객체형태로 이루어져있습니다. 액션 객체는 type 필드를 필수적으로 갖고 있어야 하며, 그 이외 속성값들은 개발자가 마음대로 추가할 수 있습니다. 예를들어, { type:"ADD" ,data : { id : 0 ,text : "이런식으로 말이죠 " } } 위와 같은 방법으로 구성할 수 있습니다. | 2. 액션 생성함수 (Action Creator) 액션 생성함수는, 액션을 만드는 함수입니다. 단순히 파라미터를 받아와서 액션 객체 형태로 만들어줍니다. export funtion ad..
| Route 사용자가 요청하는 주소에 따라 다른 컴포넌트를 보여줘야할 때 Route 라는 컴포넌트를 사용합니다. 사용 위와 같은 방법으로 사용합니다. 하지만, import logo from './logo.svg'; import './App.css'; import { Route } from 'react-router-dom'; import Home from './Home'; import About from './About'; function App() { return ( ) } export default App; 위와 같은 코드를 작성하면 / 경로에서는 About 컴포넌트를 잘 보여주지만, /asd 경로로 들어가면 About 컴포넌트와 함께 보여집니다. 이유는, /asd 경로가 / 규칙과도 일치하기 때문에..
polished의 스타일 관련 유틸 함수 사용하기 Sass를 사용 할 때에는 lighten() OR darken() 과 같은 유팅 함수를 사용하여 색상에 변화를 줄 수 있었습니다. CSS in JS 에서도 비슷한 유팅 함수를 사용하고 싶다면 polished 라는 라이브러리를 사용하면 됩니다. polished 사용 $ yarn add polished ThemeProvider 사용 styled-components 로 만드는 모든 컴포넌트에서 조회하여 사용 할 수 있는 전역적인 값을 설정해보겠습니다. const AppBlock = styled.div` width : 512px; margin : 0 auto; margin-top : 4rem; border : 1px solid black; padding : 1r..
| 클래스형 컴포넌트 클래스형 컴포넌트는 함수형 컴포넌트보다 사용이 덜 합니다. 하지만 프로젝트의 유지보수를 위해 알아봅시다 ! 함수형Hello.js import React form 'react; function Hello ( { color, name, isCheck } ){ return ( { dispathc({ type : "start' }). }; 하지만 클래스형 컴포넌트에서는 render 함수 내부터에서 선언은 할 수 있기는 하지만, 일반적으로 그렇게 하지 않고 클래스 안에 커스텀 메서드를 선언합니다. class Example extends Component { Count(){ console.log("내부선언 메서드"); } } render(){ return ( 카운트 실행 } } export d..