노력하는 개발자 노력하는 개발자

react

• React/moment 사용 탐방

  Language/React 2022. 10. 21. 11:44

  앞으로 자주쓸것 같기도 하고 한번에 분석 끝내놓고 나중에 찾아보는 시간을 줄이기 위해서 작성해 둔다. module 추가 $ yarn add moment https://yarnpkg.com/package/moment https://yarnpkg.com/package/moment Fast, reliable, and secure dependency management. yarnpkg.com 기본 사용 방법 import moment from 'moment'; ... console.log(moment().format('YYYYMMDD')); console.log(moment().subtract(1, 'days').endOf('day')); ... 예시) diff 예시 const diffDaysToText = (c..

  Read More
• React/memory leak - componentWillUnmount Event 제거 이슈

  Language/React 2022. 10. 19. 11:08

  class Component에서 resize event를 사용하였는데 componentWillUnmount에서 제거해 주어도 메모리 누수가 발생하여 분석 및 처리 내용이다. Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. 원인 분석 addEventListener/removeEventListener에 동일한 매개변수와 함수를 전달하여야 하는데 t..

  Read More
• React/createContext, useContext 사용하기

  Language/React 2022. 10. 12. 16:56

  Class Component -> createContext const MyContext = React.createContext(); class MyComponent extends Component { const [user, setUser] = useState(null); render() { const propsMy = { ... isMobile: () => { return this.isMobile }, ... }; return ( ... ... ); } }; export default MyComponent; Class Component -> useContext class UserComponent extends Component { static contextType = MyContext; state = {..

  Read More
• 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..

  Read More
• 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..

  Read More
• 10. React/Jwt 연동 (access token, refresh token)

  Project/React+Java 2022. 8. 19. 18:15

  https://github.com/dchkang83/project-board GitHub - dchkang83/project-board Contribute to dchkang83/project-board development by creating an account on GitHub. github.com 아래와 같이 jwt의 access token 및 refresh token을 활용한 인증까지 설정한다. https://dchkang83.tistory.com/42 React/Jwt 연동 (access token, refresh token) https://github.com/dchkang83/project-board GitHub - dchkang83/project-board Contribute to dchk..

  Read More
• 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 및..

  Read More
• React/nth-check - Dependabot cannot update nth-check to a non-vulnerable version

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

  Read More