[항해 99 미니 프로젝트 주차 이미지 미리보기에 대하여...]

<회고록>

우리 프로젝트는 크게 3가지 단계로 이루어져 있다.

    1. CREATE / READ 구현

    2. UPDATE / DELETE 구현

    3. 로그인 / 회원가입 구현

여기서 우리는 UPDATE / DELETE를 하기 전에 이미지 미리보기 기능을 구현해야 하는 상황이 왔다. 그래서 나는 어떻게 하면 이미지를 주소를 따서 보여줄 수 있을까에 대해서 생각해보았다. 그래서 오늘은 내가 이미지 미리보기 기능을 어떻게 해쳐나갔는 지에 대해서 작성해볼려고 한다.

 

1. 이미지 미리보기 기능 구현 로직 설명

이미지 미리보기 기능은 크게 3가지 단계로 나눠어져 있다 .

첫번째는  input [type = "file"]로 file객체를 받는다.

두번째는 이 file 객체의 상태를 저장한다. 이때 저장되는 값의 형태는 object 형식이다.

세번째는 이 file 객체를 url로 바꿔준다. 여기서 우리가 어려운 점은 세번째 단계이다. 즉 file 객체를 가지고 어떻게 하면 url로 바꿀것인지 정말로 어려운 주제다. 그래서 여러 블로그를 보면서 이에 대한 해결방법을 알게되었다. 그래서 한번 이에 대해서 살펴보도록 하겠다.O

 

2. URL.createObjectURL(객체)

이 매소드는 이름 그대로 object를 가지고 url로 변환해주는 친구다. 그럼 이때 이런 질문들이 생길 수 있다. 그러면 모든 객체를 URL로 바꿀 수 있어요??  정답은 BLOB , FILE 객체만 들어갈 수 있다. 즉 이 경우에서는 이미지 file이기에 FILE 객체에 해당되고 그래서 객체를 URL로 바꿀 수 있었던 것이다. 그래서 결과적으로 우리는 FILE 객체를 가지고 문자열 형태의 URL를 만들어서 이를 가지고 이미지 미리보기를 구현할 수 있다.