오늘의 총평 ⭐️⭐️✨

어쩌면 번아웃이 온 것 같기도 하다. 체계도 없고 성과도 없이 홀로 작업을 해나간다는 건 어려운 일이구나 새삼 깨닫는다. 스터디를 구하려면 프로젝트가 있어야 하고, 프로젝트를 하기에 혼자서는 힘이 부치는데 참 어렵다.

Multer

이미지를 업로드 하기 위해서 서버측에서 사용하는 middlware이다.

Multer는 body 객체와 한 개의 file 혹은 여러개의 files 객체를 request 객체에 추가합니다. body 객체는 폼 텍스트 필드의 값을 포함하고, 한 개 혹은 여러개의 파일 객체는 폼을 통해 업로드된 파일들을 포함하고 있습니다.
출처: multer/README-ko.md at master · expressjs/multer · GitHub

블로그와 공식 홈페이지를 돌아다니면서 base64에 대해서도 간략하게 배웠다. base64는 바이너리를 기반으로 하는 또다른 인코딩/디코딩 방법이라고 한다. 용량은 통상 바이너리로 인코딩 하는 경우 보다는 더 많이 나간다고 한다. 다만 장점으로 꼽자면 문자열 형식으로 이미지를 다루기 때문에 활용도를 높일 수 있다고 한다.

여튼, multer의 사용법은 따로 어려운 것은 없었다. 무엇보다도 공식 홈페이지에 자세하게 설명이 나와 있었다.
다만 어떤 기준으로 파일명을 구분하나 했더니, 내가 인자로 그 값에 대해서 알려주어야 했다.

app.post('/profile', upload.single('avatar'), (req, res, next) => {
...
})

2번째 multer의를 다루는 미들웨어 인자의 single메소드의 인자로 들어가는 값으로 이미지에 대한 접근을 할 수 있다.

참고

base64 이미지 전송 - Google 검색
우리가 Base64를 사용하는 이유 — 코딩배우는 학생🌎

Tiptap

현재 글 작성에 대한 라이브러리로 Tiptap을 사용하고 있다. Tiptap은 이미지에 대해서도 글의 내용으로 실을 수 있는 기능을 제공하고 있다.
다만 단순히 실어 줄 뿐이지 결국 이미지에 대한 처리는 서버 측에서 별도로 처리해 주어야 한다. multer도 그때문에 다시 공부하게 되었다.

이번에 서버와 이미지를 어떻게 처리하는 지를 다루면서 새롭게 알 게 된 사실이 있다. 이미지와 글을 별도의 통신으로 생각해야한다는 점이다. 만약에 글에 이미지를 싣는다면, 먼저 이미지에 대한 서버와의 통신을 미리 해야한다. 그리고 서버로 부터 그 이미지에 대한 path를 반환받아야 한다.
결국 글에 실리는 것은 이미지 자체가 아니라 <img src={path}/>가 되는 식이다. 당연히 서버측에서는 이미지를 처리하는 라우트를 새롭게 만들어야 한다.

지금 이 글을 쓰는 Velog도 같은 방식으로 이미지를 처리하는 듯 하다. 이미지를 업로드하면 주소가 반환되어서 글에 실리기 때문이다.