분류 전체보기542 [React] client IP / userAgent 정보 받기 외부 라이브러리 사용 하여 클라이언트의 IP 정보를 가져 옵니다. const [ ip , setIp ] = useState(); useEffect( () => { axios.get('https://geolocation-db.com/json/') .then((res) => { setIp(res.data.IPv4) }) },[]) userAgent 정보는 MDN 기본 반찬인 navigator로 출력 가능합니다. const userAgent = window.navigator.userAgent 2022. 10. 6. [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. [canvas] canvas 에 그려진 그림/이미지 리셋 하기 ctx2.clearRect(0,0,reCanW,reCanH); ctx2.beginPath(); clearRect 에서 4개의 element는 필수 입니다. ctx.clearRect(top , left , 넓이 , 높이); 그린 rect들을 클리어 하고 새로운 이벤트 활성화 가능합니다. 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. [CSS] overflow-y:scroll 디자인하기 스크롤 디자인 변경하는 CSS overflow-y:scroll로 스크롤 사용 가능하다. 기본 스크롤도 충분히지만 쫌더 통일성 있는 디자인을위해 스크롤 색상과 모양 디자인을 변경하는 CSS를 추가했다 이미지 표의 오른쪽 스크롤 이다. .accodient-box{ overflow-y: scroll; } .accodient-box::-webkit-scrollbar { width: 10px; /* 스크롤바의 너비 */ } .accodient-box::-webkit-scrollbar-thumb { height: 30%; /* 스크롤바의 길이 */ background: #848484; /* 스크롤바의 색상 */ border-radius: 10px; } .accodient-box::-webkit-scrollbar-track { background.. 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. [JQuery] 엔터키 이벤트 실행 (엔터키 안누르고) var enter = jQuery.Event( "keydown", { keyCode: 13 } ); 엔터키 이벤트 발생하는 함수 만들어준후 $('#input-box').trigger(enter); 엔터키 trigger이벤트로 실행 가능 나의 경우 특정 모달 오픈시 엔터키 이벤트가 필요했기에 사용 2022. 9. 21. 이전 1 ··· 5 6 7 8 9 10 11 ··· 61 다음 728x90 반응형
