코딩연습장

import styled from 'styled-components'; function App() { return ( {/* styledComponents에 props내려주기 */} ); } const Father = styled.div` display: flex; `; const Box = styled.div` width: 100px; height: 100px; //내려받은 props로 style 설정하기 background-color: ${({ bgColor }) => bgColor}; `; //타 styledComponents를 상속하고, 새로운 styled을 입력하기 const Circle = styled(Box)` border-radius: 50px; `; export default App; i..

확실히 쓰면서 이해하니까 어지러운 와중에도 머리속에 들어오는 것 같다. 사전 설정 1. json-server설치 및 서버가동 (db.json) { "todos": [] } 2. Slice로 todos 모듈 추가 구현 (이전 챕터에서 작성했던 todos 모듈 뼈대) // src/redux/modules/todosSlice.js import { createSlice } from "@reduxjs/toolkit"; const initialState = { todos: [], }; export const todosSlice = createSlice({ name: "todos", initialState, reducers: {}, }); export const {} = todosSlice.actions; expor..

안그래도 코로나 걸려서 정신이 없는데 json서버니 axios니 thunk니 나를 괴롭힌다. 머리에 들어오질 않고, 민들레 홀씨 퍼지는 것 마냥 날아가버려서 좀 정리해보려고한다. 리덕스에서 dispatch를 하면 action이 리듀서로 전달되고, 리듀서는 새로운 state를 반환합니다. 근데 미들웨어를 사용하면 이 과정 사이에 우리가 하고 싶은 작업들을 넣어서 할 수 있습니다. 만약 counter프로그램에서 더하기 버튼을 클릭했을 때 바로 +1을 더하지않고 3초를 기다렸다가 +1이 되도록 구현하려면 미들웨어를 사용하지 않고서는 구현할 수 없습니다. 왜냐하면 dispatch가 되자마자 바로 action이 리듀서로 달려가 새로운 state를 반환해버리기 때문입니다. 즉 여기서 '3초를 기다리는 작업'을 미들..

Axios 인스턴스 //만들기 axios.create([config]) //예시 const instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'} }); Axios 인터셉터 then과 catch로 처리되기 전에 요청과 응답을 가로챌수 있습니다. axios.interceptors.request.use(function (config) { //요청이 전달되기 전에 작업 수행 return config; }, function (error) { //요청 오류가 있는 작업 수행 return Promise.reject(error); }); //응답 인터셉터 추..

Axios란 node.js와 브라우저를 위한 promise기반 http클라이언트 입니다. 쉽게말해 http를 이용해 서버와 통신하기위해 사용하는 패키지입니다. json server 데이터를 아래와 같이 설정한다. { "todos": [ { "id": "1", "title": "react" } ] } 먼저 axios get에 대해 보자. get는 서버의 데이터를 조회할 때 사용합니다. // src/App.js import React, { useEffect, useState } from "react"; import axios from "axios"; // axios import 합니다. const App = () => { const [todos, setTodos] = useState(null); // axi..

json server란 간단한 DB와 API서버를 생성해주는 패키지입니다. 백엔드 개발에서 실제 DB와 API Server가 구축될 때까지 프론트엔드 개발에 임시적으로 사용할 mock data를 생성하기위해 사용합니다. 이를 통해 FE에서는 BE가 하는 작업을 기다리지않고, FE의 로직과 화면을 구현할 수 있어 효율적으로 협업이 가능합니다. json server 패키지 설치 yarn add json-server 서버실행 yarn json-server --watch db.json --port 3001 폴더구조 json서버를 구동하는 명령어와 리액트를 구동하는 명령어 둘다 사용한 후 db.json을 수정하고 브라우저에서 확인한다. db.json에 아래와같이 작성하고, localhost:3001/todos에 ..

객체의 불변성을 지키는 것을 쉽게 도와주는 라이브러리이다. 보통 추가, 제거, 변경 등 몇가지 일을 할 때 전개연산자...을 사용해서 불변성을 지키는데, immer이라는 라이브러리를 사용하면 훨씬 쉽게 할 수 있다. 아래는 추가와 변경의 간단한 예제이다. import produce from 'immer' const baseState = [ { todo: "Learn typescript", done: true, }, { todo: "Try immer", done: false, }, ]; const nextState = produce(baseState, draftState => { draftState.push({todo: "Tweet about it"}); draftState[0].done : true; }..

Flux로의 카툰 안내서 원문: https://medium.com/code-cartoons/a-cartoon-guide-to-flux-6157355ab207 Flux… bestalign.github.io Flux와 Redux 이 글에서는 Facebook에서 React와 함께 소개한 Flux 아키텍처에 대해 알아보고 Flux를 구현한 Redux 라이브러리를 살펴본 후 이를 적용한 간단한 React 애플리케이션을 작성해보겠다. 본문에 사용된 코 taegon.kim

리덕스 툴킷은 전에 사용한 리덕스를 개량한 것이다. ducks패턴의 요소들이 코드의 양을 늘리는 불만이 생겨, 코드는 적게, 사용은 편하게 하기위한 기능들을 흡수한 것이 리덕스 툴킷이다. 리덕스와 다른 새로운 것이아닌, 코드를 줄이기위한 API가 추가된 것이다. 컴포넌트에서 useSelector을 사용하는것도 똑같다. 모듈파일과 스토어파일의 차이점만 기억하면 된다. 툴킷 설치하기 yarn add react-redux @reduxjs/toolkit 기존의 리덕스 // 일반 리덕스 예시 코드 // Action Value const ADD_NUMBER = "ADD_NUMBER"; const MINUS_NUMBER = "MINUS_NUMBER"; // Action Creator export const addNu..

HTTP : 텍스트 기반의 통신규약으로 인터넷에서 데이터를 주고받을 수 있는 프로토콜이다. 규약을 정해두었기 때문에 모든 프로그램이 이 규약에 맞춰 개발해서 서로 정보를 교환할 수 있게 되었다. HTTP 동작 : 클라이언트(사용자)가 브라우저를 통해서 어떤 서비스를 url을 통하거나 다른 방법으로 요청(request)하면 서버에서 해당 요청에 맞는 결과를 찾아 사용자에게 응답(response)하는 형태로 작동한다. 요청 : client >>> server 응답 : server >>> client HTML문서만이 HTTP통신을 위한 유일한 정보문서는 아니다. Plain text로부터 JSON 데이터 및 XML과 같은 형태의 정보도 주고 받을 수 있으며, 보통은 클라이언트ㅏㄱ 어떤 정보를 HTML형태로 받고..