개발 잡담
정말 간만에 업무 외의 개발을 할일이 있었다.
한 친구가 반복적이고 변경사항이 많은 업무를 개발로 처리할 수 있냐고 물어 본 것이다.
듣다보니 나도 가능한지 궁금해져서 진행하게 되는데...
요구 사항
요구사항은 심플했다.
쇼핑몰 서비스에서, 두개의 상품정보를 전부 바꿔서 수정을 해야한다는 것이었다.
회사가 자체적으로 쇼핑몰을 운영하거나 개발자가 있었다면 어려운 요구사항은 아닌데, 이를 UI를 통해서 사람이 변경한다면 손이 많이 갈 수 있는 종류의 업무였다.
이 내용을 들었을때는 솔직히 이걸 손으로 해왔다고? 싶었다. 보니까 입력 값도 상당히 많았던데...
해결 아이디어 & 서비스 분석
내용을 들으면서 생각한 방법은 ID를 바꿔서 전송하면 되겠네 였다.
처음에는 엑셀 같은 곳에 바꿔줄 상품 ID들을 넣어두고 촤라락 변경요청을 보내는 그런 기능을 생각하며 같이 해당 서비스를 보기 시작했었다.
해당 서비스는 PHP로 개발된 쇼핑몰로, 세션 기반 로그인 방식을 사용했다.
그런데 처음에 당황스러웠던 부분은 쇼핑몰 서버에서 관리하는 상품 ID와 회사에서 사용하는 상품 ID가 달랐다는 것이었다.
쇼핑몰을 임대해서 사용해서 그런지 자체적인 상품아이디를 상품명 마지막에 추가해서 사용하고 있었다.
그래서 상품 수정을 하려면, 해당 서비스의 상품명검색을 이용해 상품을 찾아야 했다.
검색 url에 id를 넣어 검색 결과 html을 받아온 뒤, 상품 리스트의 상품명에서 아이디가 일치하는 식으로 찾을 수도 있었겠지만,
이 시점에서 브라우저 콘솔 탭에서 실행할 스크립트를 만드는게 낫겠다고 판단했다.
아이디어 테스트
상품 수정 페이지는 form action으로 서버에 데이터를 전송하는 방식을 사용했고, 히든 인풋중의 하나가 상품 id 값을 가지고 있었다.
그래서 탭 두개를 띄운다음 각각의 아이디 인풋 태그 value를 바꿔준다음 전송을 하니, 데이터들이 다 변경 되었다!
이 시점에서 친구가 굉장히 만족해했다. ㅎㅎ
썸네일 처리 시도
여기서 멈췄다면 글로 남기기에는 좀 애매했을 것 같다.
그런데 자세히 보니 썸네일이 변경되지 않은 것이 아닌가!
그래서 살펴보니, 업로드 시에는 인풋을 통해 파일객체로 이미지를 서버에 전송하고 보여줄 때는 cdn url 링크를 받아 이미지 태그로 보여주는 방식이었다.
참고로 해당 이미지 링크는 확장자가 없었는데, 브라우저에서 링크를 직접 입력했을 때 HTML 파일로 다운로드되었다.
하지만, 해당 링크를 <img> 태그의 src 속성에 삽입했을 때는 정상적으로 이미지가 출력 되었는데
이는 요청의 Accept 헤더와 응답의 Content-Type 헤더때문이다.
MIME(Multipurpose Internet Mail Extensions)는 파일 형식과 포맷을 식별하기 위한 인터넷 표 준 - text/plain,text/html,image/*...
다시 돌아가 그러면 해당 인풋에 이미지를 넣어주면 되겠네 싶었다.
- propmt으로 대상 상품 아이디 및 상품 url 입력 받기 복사하기 쉽게 현재 상품의 값을 기본값으로 넣어줌
- 해당 url에 fetch로 data -> blob -> File 객체 변환 -> 인풋에 세팅
해당 로직을 구현하는 과정에서 두가지 문제를 겪었는데 첫번째는 CORS 문제였다.
img 태그에서 이미지가 정상적으로 로드되었기에 도메인이 허용되었다고 판단했으나, 이는 서버의 CORS 설정과는 무관했다.
JS로 접근을 시도했을 때는 CORS로 인해 차단되어 프록시용으로 간단한 express 서버를 띄워야했다.
두번째는 파일 객체는 인풋에 그냥 넣어줄 수 없다는 것이다.
File 객체를 input의 value로 직접 설정할 수 없는 것은 브라우저의 보안 정책 때문입니다.
이는 DataTransfer API를 사용하면 된다.
const dataTransfer = new DataTransfer();
dataTransfer.items.add(file);
inputElement.files = dataTransfer.files;
여기까지 했을 때, 정말 끝났다고 생각했는데 JS로 넣어준 이미지 파일은 업로드 되지 않았다...
처음에는 파일 객체의 MIME 타입이 application/octet-stream이어서 이것이 원인일 것이라 추측했다. 파일 타입을 image/png로 명시적으로 지정해보았으나 문제는 해결되지 않았다.
이미지 URL에 확장자가 없어 정확한 이미지 형식을 알 수 없었기에, Canvas에 이미지를 그린 후 JPEG 형식의 Blob으로 변환하여 파일 객체를 생성해보았다. 하지만 이 방법으로도 문제를 해결할 수 없었다.
form submit을 대체해 테스트용 express 서버에, 인풋 UI로 업로드한 이미지와 JS로 세팅해준 이미지 케이스 둘다 봤는데, 서버측에서 두 경우를 어떻게 구분하는지는 잘 모르겠더라.
여기까지 진행하는데 굉장히 삽질을 많이 했는데, 결국 이미지는 제외하고 상품 아이디만 바꿔주는 로직을 전달했다. 흑흑
그래도 하면서 배우거나 다시 복습한 것들도 많았고, 도와줄 수 있어서 좋았다!