[JS] : URL 에서 자원(데이터) 가져오기

구현 하고자 하는 것 !!

URL 로부터 내가 원하는 데이터 가져오기 !!

 

고민이 생긴 부분

항상 프로젝트를 진행하면서 백엔드 기능을 test도 하며 구현을 마치고,,,
이제 이 기능에 날개를 달아줄 프론트 페이지 작업도 하면서 프론트와 백을 연결하는 과정에서 찾아온다.

버튼 하나에 이벤트리스너 야무지게 달고 async await 야무지게 사용하고 ~
fetch 로 내가 구현해놓은 해당 API로 데이터도 날리고 갖고오는데 중요한건

이런 API주소이다.

/api/user/:userId/resumes/:resume

param으로 받아야 하는 각 데이터의 정보가 담긴 id값을 백에서 어떻게 건내줘야되니....

이 부분은 항상 project 시작하면서 api 명세를 작성하면서 부터 고민이 생긴다.

지금 현재는 팀원들과 "채용 공고 사이트 구현하기" 프로젝트를 진행중에 있는데, 이제 백단은 api명세에 작성한 필수 기능은 구현을 마쳤고, 프론트 페이지 작업을 하면서 내가 프론트와 백을 연결하는 역할을 맡고있다.

이유는 점점 더 강해지기 위해서 ... !!

 

지난번 경험에는 뭐 현재 브라우저의 URL 가져와서 원하는 입력값 만들려고 split도 쓰고 막 그랬었는데,

보다 더 확실한 방법이 존재하지 않을까 하는 생각에 막상 부딪혀보자 !! 하고 현재 진행중에 있다.

 

시도한 부분

가장 최근에는 window.location 객체에 대해서 알게되었다.

그래서 지난 프로젝트에서는 일부러 api 명세를 작성하면서 부터 프론트와 백단을 연결할 부분을 미리 고려해서 필요한 param을 api에 다 집어넣었다. (뭐 그래봤자 userId / columnId 이렇게 1~2개 수준이지만..)

여기서 어떤 코드를 사용했냐면 이 코드다.

window.location.search

 

window 객체

지금 당장 그냥 개발자도구 창 열어서 console.log(window) 만 쳐봐도 여러 데이터들이 나오는 것을 알 수 있다.

 

window.location

 

이 중에서 내리다 보면 window 객체가 가진 데이터 중에 location이라는 요소가 있다.

그 녀석을 열어보면 안에 내가 원하는 자원을 품고있는 url이 구성요소 별로 나열도 되어있고 ~

전부 다 나와있는 요소도 있다 !!!

여기서 search 라는 요소의 데이터를 살펴봤다.

 

window.location.search

search 요소를 살펴보면 다음과 같은 자원들을 query 문으로 갖고있는걸 볼 수 있다.

요 녀석을 이용해 나는 필요한 자원을 골라 쓰고,

걔를 식별자에 할당해서 내가 원하는 데이터가 담겨있는 API 주소로 fetch를 보낼꺼다.

 

예시

  const params = new URLSearchParams(window.location.search);
  const userId = params.get('id');
  const resumeId = params.get('resumeId');

실제 프로젝트에서도 사용한 코드이다.

위 코드로 내가 원하는 param의 값을 가져올 수 있다.

param.get 이란 url에서 ?type=post 요론 녀석들 에서 "=" 기준으로 앞에는 key라고 생각하면 된다.

뒤의 녀석을 그 key가 가지고 있는 value 값이다.

 

내 uri에서는 id 라는 key 값에 userId 그리고 resumeId 값에는 resumeId 가 들어있었다.

const userData = await fetch(`/api/users/user/${userId}`);

  const userEducationData = await fetch(`/api/educations/${resumeId}`);

위와 같은 요청을 보내기 위해서 필요한 자원들이다.

이런식으로 필요한 자원을 가져와서 내가 원하는 데이터를 활용할 수 있다.

 

새롭게 시도중인 것

그럼 이제 내가 원하는 데이터를 얻기위해 fetch를 보낼건데 api에 들어가야하는 필수 자원을 프론트 URL에서 얻어내지 못한다면??

어떻게 서버에 요청을 보내면 되지 ???

궁금해졌다 이럴 때가 분명 있을것 같은데 말이지.. 이럴땐 어떡하지 ???

궁금해서 지금 실제로 그렇게 해보고있다.

 

 

#window #location #search #window_객체 #f12 #cmd_opt_i