Language/React
-
React/AntV G2plot Chart 적용Language/React 2022. 10. 12. 11:50
Module 추가 $ yarn add @antv/g2plot https://yarnpkg.com/package/@antv/g2plot https://yarnpkg.com/package/@antv/g2plot Fast, reliable, and secure dependency management. yarnpkg.com JSX Source Component base라서 ComponentDidMount 함수에서 적용 import { Pie } from '@antv/g2plot'; class UnitsDashboard extends Component { state = {} setPie = () => { const data = [ { type: '라벨1', value: 27 }, { type: '라벨2', val..
-
React/Swiper 적용Language/React 2022. 10. 12. 11:19
module 추가 $ yarn add swiper JSX Code // Import Swiper React components import { Swiper, SwiperSlide } from 'swiper/react'; import SwiperCore, { Navigation, Pagination } from "swiper"; // Styles must use direct files imports import 'swiper/swiper.scss'; // core Swiper import 'swiper/modules/navigation/navigation.scss'; // Navigation module import 'swiper/modules/pagination/pagination.scss'; // Pa..
-
React/Jwt 연동 (access token, refresh token)Language/React 2022. 8. 10. 23:34
https://github.com/dchkang83/project-board GitHub - dchkang83/project-board Contribute to dchkang83/project-board development by creating an account on GitHub. github.com redux-saga 및 axios도 활용해 보려다가 기본에 충실하고 너무 복잡하지 않기위해서 패스!! (이부분은 나중에라도 충분이 넣을수 있으니!) - access token 탈취 위험이 있어 Redux를 이용하여 store에 저장 - refresh token : 유효기간까지 설정할수 있는 localstorage가 아닌 Cookie에 저장 - refresh token을 통하여 refresh token 및..
-
React/nth-check - Dependabot cannot update nth-check to a non-vulnerable versionLanguage/React 2022. 8. 10. 23:12
react 프로젝트를 git에 push하니 We found potential security vulnerabilities in your dependencie 보안 오류가 떨어진다. 다른 처리 방법도 있는것 같은데 이방법이 제일 간단해 보여서 정리해 놓는다. 처리방법 yarn 최신 upgrade $ yarn upgrade --latest package.json 파일 resolutions 추가 "resolutions" :{ "nth-check":"2.0.1" } yarn 다시 설치 $ rm -rf node_modules yarn.lock package-lock.json $ yarn install git push 및 확인 - 참조 : https://stackoverflow.com/questions/712822..
-
React/redux & react-redux & redux-saga & etcLanguage/React 2022. 8. 4. 13:06
1. redux & react-redux & redux-saga 등 설치 $ yarn add react-router-dom $ yarn add redux react-redux redux-saga $ yarn add @reduxjs/toolkit query-string axios $ yarn add ramda 2. 주요소스 2.1 index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import { BrowserRouter as Router } from "react-router-dom"; import { Provider } from 'react-redux'; import store from '~/store' import ..
-
React/router & LayoutLanguage/React 2022. 8. 4. 11:49
1. react-router $ yarn add react-router-dom 2. 주요소스 정리 - index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import { BrowserRouter as Router } from "react-router-dom"; import App from '~/App' const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); - app.js import React from 'react'; import RootRoutes from '~/routes/RootRoutes'; const App = () ..
-
React/material-uiLanguage/React 2022. 8. 2. 16:01
1. material-ui $ yarn add @mui/material @emotion/react @emotion/styled $ yarn add @mui/icons-material $ yarn add @emotion/css (추가??) 2. 주요소스 정리 - SignIn.js import React from 'react'; import Avatar from '@mui/material/Avatar'; import Button from '@mui/material/Button'; import CssBaseline from '@mui/material/CssBaseline'; import TextField from '@mui/material/TextField'; import FormControlLabel fro..
-
React/TypeScript - 절대경로 지정Language/React 2022. 8. 2. 15:23
`~/` 에 대한 절대경로를 추가해 보자. 0. typescript 추가 # typescript 추가 $ yarn add --dev typescript @types/node @types/react @types/react-dom @types/jest 1. paths alias 설정 $ yarn add --dev react-app-rewired customize-cra 2. tsconfig.json { "extends": "./tsconfig.paths.json", "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext", ], "allowJs": true, "skipLibCheck": true, "esModuleIntero..