Front-end/React53 [React] 다국어 기능 적용하기 react-i18next 홈페이지에 버튼 클릭으로 다국어를 지원하는 코드입니다. 리액트 기반이며 라이브러리로 i18next 사용했습니다. 위 이미지처럼 클릭시 언어가 변경 됩니다. 폴더 구조 입니다. 😎 src > utiles > i18n > locales > en-US > index.js import page from './page.json' export default{ page } 😎 src > utiles > i18n > locales > en-US > page.json { "소개":"Intro", "인사말":"Greeting", "사업 소개":"BusinessInfo", "참여 기관":"Agency", "데이터":"Data", "안심":"Safe", "분석":"Analysis", "구역":"Zone", "마켓":"Mark.. 2022. 10. 5. [React-spinner] loading spinner 적용하기 axios interseptor 참고 git npm i react-spinners spiner적용 component를 하나 만들엉줍니다. - loading.js import React, { useEffect} from 'react' import { css } from "@emotion/react"; import BeatLoader from "react-spinners/BeatLoader"; const override = css` display: block; margin: 0 auto; border-color: rgba(255,255,255,0.7); border-width: 10px; `; const Loading = (props) => { const check = props.loading == null ? false : props.l.. 2022. 9. 27. [React] Canvas 사이즈에 맞춰 이미지의 원본 비율로 출력하기 const imgOnCanvas = (imageSrc) => { if (!canvasRef) return; const canvas = canvasRef.current; const ctx = canvasRef.current.getContext("2d"); setCanvas(canvas) setCtx(ctx); const image = new Image(); image.src =imageSrc image.onload = function() { console.log("-------------------------"); //입력 파일의 크기를 알아냄 let inW = image.width; let inH = image.height; console.log("[1]image 원본 - size",inW,inH); /.. 2022. 9. 23. [React] Canvas 레이아웃 2개 겹치기 제가 진행하는 개발코드는 하나의 캔버스엔 이미지를 출력해주고 그 위에 똑같은 사이즈의 캔버스에 클릭이벤트가 생성 됩니다. 캔버스 한개로 이벤트 생성 가능하나 클릭 이벤트시 활성화된 곳이 변경 되는 이벤트여서 캔버스의 리셋이 필요했습니다. canvas 2개 를 css로 간단하게 겹치기 가능합니다. onBboxCanvas(e)} > .leftBox{ position: relative; } .leftBox .canvas{ position: absolute; top:0px; left:0px; } 2022. 9. 23. React 리액트 초기 설정 네비 페이지화 기초 세팅 / 리액트 앱 생성 😎리액트 앱 생성 create-react-app my-app 터미널에서 리액트 앱을 생성 합니다. 매번 하는 실수지만 전 항상 npm create-react-app my-app npm을 앞에 붙여서 오류를 냅니다. 😎 App 실행 npm start 😎 App.js 정리 App.js 파일에 return 코드 싹 날리셔야합니다. 😎 네비 생성 App.js import React from "react"; //npm install react-router-dom --save import { BrowserRouter, Route, Link, Routes } from "react-router-dom"; import Home from "./view/home/Home"; import Main from "./view/ma.. 2022. 9. 22. [React] 암호화 AES CryptoJS 사용하여 암호화/복호화 하기 id값을 암호화시켜 url에 넣어 호출하는 예제 아이디값이 단순 숫자인 경우 보안에 상당히 취약함으로 암호화가 필요하다. 나는 암호화 = 리액트 / 복호화 = nestJS를 사용하였다. 😎 install npm i crypto-js 😎 import import CryptoJS from 'crypto-js'; 😎crypto.js import CryptoJS from 'crypto-js'; const secretKey = process.env.REACT_APP_AES_SECRETKEY //암호화 export const encrypt = (val) => { let text = val.toString(); const data = { id:text }; const encrypted = CryptoJS.AES.en.. 2022. 8. 30. [React] image 마우스 wheel 로 zoom In/Out 하기 (라이브러리 사용) react-zoom-pan-pinch 라이브러리 사용하여 스크롤로 이미지를 확대/축소 하는 기능 https://www.npmjs.com/package/react-zoom-pan-pinch 리액트로 이미지를 확대 축소하는 많은 라이브러리들이 있지만 비교적 사용이 쉽고 최근(대략 8개월) 전에 업그레이드도 진행된 편 (다른라이브러리들은 3-4년전 이 마지막 업데이트 현 리액트버전과 맞지 않은 경우도 있었다) 😎install npm i react-zoom-pan-pinch 😎 import import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"; 😎 code 이미지를 감싸주기만 하면 줌 인/아웃 가능 https://prc5.gith.. 2022. 8. 30. [react-chartjs-2] 누적 그래프 + 라인 그래프 합치기 리액트 차트를 만들면서 가장 오류/버그 적게 사용한 차트 라이브러리는 react-chartjs-2 react-chartjs-2 의 단점은 공식사이트의 정보가 다소 부족하고 ( 다른 라이브러리도 동일) 화려한 애니메이션이 기본으로 제공되지 않다. 그러나 충분히(많이 찾아보고) 커스텀 가능 하다 react-chartjs-2 라이브러리에선 누적 바 차트 / 라인 차트 가 분리되어 있지만 바 차트 + 라인차트 같이 출력하는 코드를 보고 누적 바 + 라인 차트를 커스텀해 만들어보았다. 출력되는 그래프 toolTip 도 커스텀 해서 출력 하였다 😁 npm install //기본 설치 npm i chart.js //차트제이에스 2를 사용하기 위한 설치 npm install react-chartjs-2 chart.js.. 2022. 7. 12. [nivo chart] HeatMap chart 리액트 니보 차트 라이브러리 사용법 니보 공식사이트는 추가설명이 너무 불친절 해서 사용하기 어려웠다. 초반 어떤걸 다운 받고 어떤걸 임포트 해야하는지 정보제공이 매우 불친절.. 그럴꺼면 왜 공식사이트를 만든건지 개인적으로 평소 차트 라이브러리는 chart js 를 가장많이 사용한다. chart js는 아쉽게도 HeatMap 차트가 없다. https://nivo.rocks/ Home | nivo nivo.rocks 🍖완성 화면 🍕Install // npm install @nivo/core // 기본적으로 설치 // npm install @nivo/heatmap 🍔import import { ResponsiveHeatMap } from '@nivo/heatmap' 차트 라이브러리 는 대부분 2가지만 신경쓰면된다 data / option - 데.. 2022. 7. 4. 이전 1 2 3 4 5 6 다음 728x90 반응형
