코딩연습장

오늘은 VIEW를 좀 더 수정하고, 잘못 설정되어있던 수정버튼의 용도를 고쳤다. 수정버튼을 누르면 특정 div가 보이고, 원래 보이던 div는 안보이도록 해서 댓글을 수정할 수 있는 공간이 나타나도록 했다. 물론 아직 axios와 json server를 사용하지 못해서 기능구현은 아직 멀었지만, 그래도 뭔가 강의를 듣고 정리를 해보니까 어느정도 감이 잡히는 것 같다. 어렵긴하지만 뭐 매주 어려웠으니 이젠 그러려니 한다. 일요일에는 남은 thunk, optimizing, customhook, s3 서버배포를 마무리하고, 시간이남는다면 팀과제 프로젝트에서 기능까지 어느정도 만들고 싶다. 끝

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..

리덕스 툴킷 설치 yarn add react-redux @reduxjs/toolkit 툴킷 리듀서 예시 // src/redux/modules/counterSlice.js import { createSlice } from "@reduxjs/toolkit"; const initialState = { number: 0, }; const counterSlice = createSlice({ name: "counter", initialState, reducers: { addNumber: (state, action) => { state.number = state.number + action.payload; }, minusNumber: (state, action) => { state.number = state.numb..

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..

오늘 리액트 심화주차가 시작됐다. 첫날은 SA를 작성하고 역할을 분담하고, API명세서를 작성하고, 기초적인 View를 만들어두었다. 강의도 별로 못들었다. 코로나검사를 받느라 몇시간을날렸고, 상태도 좋지않아서 집중도 잘 안됐다. 아마도 이번주는 힘든 한 주 가 될 것 같다. 오늘 협업을 하면서 처음으로 브랜치를 나누어봤다. 브랜치를 나눠 자신이 작업을 하고, 그걸 main에 merge하는 형식으로 진행했는데, 해본적이 없던 거라 너무 어려웠다. 그리고 github desktop을 사용했었는데, 이런 걸 어떻게 해야 할 지를 몰라서 내 브랜치에 push하는 용도로만 사용하고, 터미널에서 git remote update, git pull origin main으로 메인을 pull해오고, 깃헙 웹사이트에서 직..

오늘은 주특기 숙련주차 시험을 봤다. 문제는 개인과제에서 구현한 Todo리스트 추가, 제거, 변경, 상세보기페이지 기능구현이었다. 직접 개인과제에서 작성한 코드들이 있던 터라 문제에서 원하는 방향으로 풀지 못한 것 같다. 특히 상세보기페이지에서 useEffect를 사용해서 리듀서에서 action에대한 state를 가져오고, 그 state를 보여주는 걸 했어야 했는데 하지 못했다. useEffect를 사용하지 않다보니 생각도 안나서 그냥 과제에 했던대로 find를 사용하여 컴포넌트자체에서 useSelector을 사용해 특정 요소를 찾는 형식으로 풀었다. 끝