FileReader FileReader는 File, Blob 객체가 저장하고 있는 바이너리 데이터를 '비동기적'으로 읽어주는 객체이다 =>File 또는 Blob 객체를 읽어서 result 속성에 저장 (result 속성을 통해 데이터를 접근가능) base64로 인코딩된 값을 반환 기본 동작은 다음 과정을 거친다. 1. read 2. load event 3. result const reader = new FileReader(); reader.readAsArrayBuffer(blob) // ArrauBuffer 형태로 데이터를 읽어 변환 reader.readAsText(blob, [encoding]) // encoding 방식에 맞게 텍스트 형태로 데이터를 읽어 변환 (기본 인코딩 방식 - utf-8) re..

React 애플리케이션에서 전역적으로 알림 창을 띄우는 기능을 구현하기 위해 useContext 훅과 Material-UI(MUI) 라이브러리를 활용하는 방법을 사용하였다 여기서 Context 란? context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있게 해준다 createContext : context 객체를 생성한다. Provider : 생성한 context를 하위 컴포넌트에게 전달하는 역할을 한다. Consumer : context의 변화를 감시하는 컴포넌트이다. // 필요한 모듈 import import React, { createContext, useState, useContext } from "react"; import Snackbar..

input을 통해 이미지 업로드시, 이미지 선택 후 취소 버튼을 누르면 나는 오류였다 input에 걸려있는 함수는 그대로 작동을 하지만, 실제로 파일이 없기에 에러가 뜨는 실수였다 오류가나는 코드 const onChangeImage = (e) => { const reader = new FileReader(); const file = imgRef.current.files[0]; reader.readAsDataURL(file); reader.onloadend = () => { setImage(reader.result); }; if (e.target.files[0]) { //서버에 보내는 코드 const userImage = new FormData(); //백엔드에서 이미지를 어떻게 받고있는지 확인후 이름수정..

회원가입,로그인 기능을 구현할때 React-hook-form 을 사용하면 훨씬 편하고 성능면에서도 좋다고해 어떤점에서 편하고 좋은지 알아보고 사용하려고 한다 React-hook-form 은 기본적으로 비제어 컴포넌트 로 동작한다고 한다 💡비제어 컴포넌트란? 폼 요소의 상태(state)를 직접 제어하지 않고, DOM 자체에서 값을 가져오거나 조작하는 컴포넌트 방식이다 비제어 컴포넌트는 폼 요소의 값을 사용자 입력에 따라 자동으로 업데이트하거나, 값을 가져와서 필요에 따라 처리할 수 있다 💡제어 컴포넌트란? 리액트의 상태(state)를 사용하여 사용자 입력을 관리하는 컴포넌트이다 사용자 입력에 따라 컴포넌트의 상태가 업데이트되고, 상태의 변경에 따라 렌더링이 다시 수행된다 제어컴포넌트 vs비제어 컴포넌트..