Before you learn 🔗 [React & Next.js] 프로필 이미지 (업로드, 미리 보기, 삭제) = 1개의 이미지 (업로드, 미리 보기, 삭제)이므로 먼저 보고 오는 것을 추천합니다. 🔗 Array.splice() 영상 [React & Next.js] 다중 이미지 (업로드, 미리 보기, 삭제) 파일 구조 register.jsx > HouseImages.jsx 미리 보기 거의 프로필 이미지(한 개의 이미지)의 미리 보기와 비슷하다. 다른 점은 Base64 Data URL로 화면에 보여줘야 하는데, File -> Base64 Data URL로 변환할 때 여러 개의 File이다 보니 한 번에 변환되지 않아 반복문(for문 등...)을 통해 하나씩 변환해 주어야 한다. (File -> Base64..

Before you learn 🔗 File 🔗 blob 🔗 FormData 🔗 formData.append() 🔗 FileReader 🔗 FileReader.readAsDataURL() 영상 [React & Next.js] 프로필 이미지 (업로드, 미리 보기, 삭제) 파일 구조 signup.jsx > profileImage.jsx 미리 보기 이미지 미리 보기 기능을 구현한다면 이미지 File 자체를 읽어서 화면에 보여줄 수 없기에 이미지 파일을 Base64 Data URL로 변환하여 화면에 보여줘야 한다. (File -> Base64 Data URL) 삭제 유저가 선택한 이미지를 삭제한 경우, 기본 이미지로 변경한다. (기본 이미지 위치 : /public/~~~.png ) // ProfileImage.j..

[React & Next.js] 특정 위치로 이동 버튼 Before you learn 🔗 useRef 🔗 scrollIntoView 🔗 scrollTo 🔗 scrollBy 영상 코드 파일 구조 Rooms.jsx > RoomsHeader.jsx > RoomsHeaderBtn.jsx // Rooms.jsx import { useRef } from "react"; import Header from "@/components/Header/Header"; import RoomsHeader from "@/components/Header/RoomsHeader"; // 숙소 상세내용 export default function Rooms() { // 위치를 참고하기 위해 useRef를 사용한다. // 여러개를 참고하기 위..

[React & Next.js] 특정 위치부터 헤더 보여주기 영상 코드 // Rooms.jsx import Header from "@/components/Header/Header"; import { useState, useEffect } from "react"; export default function Rooms() { const [isRoomsHeaderShow, setIsRoomsHeaderShow] = useState(false); // 의존성 배열(Dependency Array)에 빈 배열('[]')을 전달하여, // useEffect가 렌더링 시 한 번만 실행됩니다. useEffect(() => { const handleScroll = () => { // RoomsHeader y축 600px ..