사용한 내장객체

김현준·2024년 3월 24일

Date()

현재 날짜를 구할 수 있고, 특정 날짜를 구할 수 있다.
Date()의 기본 사용법과 내장함수, 필수 매개변수
요일 구하기
메서드는 mdn 문서 참고

URL.createObjectURL()

Blob 또는 File 객체를 메모리에서 URL로 변환해주는 역할
이를 통해 웹 애플리케이션에서 파일 다운로드, 이미지 미리보기, 동영상 및 오디오 재생 등 다양한 미디어 관련 작업을 보다 효과적으로 수행
JavaScript에서 파일 및 Blob을 URL로 변환하는 방법: URL.createObjectURL 사용하기

URL을 해제하는 것을 잊지 않고 사용하도록 주의

페이지를 새로고침하거나 닫는 경우에는 URL.revokeObjectURL()을 명시적으로 호출하지 않아도 메모리는 해제

새로고침되지 않거나 SPA 같은 방식으로 동작할 때는 반드시 URL.revokeObjectURL()을 사용하여 메모리를 수동으로 해제

URL.revokeObjectURL(url)

URL.createObjectURL로 생성된 URL은 메모리를 사용하므로 사용이 끝난 후에는 반드시 해제
해제하지 않으면 메모리 누수가 발생할 수 있음

createObjectURL을 사용해서 이미지 업로드 후 미리보기

blob형태란?
Blob은 javascript에서 이미지, 사운드, 비디오 같은 멀티 데이터를 다룰 때 사용한다.

URL.createObjectUrl()
URL.createObjectURL() 메소드는 주어진 객체를 가리키는 URL을 DOMString으로 변환하는 기능을 한다. 해당 url은 window 창이 사라지면 함께 사라지고, 다른 windowd에서 재 사용이 불가능 하고 이 URL은 수명이 한정되다.
==== 이 말은 잠깐 미리보기에 적합하다!!!

[React & Next.js] 프로필 이미지 (업로드, 미리 보기, 삭제)
업로드를 하려면
미리 보기에서 했던 것을 반대로 하면 된다.
미리 보기는 Base64 Data URL로 사진을 보여주기 때문에,
업로드하려면 다시 File 객체로 변환시켜주어야 한다.
(Base64 Data URL -> File)

FileReader

FileReader 객체는 type="file인 <input> 태그 또는 API 요청을 통해 제공된 File 또는 Blob 객체를 편리하게 처리할 수 있는 방법을 제공하는 객체

주로 파일의 내용을 읽어들여 미리보기로 보여주거나, 파일 내용을 서버에 전송하기 전에 데이터를 가공하는 데 사용
이미지 파일을 로드하여 미리보기 URL로 변환하거나, 파일의 내용을 Base64 형식으로 변환하는 데 매우 유용.
비동기적으로 동작하며, HTML 페이지의 렌더링에 영향을 주지 않도록 설계

FileReader mdn

FileReader의 비동기 동작

React의 AJAX 요청(API 요청)과 유사하게, FileReader는 잠재적으로 시간이 소모되는 작업(예: 대용량 파일 읽기)을 비동기로 처리하여, HTML 페이지의 렌더링을 차단하지 않고, 사용자 경험을 향상
이로 인해 파일이 완전히 읽히기 전까지도 페이지가 정상적으로 작동할 수 있다.

사용법

const reader = new FileReader();

파일의 내용은 result 속성에 저장되며, 이 속성을 통해 데이터를 접근할 수 있다.
FileReader는 다음과 같은 4가지 방식으로 파일을 읽을 수 있다:

1. readAsText(): 파일 객체의 내용을 텍스트로 읽음
2. readAsDataURL(): 파일 객체를 읽은 후 데이터 URL(Base64)로 변환
3. readAsArrayBuffer(): 파일 객체의 내용을 배열 버퍼로 읽음
4. readAsBinaryString(): 파일 객체의 내용을 비트 문자열로 읽음

사용예시

const reader = new FileReader();

// 1. 텍스트로 읽기
reader.readAsText(file);

// 2. 데이터를 URL로 변환하여 읽기
reader.readAsDataURL(file);

// 3. 배열 버퍼로 읽기
reader.readAsArrayBuffer(file);

// 4. 비트 문자열로 읽기
reader.readAsBinaryString(file);

이벤트 핸들링
FileReader는 파일 읽기 작업과 관련된 여러 이벤트를 제공
주요 이벤트는 다음과 같다:

load: 파일 읽기 작업이 완료되면 작동
error: 에러로 인해 파일을 읽을 수 없을 때 동작
abort: abort() 함수를 호출하여 파일 읽기 작업이 취소될 때 동작
progress: 파일을 읽는 동안 일정한 간격으로 동작

reader.onload = (event) => {
  const result = event.target.result; // 파일 읽기 결과
  setAttachment(result); // 상태에 저장하여 미리보기로 사용
};

reader.onerror = (error) => {
  console.error("File reading error:", error);
};

reader.onabort = () => {
  console.log("File reading aborted");
};

reader.readAsDataURL(file);

FileReader 주요 속성

result: 파일을 읽은 결과가 저장되며, 이 값을 통해 파일의 내용을 처리할 수 있다.
error: 파일 읽기 작업 중 발생한 오류를 설명하는 Error 객체
readyState: FileReader 객체의 상태를 숫자로 관리:
- 0: 비어 있음 (Empty) - 작업이 시작되지 않음
- 1: 로딩 중 (Loading) - 파일을 읽는 중
- 2: 완료 (Done) - 파일 읽기 작업이 완료됨

React에서 이미지 파일을 불러와 미리보기로 보여주기

import React, { useState } from 'react';

function ImageUploader() {
  const [attachment, setAttachment] = useState(); // 이미지 파일을 임시 저장할 상태

  const onFileChange = (e) => {
    const file = e.target.files[0]; // 선택된 첫 번째 파일

    const reader = new FileReader(); // FileReader 객체 생성
    reader.onload = (finishedEvent) => {
      const result = finishedEvent.currentTarget.result;
      setAttachment(result); // 파일의 Base64 데이터를 상태에 저장하여 미리보기로 사용
    };
    reader.readAsDataURL(file); // 파일 데이터를 URL로 변환하여 읽기
  };

  return (
    <div>
      <input type="file" accept="image/*" onChange={onFileChange} />
      {attachment && <img src={attachment} width="50px" height="50px" alt="미리보기" />}
    </div>
  );
}

export default ImageUploader;

onFileChange: 사용자가 파일을 선택하면, 해당 파일을 FileReader로 읽어들이고, Base64 URL로 변환하여 상태에 저장
attachment: 변환된 이미지 데이터를 저장하고, <img> 태그의 src 속성으로 사용하여 미리보기 이미지를 화면에 표시

URLSearchParams

URL의 쿼리 문자열을 다루기 위한 웹 API
URL의 쿼리 매개변수를 쉽게 조작할 수 있어, 특히 동적 웹 애플리케이션 개발 시 유용

주의사항
쿼리 문자열은 일반적으로 인코딩되므로, 특정 문자(예: 공백, &, =)는 인코딩된 형태로 나타난다.
디코딩 함수를 이용하여 해결

1. URLSearchParams 객체 생성

// 빈 객체 생성
let params = new URLSearchParams();

// 초기값으로 객체 생성
let params = new URLSearchParams("name=John&age=30");

2. append(): 쿼리 매개변수 추가

params.append("city", "New York");
console.log(params.toString()); // "name=John&age=30&city=New York"

3. set(): 쿼리 매개변수 설정 (기존 값 덮어쓰기)

params.set("name", "Jane");
console.log(params.toString()); // "name=Jane&age=30&city=New York"

4. get(): 특정 매개변수 값 가져오기

let name = params.get("name");
console.log(name); // "Jane"

5. getAll(): 특정 매개변수의 모든 값 가져오기 (중복 값 포함)

params.append("hobby", "reading");
params.append("hobby", "traveling");
let hobbies = params.getAll("hobby");
console.log(hobbies); // ["reading", "traveling"]

6. has(): 특정 매개변수 존재 여부 확인

console.log(params.has("age")); // true

7. delete(): 특정 매개변수 삭제

params.delete("city");
console.log(params.toString()); // "name=Jane&age=30&hobby=reading&hobby=traveling"

8. toString(): URL 쿼리 문자열 반환

console.log(params.toString()); // "name=Jane&age=30&hobby=reading&hobby=traveling"

실사용 예제

1. URL에서 쿼리 매개변수 파싱

let url = "https://example.com?name=John&age=30";
let urlParams = new URLSearchParams(window.location.search);

let name = urlParams.get("name"); // "John"
let age = urlParams.get("age"); // "30"

2. 쿼리 매개변수 생성 및 URL에 추가

let params = new URLSearchParams();
params.append("product", "book");
params.append("price", "20");

let newUrl = "https://example.com?" + params.toString();
console.log(newUrl); // "https://example.com?product=book&price=20"

set()

순서가 없는 중복되지 않은 데이터의 집합

배열과의 차이점

배열:
은 데이터를 순서있게 저장. 그래서 인덱스(index)를 통해서 특정 위치에 저장되어 있는 데이터에 접근이 가능하다. 그리고 배열에는 동일한 값을 여러 번 저장할 수 있다. 값이 동일하더라도 인덱스가 틀리기 때문에 데이터의 중복이 문제되지 않는다.

세트:
얼핏 보기에는 배열과 비슷해보일 수 있지만 사실 결이 아주 다른 자료구조. 우선 세트는 데이터를 순서없이 저장한다. 따라서 배열처럼 인덱스를 통해서 접근할 수가 없다.
그리고 중복된 데이터를 허용하지 않는다.

사용법
배열에서 중복 없애는 팁:

const array = [1, 1, 2, 2, 3, 3]
console.log([...new Set(array)]) //[1, 2, 3]

주의점(보류)
new Set()을 사용하여 배열의 중복된 요소를 제거하는 것은 일반적으로 원시 데이터 타입(예: 숫자, 문자열)에 대해서는 잘 작동한다.
그러나 객체의 경우, new Set()은 객체의 참조를 비교하므로, 동일한 속성을 가진 두 개의 다른 객체는 서로 다른 것으로 간주된다.