TIL 2022-07-25 택배 조회 크롬 익스텐션를 위한 리서치

택배를 오매불망 기다리고 있는데 계속 검색하는 과정이 너무 귀찮았어서 택배 조회 익스텐션을 만들어놓으려고 함.

 

 

기존의 익스텐션중에 내가 원하는것과 비슷한것이 있나 검색해보았는데

 

"택배"로 검색했을때 나오는 3개의 앱 중 이중에서 내 의도와 맞는 앱은 딱 하나.

 

그마저도 운송장 만 기억했다가 팝업으로 조회 페이지를 보여주는 앱이었는데, 나는 크롬 익스텐션 앱에서 모든 내용을 검색하고 싶었기에 맞지 않았음.

 

 

 

 

우선적으론

 

우체국

대한통운

로젠택배

롯데글로벌로지스

 

(내가 써봤던) 택배사들 정도를 추려서 제작하고 추후에 추가하던지 하는게 좋을것 같다.

 

 

택배 데이터 수집은 어떻게?

 

https://tracking.sweettracker.co.kr/#example

스마트택배 API

이런 API도 있으나 비용을 들이고 싶진 않기에 패스하고

 

 

개발하기로한 4 택배사에선 3가지 방법으로 Response를 주고 있다.

 

우선

 

롯데로지스, 우체국은 Form Data로 운송장 번호를 넣으면 그 값이 포함된 HTML 파일을 내려줌

 

로젠택배의 경우에는 path variable로 운송장 번호를 넣으면 그 값이 포함된 HTML 파일을 내려준다

 

HTML 내려오면 그냥 파싱해사 나눠주면 될거 같고

 

CJ 대한통운 같은 경우에는 Form Data로 넣으면 Response로 택배 상세 정보 JSON이 오는 아주 간편하고 행복한 과정이다.

문제라긴 뭐하지만 신경써줘야하는 부분은 FormData에 운송장번호랑 같이 csrf토큰를 넣어주고 운송장 조회 페이지에 설정되어있는 SetCookie의 값을 일부 넣어줘야한다는 점인데...

그냥 Get으로 한번 운송장 조회 페이지 접근해서 csrf 토큰이랑 Cookie 헤더 가져와서 POST할떄 다시 넣어주면 될거 같다.

 

 

 

 

 

앞단에서는 어떻게 보여줘야할까?

 

일단 생각한바로는 아주 흔한 TODO LIST 형식으로 뜨는데(맨 위에 추가 INPUT 란이 있고 맡에 등록한 건들이 있고)

 

밑의 Row에서는 기본적으론 운송장 번호, 택배사, 배송 단계, 위치만 보여주고 클릭하면 Accordian 형식으로 과정들이랑 상세 조회내용들을 보여주는 형식으로 하는것을 생각중

 

 

뒷단에서는 어떻게?

일단 정보는 가져왔다고 하고 이를 어떻게 구조적으로 좋게 가져갈수 있을까?

 

생각할 점은 택배사마다 값을 반환하는 방식은 다른데 앞단에서 써야하는 내용은 사실상 동일하다는 점

 

뒷단에서 택배사들이 추가되도 다른 코드에 영향이 없어야한다

 

정도인거 같음...

 

 

일단 늦었으니 내일 다시 생각해보자