[중간이들] URL 생성할 때는 항상 슬래시 (경로 구분자)를 조심해야함

예전에 multer로 이미지 처리를 할 때 경로구분자로 인해 배포 환경에서 오류가 났던 경험이 있었다.

내 컴퓨터인 윈도우에서는 경로구분자가 '/' 슬래시였으나, 배포 컴퓨터의 운영체제인 리눅스에서는 경로구분자가 '\' 역슬래시여서 문제가 발생하였다.

 

https://programming-bellybutton.tistory.com/209

[꿀단집] 배포환경에서 multer로 프로필 이미지 변경이 안 되는 문제 - 서버 파일 경로 구분자 문제

 

multer는 단점이 뚜렷하기 때문에 이 프로젝트 이후에 제작한 프로젝트에서는 AWS S3 같은 클라우드 저장소를 활용하여 진행하고 있다.

 

이제 단일 이미지 업로드하는 건 구현을 하였다.

TinyMCE 에디터에서 S3을 연동하였을 때 또다른 문제가 발생하였다.

 

게시물 작성에서 이미지를 업로드하고 그 이미지가 게시판 본문에 첨부되어야 한다.

1) presigned URL을 받아서 S3에 업로드

2) 업로드한 URL을 게시판 에디터 안에 이미지 태그로 렌더링하기 

3) 해당 이미지 URL을 request body안에 넣어서 서버로 POST 요청

4) 서버가 게시물 제목, 본문, 첨부된 URL 등을 한꺼번에 저장함.

 

이런식으로 진행된다.

 

가장 큰 난관은 S3과 TinyMCE 에디터의 연동이다.

이미지를 첨부하였는데 S3에는 업로드가 되었으나, 에디터에는 해당 이미지가 제대로 보이지 않았다.

 

확인해보니까 생성된 URL에 경로구분자가 2개가 중복되어 있었다.

com/images/2024 어쩌구~ 이런식으로 되어야 하는데, com/images//2024로 되어 있으니 제대로 조회하지 못해서 에러가 발생하였다.

 

슬래시가 2개 생성되는 경우는 S3과의 통신 과정에서 발생하였기 보다는, 내가 이미지 업로드 이후 URL을 생성할 때 발생하였을 확률이 높다.

 

리액트 코드를 확인해보니까 fileUrl에서 url과 fields의 키를 합쳐놓은 저 부분이 의심이 갔다.

 

역시나 예상대로 저 두 개를 합칠 때 슬래시가 중복되는 문제가 발생하였다.

• URL이 "example/happyday.com/' => 슬래시로 끝남.
• fields의 key의 value는 'images/어쩌구~' 

 

두 개를 합칠 때 URL + / + fields['key']를 해놓으면 이 두 사이에 슬래시가 한 번 더 들어간다.

 

 

그래서 아래와 같이 수정해주었더니 잘 해결되었다.

const fileUrl = `${url}${fields['key']}`;

 

URL을 올바르게 생성하여 이미지가 에디터 안에 잘 첨부되었다.

URL 생성할 때는 항상 슬래시 (경로 구분자)를 조심해야한다는 것을 다시 한번 깨달았다.