반응형 react11 [React] React에서 persist사용하기 (react-persist) 우선 persist는 redux를 사용할 때 새로고침을 해도 데이터를 유지하기 위해서 사용되는데 사용하기 위해서는 아래와 같이 우선 설치부터 시작해주자 ! yarn add react-persist 설치를 한 후엔 우선 redux의 store를 만들어준 부분에 가서 아래와 같이 만들어 준다. import { configureStore } from "@reduxjs/toolkit"; import storage from "redux-persist/lib/storage/session"; import { combineReducers } from "@reduxjs/toolkit"; import { persistReducer } from "redux-persist"; ... const persistConfig = {.. 2022. 6. 10. [React] input의 useState를 하나로 통합해서 관리할 때 에러 const [inputs, setInputs] = useState({ title: "하나둘", subTitle: "", }); const { title, subTitle } = inputs; const onChange = (e) => { const { value, title } = e.target; setInputs({ ...inputs, [title]: value, }); }; 이렇게 해서 여러가지 input을 통합으로 관리하고 아래 onChange로 수정을 하려고 했는데 이런식으로 오류가 나는 것이었다!! 이부분은 원래 이렇게 쓰던 부분에서 value를 defaultValue로 바꿔주면 에러가 뜨지 않고 사용가능하다. 처음에 당황했는데 생각보다 쉬운문제라서 다행이다 ! 2022. 5. 6. [React] Mock data 활용법 2 저번에는 json-server를 이용한 mock data였다면 이번엔 엄청나게 간단하게 js로 만들어서 불러와서 사용해주는 방법이다. 차이가 있다면 json-server를 이용해서 데이터를 만들어주게 되면 fetch나 axios를 사용해서 직접 불러서 뿌려줄 수가 있겠지만 다른 작업을 하기 위해 필요한 데이터만 부르기에는 이 방법이 더 간단한 것 같아서 시작해보았다. 예를들어 initailData를 만들어 준 후에 const initailData = { tasks:{ 'task-1': {id: 'task-1', content: "하나둘"}, 'task-2': {id: 'task-2', content: "셋넷"}, 'task-3': {id: 'task-3', content: "다섯"}, 'task-4': .. 2022. 5. 4. [React] Mock data 활용법 데이터로 확인을 해보고 싶은데 어떤 방법이 좋을까 고민하다가 원래는 JS로 만들까? 잠깐 고민했는데 이번만 쓸 것도 아니고 다음에 이런일이 있을때에도 편하게 만들 수 있게 json-server를 사용하기로 하였다!! https://www.npmjs.com/package/json-server json-server Get a full fake REST API with zero coding in less than 30 seconds. Latest version: 0.17.0, last published: 7 months ago. Start using json-server in your project by running `npm i json-server`. There are 267 other projects i.. 2022. 5. 3. [React/ESLint] ESLint: Static HTML elements with event handlers require a role. 오류수정 이러한 오류를 발견하면 이런식으로 오류가 나게 된다 우선 X를 누르면 그냥 계속 진행은 가능하나 찝찝하다 이렇게 aira-hidden="true"를 넣어주면 오류가 사라지게 된다. 출처 https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/click-events-have-key-events.md GitHub - jsx-eslint/eslint-plugin-jsx-a11y: Static AST checker for a11y rules on JSX elements. Static AST checker for a11y rules on JSX elements. - GitHub - jsx-eslint/eslint-plugin-jsx-a1.. 2022. 4. 28. [React/ typescript] eslint, prettier 설정하기 수많은 오류가 엄청 많이 났었다 ㅠ 우선 오류를 다 찾아보고 최대한 오류 안나는 부분까지 고친 부분인데 이게 우선 오늘의 내가 최선이다 !! #npm npm install eslint@^7.2.0 eslint-plugin-import@^2.22.1 --save-dev npm install eslint-plugin-jsx-a11y@^6.4.1 eslint-plugin-react@^7.21.5 --save-dev npm install eslint-plugin-react-hooks@^4 eslint-config-prettier --save-dev npm install eslint-plugin-prettier eslint-config-airbnb prettier --save-dev npm install @typ.. 2022. 4. 21. 이전 1 2 다음
