유저가 같은 문장에 대해 이미지 재생성을 원할 경우 재생성을 할 수 있는 기능을 추가하였다. 재생성 버튼을 누르면 같은 문장에 대해 새로운 이미지를 생성해주고 S3에 저장된 이미지를 새로운 이미지로 바꿔준다. 그렇지만 같은 URL을 사용해서 그런지 화면에서는 새로운 이미지가 아닌 이전 이미지만 계속 나오는 현상이 있었다. 원인을 생각해본 결과 아마 이미지가 캐싱돼서 그런 것으로 추측하고 이미지가 캐시되지 않도록 해주었다. img className 옵션에 NO-CACHE 를 추가해주고 이미지 src 뒤에도 Date.now() 함수를 넣어 파라미터를 넣어주었다. +) 이때는 시간이 없어서 그냥 이렇게 한다고만 하면 되고 대충 넘어갔는데 프로젝트를 정리하며 찾아보니 S3에서 파일의 메타데이터 설정을 통해서 캐..
프로젝트/TMI
1. 컴포넌트 이동 시 props 전달 방법 navigate 함수의 첫번째 인자로는 주소, 두번째 인자인 state에 전달할 데이터를 넣어준다. import { useNavigate } from "react-router-dom"; const navigate = useNavigate(); const onSubmit = (data) => { axios .post("post할주소", data) .then((response) => { if (response.status === 200) { navigate("이동할 주소", {state:response.data}); } else { alert("Submit failed!!"); } }) .catch((error) => { console.log(error); });..
React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install react-icons --save Usa react-icons.github.io React-icons를 이용하여 홈페이지 디자인을 좀 더 좋게 바꾸어보기 시도.... 사용 방법은 아주 간단하다. 위의 홈페이지에서 알려주는대로 install하고 import해서 사용하면 끝!..
react bootstrap에도 스피너가 있긴 한데 더 다양한 모양의 스피너가 있는 react-spinners 라이브러리를 이용하여 만들어 보았다. 우선 둘 중 하나의 명령어를 사용하여 설치를 해주자. npm install react-spinners --save yarn add react-spinners 그리고 파일을 하나 만들고 다음의 페이지에서 맘에 드는 스피너를 선택하여 코드를 복붙하면 된다. 색상과 크기, 속도 등 다양한 옵션들을 설정 가능하다. Webpack App www.davidhu.io import React from "react"; import { FadeLoader } from "react-spinners"; function Loading() { return ( ); } export d..
Home React hook for form validation without the hassle react-hook-form.com ▲ react-hook-form 공식문서 폼에 react-hook-form을 적용시켜 보았다. react-hook-form은 폼의 유효성 체크를 쉽게 해주는 라이브러리로 사용해보니 코드의 양도 줄어들고 가독성도 올라갔다. usestate로 state를 여러 개 만들어서 관리해주지 않아도 되니 편리했다. 우선 react-hook-form을 설치한다. npm install react-hook-form yarn add react-hook-form 가장 기본적인 형태는 아래와 같다. const { register, handleSubmit } = useForm(); register..
