Programing Language/React.js
-
React) react-toastify 중복 실행 방지하기Programing Language/React.js 2023. 3. 12. 17:05
import { ToastContainer, toast } from 'react-toastify'; const autoCloseDuration = 1000; const toastId = 'current-toast-id'; // { if(!toast.isActive(toastId)){ //isActive로 활성여부 체크 // 중복 실행 방지하기 위해서 고정된 id를 넣는다. toast(msg, { toastId: toastId, position: 'bottom-center', autoClose: autoCloseDuration, hideProgressBar: true, closeButton: false, pauseOnHover: true, progress: undefined, theme: 'dark' })..
-
React) Nginx + React (SUB-PATH)로 배포하기Programing Language/React.js 2022. 12. 9. 22:00
react로 관리자를 만들어 https://example.com/admin 위의 url 와 같이 뒤에 admin을 붙여 개발한후에 서버에 배포하는 방법을 알아보겠습니다. Step1 package.json에 homepage 키값에 value 추가 (저같은경우 /admin 으로 추가하였습니다.) { "name": "ADMIN-Project", "homepage": "/admin", "version": "1.1.0", "private": true, "scripts": { ..... } Step2 BrowserRouer Dom에 basename 추가 ..... Step3 Nginx 설정 파일인 /etc/nginx/sites-available/default 에서 아래와 같이 추가 location ^~ /admin..
-
Recoil) Atom Effects에서 isReset 값 false 로 실행하기Programing Language/React.js 2022. 11. 15. 20:31
Atom 값에 set을 하면 isReset이 True로 작동하였지만 isReset 값을 False로 작동 시키는 방법을 찾기가 어려웠다. Docs에 적혀있을지도 모르지만 영어라 전반적으로 자세히 보지는 못했다. 추측으로 useResetRecoilState() 함수를 사용하면 되지 않을까 해서 사용해보니 isReset이 False로 실행되는것을 발견하였다. import { useResetRecoilState } from 'recoil'; import {todoListState} from "../atoms/todoListState"; const TodoResetButton = () => { const resetList = useResetRecoilState(todoListState); return Reset..
-
Recoil) Expectation Violation: Duplicate atom key "". This is a FATAL ERROR in 해결하기Programing Language/React.js 2022. 11. 14. 21:58
https://recoiljs.org/ko/blog/ Blog | Recoil Blog recoiljs.org 공식 블로그를 확인해보면 다음과같이 나와있다. Import RecoilEnv from the recoil package, and set RecoilEnv.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED = false in code to disable the checking and logging. recoil을 관리하는 index 파일에서 다음과 같개 수정을하자. import { RecoilEnv } from 'recoil'; .... RecoilEnv.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED = false; ... 도움되셨다면 광고..
-
NextJS ) next js websocket.js?a9be:45 WebSocket connection toPrograming Language/React.js 2022. 9. 29. 16:55
Next.js를 구동중에 다음과 같은 에러가 발생했다. 이것에 대한 문제는 NextJS 12버전의 서버 커넥션을 유지하기 위해 webSocket을 활용했기 때문에 발생한 것이다. 사진과 같은 에러가 console에 출력된다면 nginx의 default 설정 파일에서 # https websocket proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $host; 을 추가해보자 그러면 웹서버의 헤더에 웹소켓 적용이 되었음으로 에러가 없어지게 된다. 도움되셨다면 커피한잔의 여유를 위한 광고 클릭 부탁드립니다 :)
-
React) 브라우저의 변하는 width, height를 Hook으로 전달받기Programing Language/React.js 2022. 6. 23. 14:18
import {useEffect, useState} from "react"; interface WindowSize { width: number height: number } const useWindowSizeCustom = (): WindowSize => { // Initialize state with undefined width/height so server and client renders match // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/ const [windowSize, setWindowSize] = useState({ width : 0, height: 0, }); useEffect(() => { //..
-
React) Swiper 사용하기Programing Language/React.js 2022. 5. 27. 16:20
package.json --- "swiper": "^6.8.4", Main.tsx import { Swiper, SwiperSlide } from 'swiper/react'; import SwiperCore, { Navigation, Pagination } from "swiper"; import "swiper/swiper.scss"; import "swiper/components/navigation/navigation.scss"; import "swiper/components/pagination/pagination.scss"; SwiperCore.use([Navigation, Pagination]) export default function Main() { return( Slide 1 Slide 2 Sl..
-
React.js) FilePond 다루기(파일 업로드 모듈)Programing Language/React.js 2022. 5. 5. 14:14
파일 업로드랑, 업로드 이후 파일 순서 변경할때 감지하는 명령어를 기록하기 위해서 작성. { //파일 업로드할때 console.log('[onUpdatefiles] files : ', files); }} onreorderfiles={(files) => { //파일 변경할때 console.log('[onReorderfiles] files : ', files); }} allowMultiple={true} maxFiles={5} acceptedFileTypes={['image/*']} itemInsertLocation={'after'} name="upload_files" labelIdle='Drag & Drop your files or Browse' onerror={(error, file) => { conso..