[Side Project] 세 번째 프로젝트, Store Uploader

오픈커머스에 상품을 대량 등록하기 위한 데스크탑 어플리케이션 서비스 제작

 

1. 기획이유

---

엑셀 수정 프로그램 제작과 동일한 이유로 제작하게 되었다. 일하는 곳에서 업무를 자동화할 만한 일들이 곳곳에 보였고, 조금 더 쉽고 빠르게 업무를 처리할 수 있도록 제작하였다. 우선, 오픈커머스에서 제공하는 사이트에서 업로드하는게 까다롭진 않다. 그치만, Queue방식처럼 하나가 해결되어야 다음 것을 업로드할 수 있는 구조라. 대기 시간이 불필요하게 많아 보였다. 왜냐면, 잘 업로드 되었는지 계속 확인해야하고, 업로드 작업을 이어나가야 하니까! 만약, 프로그램으로 만들게 된다면, 그냥 넣고, 업로드 버튼만 누르면 알아서 스토어 아이디별로 업로드가 되어 정말 쉽고 효율적일 것이다. 그래서 만들었다.

 

2. 요구사항 정의

---

요구사항은 참 간단하다. 파일들을 어플리케이션에 넣으면, 알아서 해당 스토어 아이디로 상품이 등록되기만 하면 된다. 처음엔 이러한 서비스를 제작하기 위해서는 어떻게할까? 참 고민이 많았다. Selenium을 사용해 매크로를 만들어야 하는가? Pythondㅣ나 Javascript의 http 요청 모듈(requests, axios...)을 활용해 로그인하고 받아온 세션 값을 통해 업로드를 진행해야 하는가? 뭐 여러 방법이 있었다. 해결하기 위해 사이트들의 코드들을 살펴보느라 굉장히 힘들었다.

3. 개발구조

---

이 또한, Electron을 사용해 개발하였다. Electron, Vue.js, Node.js 를 사용한 어플리케이션이고, 엑셀 수정 프로그램과 유사하게 제작하였다. 참 고생이 많았던 것이. 과연 로그인을 어떻게 유지하는가?였는데. 

 

진짜 바위에 계란치기마냥. 로그인할 때 ID/PW를 어디로 전송하고, 또한 ID/PW를 어떤 방식으로 암호화하는지 파악해 정말 로그인하는 것처럼 했다. 예를 들어, 공개키 방식으로, RSA/SHA1 등으로 암호화를 실제 진행하고 있었고, 관련 라이브러리가 있어 해당 로그인 값 전송 URL에 암호화해 전송해줘 세션 값을 획득할 수 있었다.

 

사실 이럴 필요가 없었던 것이. Selenium나 Puppeteer을 통해 로그인하고 로그인하고 넘어간 페이지에서 세션 값을 획득했으면 좀 더 쉬웠을텐데. 소비한 시간이 참. 마음이 아프다. 무튼, 로그인 이후 업로드할 파일들이 어떻게 전달되는지 파악하여 업로드 Method를 잘 짜내려갈 수 있었다.

 

조금, 업로드할 양이 많다보니 파일업로드 창에서 파일이나 폴더를 선택하는 과정이 좀 귀찮다고 느껴졌다. 그래서, Dropover 방식으로 파일이나 폴더를 업로드할 수 있도록 하였는데. 폴더 안에 폴더를 여는 Javascript 코드를 짜는게 살짝 까다로웠다. 관련한 내용도 찾기 힘들었고. 그냥 간편하게 라이브러리를 쓸 걸 그랬다.

 

마지막으로, 딱히 DB는 필요 없었지만, 간단하게 ID/PW를 저장할 만한 저장소가 필요했고, localStorage를 사용하여 로그인할 ID/PW를 저장하도록 하였다. 다시 로그인하는 과정이 귀찮으니까 말이다!

해당 서비스를 만들며 코드를 어떻게 효율적으로 짜내려가야하는지. 개발 시 기본적으로 알아야할 사항들에 대해 더 Deep하게 알게된 것 같다. 처음에 기초부터 배운게 아니라. 가면 갈 수록 어려움을 겪는 것 같다. 배울 것도 참 많다 느끼고! 무튼, 예를 들어 axios에서는 default encoding으로 UTF-8을 갖고, http 요청 시, cookie나 user-agent와 같은 헤더 속성을 브라우저, 즉 프론트에서 설정할 수 없다는 것도 알았다. 또 input type=file에서는 HTML 보안과 관련한 스펙으로 인해 value를 바꿀 수 없는 Read Only라는 것도 말이다. 참 많은 요소들이 있는 것 같다. 아! 또 CORS나 Content-type, Format 등 다양한 헤더나 데이터 타입에 대해 공부하는 좋은 기회가 되었다.

 

최종적으로 개발된 모습을 확인하자면 다음과 같다. 사실 기능을 만드는 것에 주력했기에 UI는 참.. 애매한 것 같다. 또 커머스마다 요구하는 사항들이 달라 제 각각의 모습이라 마음 아프다.

4. 결론

---

위에서 말했듯이. 개발 시 알아야할 사항들이 굉장히 많은 것 같다. 보안 관련 스펙으로 인해 불가능한 작업들. HTTP 요청 헤더와 관련한 여러 속성들.. 더 배워야할 것들이 많다는 걸 느끼는 프로젝트였다. 그리고, 브라우저에서 로그를 확인할 때 참 어려웠던게 너무 빠르게 페이지가 전환되면서 이전 로그들이 삭제된다는 점이다. 그런데, 감사하게도 크롬에서 'Preserve Log'라는 기능을 제공해주고 있어 요긴하게 쓸 수 있었다.

chrome 개발자 화면 Network 탭