승밈

기존의 alert() 창을 대신해서 이쁜 알림 창을 만들 수 있는 SweetAlert2 입니다. 아래의 이미지는 SweetAlert2 을 사용하여 간단하게 띄운 알림창이미지입니다. 사용법 1. sweetalert2 모듈 설치 npm install sweetalert2 2. 사용하려는 페이지에서 Swal 선언 import Swal from "sweetalert2"; 3. 사용 alert()창 안에 버튼을 넣고 버튼에 따른 이벤트 처리도 가능합니다. 위의 이미지에 대한 코드입니다. Swal.fire({ icon: "warning", title: "삭제", text: `[${삭제할 ID 값}] 삭제 하시겠습니까??`, showCancelButton: true, confirmButtonText: "삭제", ca..

데이터를 DB에서 가져와서 검색 조건에 맞게 조회하는 화면을 구상하다보면 조건에 맞춰서 다시 조회를 해야하나 싶지만 페이지 렌더링시 전체 데이터 조회, 그 후 Filter() 함수 를 사용하여 필터링하면 DB에 다시 조회할 필요가 없습니다. Filter() 함수를 사용하여 DB에서 가져온 데이터들을 검색조건 적용시키는 방법입니다. 저는 filesData라는 배열에 검색 키워드가 filename 또는 keyword에 포함되면 일치하도록 해놨습니다. 값이 포함된지 체크하는 함수는 기존에는 indexOf()를 사용했지만, ES6 문법에서 추가된 includes() 함수를 사용했습니다. includes() 함수는 대소문자를 구별합니다. 대소문자 상관없이 하고싶으신분들은 toLowCase()나 toUpperCas..

위 사진과 같이 파일과 파일에 해당하는 파일명, 설명, 태그 등 사용자에게 입력 받은 값을 서버로 전송해야할 일이 있습니다. file 만 보내는글은 많지만 json까지 같이 보내는건 많지 않아서 작성해봅니다. 일반적으로 axios를 사용하여 body 부분에 json 형식으로 추가해서 보냈지만 file전송을 위해 FormData()를 사용했을 경우 body 부분에 json 형식의 데이터를 보낼 수 없습니다. formData에 append()를 사용하여 file 및 json, array를 보내는 방법은 다음과 같습니다. /*FormData 변수 */ const [file, setFile] = useState(null); // 파일 저장 할 State //파일 추가 const handleChange = (fi..

Cookie를 사용한 아이디 기억하기 기능 구현 모듈 설치 npm install reack-cookie useCookies 선언 import { useCookies } from "react-cookie"; JS 부분 /*====== Cookie에 저장하여 사용할 값 선언======*/ const [userid, setUserid] = useState(""); /*============================*/ /*====== Cookie 관련 선언======*/ const [cookies, setCookie, removeCookie] = useCookies(["rememberUserId"]); #Cookies 이름 const [isRemember, setIsRemember] = useState(f..

react-spinners를 사용한 로딩창 만들기 modal을 활용해서 만들면 화면 위에 Loading창이 띄워지게 만들기 가능 공통 함수로 만들어 놓고 사용하면 유용하게 사용 가능 필요한 모듈 설치 react-spinners npm install --save react-spinners react-bootstrap의 modal을 사용하기 위해 설치 npm install --save react-bootstrap LoadingModal.js //Moudle import React, { useEffect, useState } from "react"; import { Button, Modal, ModalDialog } from "react-bootstrap"; import "../css/User.css"; im..

React에서 formData를 사용하여 파일을 전송하다보면 body에 다른값들을 같이 전송해야하는데 잘 되지않는 경우가 있더라구요. 이미지를 base64 형식으로 서버에 전송하는 방법입니다. 서버에서 전달 받은 이미지를 decode 및 저장하는 코드는 https://seung-min.tistory.com/38 를 확인해주세요. [node.js] base 64 이미지 decode 및 저장 방법 웹에서 보낸 base64 이미지 파일을 받아서 decode 및 저장하는 방법입니다. react 에서 base64 형태로 이미지 업로드 방법은 https://seung-min.tistory.com/37 여기에 있습니다. [React] base64로 여러 장의 이.. seung-min.tistory.com 사진 추가 ..

timer 및 Modal을 사용하여 OTP 창 만들기 /*값이 변경 될 때마다 useEffect()가 작동하도록 state 사용*/ const [counter, setCounter] = useState(props.timmer ? props.timmer : 300); /*setInterval() 선언 */ useEffect(() => { const timer = counter > 0 && setInterval(() => setCounter(counter - 1), 1000); if (timer === 0) { props.setShow(false); } return () => clearInterval(timer); }, [counter]); /*300초 -> 05:00 형식으로 변환 */ const toHH..

{ if (e.key === "Enter") onClickHandler(); }} > form 태그에 onKeyPress를 사용하면 로그인 버튼을 클릭하지 않고 엔터키 입력으로 onClick() 이벤트 처리 가능