What to do? 서버에서 이미지를 불러와서 img 태그 안에 넣어서 보여주는 것과 별개로 서버에서 이미지의 blob 데이터를 가져와서 자바스크립트의 file 객체로 변환하고 싶은 경우가 있을 것이다. 아래와 같은 엔티티와 api가 있고 이미지가 하나 등록되어 있다고 가정하자. 엔티티에서 data는 이미지를 blob 형식으로 변환해서 저장한 값이다. import {Column, Entity, ManyToOne, PrimaryGeneratedColumn} from "typeorm"; import {Question} from "./Question"; @Entity() export class Image { @PrimaryGeneratedColumn() id: number; @Column({length: 1..

What to do? 페이지에서 클라이언트가 로컬 컴퓨터로 이미지를 업로드하고 서버에 전송하기 전에 미리 사용자가 업로드할 이미지를 보여주고 싶을 경우가 있을 것이다. 아래처럼 input 태그에 type을 file로 주고 accept라는 키워드를 사용해서 이미지 형식의 파일만 받게 태그를 변경하면 이미지 업로더를 구현할 수 있다. 클라이언트로 부터 받은 이미지 파일은 state에 저장하고 삭제 버튼을 클릭하면 state를 초기화 시키자. 클라이언트가 이미지를 업로드하기 전에는 디폴트 이미지를 보여주고 클라이언트가 이미지를 업로드하면 해당 이미지를 보여주도록 하자. 클라이언트가 업로드 버튼을 클릭하면 서버에 이미지가 등록되고 이를 postman에서 미리 구현한 api로 확인할 수 있다! 여기를 클릭해서 D..

react-toastify https://www.npmjs.com/package/react-toastify react-toastify React notification made easy www.npmjs.com 리액트에서 toast 알림을 편하게 띄우게 할 수 있는 3rd party 라이브러리이다! 아래 명령어로 설치를 하자! yarn add react-toastify 사용법 우선 react-toastify의 css를 적용하기 위해 아래처럼 임포트 해야 한다. import 'react-toastify/dist/ReactToastify.css'; 컴포넌트를 불러온 후 이벤트에 toast() 메서드를 이용해서 toast 알림을 편하게 띄울 수 있다! import { toast, ToastContainer }..

Yup? Yup은 Form의 validation 검사를 하기 위한 라이브러리이다. 특히, 리액트에서 formik + yup을 사용해서 dynamic form과 validation을 쉽게 할 수 있다. Yup은 yup formatted object(우리의 데이터와 닮은 객체)를 생성한 후, utility function을 통해서 우리의 데이터와 formatted object가 매치되는지 확인하며 validation을 확인한다. 만약 사용자가 아래와 같은 양식처럼 데이터를 전송해야 한다고 하자. { name: string [필수값], age: int [필수값], email: email [필수값], } 이를 검증할 yup schema object는 아래와 같다. const validationSchema = Y..