Today I Learned

1. 리액트

React-DropZone 라이브러리 사용하여 이미지 미리보기

이미지 업로드 라이브러리의 사용이 필요했다.
현재 프로젝트에서 주로 이미지를 다루다 보니 필요한 기능은 업로드 시 파일 갯수 제한과 용량 제한, 드래그 앤 드롭 이었다.
사실 드래그 앤 드롭은 없어도 되는 기능이었지만 있어보이니까 (￣∀￣)
자체 제작을 하는 방법과 라이브러리를 가져와 뜯어 고치는 방법, 두 가지 선택권이 있었다.
자체 제작을 하면 물론 많은 공부가 되겠지만 오랜 시간을 투자해야 했으므로 라이브러리 찾기에 나섰고, 업로드 라이브러리에서 압도적으로 점유율이 높아보이며 우리 프로젝트에 제일 적합하다 생각하는 DropZone을 사용하게 되었다.
생각보다 래퍼런스가 많지 않았지만 공식 깃허브 만으로도 충분했다.

https://github.com/react-dropzone/react-dropzone/

1. 설치

yarn add react-dropzone

2. 사용 방법에는 두 가지가 있었다. 나는 Wrapper Component를 사용했다.

공식 깃허브에는 이렇게 나와 있었지만,

import React from 'react'
import Dropzone from 'react-dropzone'

<Dropzone onDrop={acceptedFiles => console.log(acceptedFiles)}>
  {({getRootProps, getInputProps}) => (
    <section>
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
    </section>
  )}
</Dropzone>

나는 우리 프로젝트에 맞게 커스텀 하였다.

import React from 'react'
import Dropzone from 'react-dropzone'
import { useDispatch } from 'react-redux';

const onDrop = useCallback((acceptedFile) => {
  const reader = new FileReader();  
  const dispatch = useDispatch();
  reader.readAsDataURL(acceptedFile[0]);
  reader.onload = () => {
    dispatch()
  }

}, [])
const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})

<Dropzone multiple={false} accept={"image/gif, image/jpg, image/jpeg, image/png"} onDrop={onDrop}>
    {({getRootProps, getInputProps}) => (
      <section>
        <div {...getRootProps()}>
          <input {...getInputProps()} />
		  // ↓파일 업로드를 표시할 element
		  <img/>
        </div>
      </section>
    )}
  </Dropzone>

파일을 업로드하면 자바스크립트에서 제공하는 FileReader를 사용해서 파일을 읽은 후 url을 따온 후 이미지 태그의 src에 넣어 미리보기를 가능하게 했다.

나중에 또 사용하기 위해 Dropzone에서 지원하는 유용한 키워드들을 기록을 해두자면

• multiple : true 면 파일 다중 선택 가능, false면 1개만 가능
• maxSize : 최대 허용가능한 파일 크기
• maxFiles : 최대 허용가능한 파일의 갯수
• accept : 파일 확장자 제한 ex) "image/gif, image/jpg ..."

시간은 좀 걸렸지만 큰 고비 없이 구현할 수 있어서 다행이었다.

2. CS 스터디

9장 웹 브라우저(p.365 ~ p.370)

JQuery

Dom함수는 두 가지 문제가 있다.
1. 함수 동작이 브라우저마다 다를 수 있다.
2. 사용차 친화적이지 않다.
이를 해결하기 위해 JQuery가 등장했는데, 제이쿼리는 셀렉터와 이벤트 핸들러와 같은 액션을 조합한다.

SVG

Scalable Vector Graphics(크기 변경이 가능한 벡터 그래픽스)
그래픽과 텍스트를 멋지게 만들 수 있도록 지원하지만 마크업 언어와는 완전히 다르다.

JSON

JavaScript Object Notation(자바스크립트 객체 표기법)
자바스크립트 객체를 사람이 읽기 쉬운 방식으로 표현한 것.
JSON을 사용하면 자바스크립트에서 데이터를 내보내고 들여올 떄 추가로 코드를 작성할 필요가 없다.

To Do

1. 完) 프로젝트 react-dropzone 라이브러리 사용해서 파일 업로드 전초작업

2. 完) CS스터디 정리하기

Always 完) 알고리즘 최소 한 문제 - 220319's Algorithm

Today's Short Report

#DropZone