React-CSV-Download + React recoil 모든 코드는 github에 있습니다. react-csv를 선택한 이유 여러 라이브러리중 react-csv를 선택한 이유는 사용이 간편해보여서이다. react-csv의 마지막 업데이트는 2022년 1월이지만 지금도 문제없이 사용된다. react-csv 사용 Install npm install react-csv --save; Import import { CSVLink, CSVDownload } from "react-csv"; CSVLink : 클릭시 다운로드 CSVDownload : 마운트시 다운로드 보통 다운로드 버튼으로 구현을 하기 때문에 CSVLink만 사용할 것이다. Import 후 해당 컴포넌트를 사용하면 끝이다. Download me ;..

모든 코드는 Github에 저장되어 있습니다. 나는 리액트로 개발을 할때 redux밖에 사용하지 않았었다. Redux는 검증되어있는 느낌이었고 커뮤니티 풀도 Redux가 우세했기 때문에 처음에 Redux를 공부하여 Redux만 사용했다. 최근 React-query를 사용하여 서버데이터와 클라이언트 내부데이터의 상태관리를 나누는 방법으로 개발을 하고 있다. 그래서 내부 상태저장을 할때 상대적으로 코드가 적은 recoil에 관심을 가지게 되었고 redux와 recoil의 차이점을 알아보려고 한다. 1. Redux 기존 양방향 데이터 흐름 Meta(전 Facebook)는 상태관리 문제를 해결하기 위해 Flux 패턴을 만들어 양방향 데이터 흐름에서 벗어나 단방향으로만 데이터를 변경할 수 있도록 만들었다. Red..

i18n은 internationalization 의 약자로 i와 n사이에 18글자가 들어있기 때문에 i18n이라고 한다. i18n은 어플리케이션을 다양한 언어에 쉽게 적용할 수 있도록 하는 개발 프로세스이다. 각 특정 로케일에 대해 다시 개발을 할 필요 없이 전 세계 사용자가 동일한 어플리케이션을 사용할 수 있도록 한다. 예를 들면 홈페이지의 영문버전, 한글버전이 그 예이다. React에서는 이를 지원해주는 i18next라는 라이브러리가 있다. 1. i18n 세팅 src폴더에 아래와 같은 폴더들을 만들어준다. // i18n/index.js import i18n from "i18next"; import { initReactI18next } from "react-i18next"; import en from ..

1. /front 폴더에 react 설치 2. /backend 폴더에 서버를 설치 const express = require("express"); const app = express(); const server = app.listen(8000, () => { console.log("server start"); }); 3. 데이터 주고 받기 (1) cors 보안정책 cors 보안정책 때문에 하나의 브라우저에서 다른 도메인/포트의 서버로 요청하면 에러가 나타난다. 프론트와 백 두개의 서버를 동시에 실행하려면 cors로 접근을 허용해 줘야 한다. 이와 같이 하는 이유는 해킹과 보안문제 때문이다. 누구나 접근할수 있다면 데이터 전송을 가로채 보안에 문제가 생김 const cors = require("cors")..

1. 미들웨어를 사용해야 하는 이유 리덕스의 플로우차트 : UI -> Dispatch -> Action -> Store(Reducer)(state) -> UI 리덕스는 동기적으로 처리가 되는데 변경값이 있으면 바로 동작해서 API 같은 데이터를 불러올때 비동기 작업이 힘들다. API 데이터를 받은 이후에 작업을 해야하기 때문에 미들웨어를 사용해야 한다. 2. 미들웨어란 미들웨어는 양 쪽을 연결해주고 데이터를 주고 받을수 있도록 중간에서 매개 역할을 담당하는 소프트웨어다. 컴퓨터에 있는 프로세스들에게 어떤 서비스를 사용할수 있도록 연결해주는 소프트웨어를 말한다. 리덕스 미들웨어에는 saga, thunk 등이 있다. 그 중 thunk가 적용하기도 쉽고 많이 사용한다. 3. thunk thunk 참고 사이트 ..

GitHub - TeTedo/react_project Contribute to TeTedo/react_project development by creating an account on GitHub. github.com 기존 게시판에서 useState를 전부 Redux로 바꿨다. 기능도 추가했다. 수정하기, 삭제하기 기능 추가