[Next.js + TS] today i learned 7/21: 이미지 드래그앤드랍

사실 오늘 공부 계획을 전달했을 때는 이미지 드래그앤드랍 외에도 안읽은메시지 보여주는 기능도 하려고 했었다. 근데 이미지 드래그앤드랍에 시간이 좀 많이 소요돼서 결국 못했다 ㅜ

이미지 드래그앤드랍

오늘 해본 것은, 이미지를 외부에서 드래그해서 드랍했을 때 바로 나타나게끔 하는 드래그앤드랍이다. DM과 채팅 모두에서 가능하게 했지만, 둘 다 하면 너무 길어지니까.. DM만 작성할 것이다.

1. DM 페이지

여기서 다른 부분은 전부 이전 포스팅에서 다뤘으므로 생략하고 onDrop과 onDragOver만 볼 것이다.

1-1. onDragOver

우선 dragOver 상태, 그러니까 현재 페이지에 드래그오버된 것이 있는지를 나타내기 위해 useState를 setDragOver과 함께 만들었다.

onDragOver 함수를 보면,

1. e.preventDefault()가 되어있다. 기본적으로 크롬에서는 이미지를 드래그앤드랍 할 경우 이미지 링크로 리다이렉트가 된다. 이를 방지하기 위해 넣은 것이다.

2. console.log(e)는 그냥 상태 보려고 넣은거고, setDragOver(true)를 함으로써 dragOver가 되어있을 때 움짤처럼 업로드! 라는 글씨와 함께 스타일이 적용되게끔 하였다.

 

1-2. onDrop

onDrop 함수는 좀 복잡하다. if (e.dataTransfer.items) 부터는.. Mozilla의 drag and drop을 그대로 갖다 썼다. 그래서.. 사실 무슨 뜻인지 잘 모른다;; 대충 코드를 봐보자면, formData를 만든 다음에, 데이터가 옮겨지는 e.dataTransfer.items가 있다면, 그 길이만큼 for문을 돌면서 종류가 file일 경우 formData에 추가하는 것으로 보인다. 그 이후에는 axios를 통해 API통신을 하고, 성공했을 경우 "업로드!"가 떠있던 화면을 원래대로 돌려주고. revalidate를 통해 서버로 다시 요청을 보내서 데이터를 받아온다.

 

2. Chat 컴포넌트

이부분이 가장 중요하다. Chat 컴포넌트에 적용함으로써 우리가 이미지를 드래그앤드랍 했을 때 채팅이 이뤄지는 부분에 이미지가 들어가게 되는 것이다.

우선 다른 부분들은 이미 이전에 했으므로 넘어가고 BACK_URL부터 return 전까지 알아보자.

 

이 클론코딩에서 제일 중요한 건 역시 서버와의 API통신이다. 기본적인 메인 서버가 있고(sleact.nodebird.com), 내가 로컬에서 돌리는 서버(http://localhost:3095')가 있다. 개발중인 상태인 경우(development 상태인 경우, 이부분은 webpack 설정까지 봐야돼서 좀 깊어지므로 넘어간다) 현재 내가 로컬에서 돌리는 서버를 백엔드 URL로 잡고, 그게 아닌 배포용 상태인 경우 sleact.nodebird.com을 백엔드 URL로 잡는다. 이부분이 중요한게, 22행에서 이미지 컨텐츠가 저장되는 곳이 BACK_URL을 기준으로 한다.

 

data.content가 'uploads\\' 또는 'uploads/'로 시작하는 경우 앞서 설정한 BACK_URL에 들어가 있는 data.content를 이미지 주소로 받아와서 result 변수에 이미지태그가 들어가게끔 한다. 그리고 return문에서 p태그 사이에 result를 넣음으로써 결과가 출력되는 것이다.

 

regexifyString은 사실 잘 모른다,, 휴 걍 정규표현식으로 바꾸는 것이라고 보면 될것같다. 이 부분은 결과적으로 업로드가 되지 않았을 때 이미지 대신에 사진의 정보를 알려주는 부분이다.

이렇게 실패했을 때는 이미지의 정보가 뜬다. 이 사진은 uploads/로 시작하는 경우에도 되도록 21행에서 처리를 하지 않았던 때에 발생한 오류이다. regexifyString의 예시를 보여주고자 제외하고 해봤다.