params를 쓸까 query를 쓸까?

(참고로 이 글은 파라미터와 쿼리스트링에 대한 정보가 담긴 글은 아닙니다ㅋㅋ)

포트폴리오에 readme를 모달로 띄워놓은 상태였다.  따로 만든 이력서에 플젝설명을 또다시 적는 삽질보다는 해당 링크를 거는게 낫지 않겠는가 싶어서 호기롭게 시작했지만, 코린이에게는 역시나 고비가 왔다. 

 

내 포폴은 SPA이다. 컴포넌트 하나에만 route를 해놓은 상태였다. 

제일 먼저 생각한 방법

 

1. params가 있을 때 모달을 띄울때 걸어놓은 setState 상태를 바꾸자 라는 방법이였다. 

Layout컴포넌트는 nav와 footer는 공통 Outlet 갖고 있는  화면 전체 레이아웃이다. 

처음에는 그냥 layout의 path에 :parmas를 했지만 아예 화면이 보이질 않았다. 

그래서 따로 Project 컴포넌트를 path를 만들어서 params를 받도록 했다.

 

리액트 useParams를 이용해서 링크에 들어오는 파라미터를 받아서 걸러내는 방법이였다. 

분명 로컬에서는 잘 작동이 되더라만, 배포하고 보면 안보이는 상태였다. (spa인걸 다시 생각하게됐다)

 

 

그렇다면, index.js에서 APP을 감싸고 있는 BrowserRouter가 문제인걸까?

라며 찾아보던 중 에 BrowserRouter사용시에 github pages는 설정하기 복잡하다고 한다. 

BrowserRouter는 동적 페이지에 적합하다고 한다. history api로 ui를 업데이트하기 때문에 새로고침시에 경로를 찾지 못한다고 한다. 반대로 HashRouter는 미리 저장되어 있는 페이지가 그대로 보여지기 때문에 새로고침시에도 에러가 나지 않는다.

 

음음.. 그니까 브라우저라우터는 Link태그를 사용하면서 단순히 주소만 바꾸며 컴포넌트를 렌더링 하는 역할이고 해쉬라우터는 해쉬 이전에 url만 서버를 통해서 불러온다는 점이다.  단 해쉬라우터는 검색엔진은 읽지 못한다. 난 포폴용이기에 딱히 검색엔진은 필요 없던점을 감안하여 HashRouter로 변경을 해보았다. 

먼저 App을 감싸던 BrowserRouter대신 HashRouter를 넣어줬고, 주소에 #를 붙여줘야 한다.

http://포폴주소/project/reamd01 이렇게 되어 있는 것을 

http://포폴주소/project/#/reamd01 

 

다행이!! 해당 주소 url을 쳐보니 모달창만 띄워진 화면을 구현할 수 있게 되었다. 

하.지.만 Project 컴포넌트에만 path를 만들어 준 상황이라 공통영역인 네비게이션이 보이는데 메뉴는 클릭이 되질 않고  간단하게 만드려고 했던게 컴포넌트 분리가 좀 있던지라 CSS수정을 또 해야하는 참이였다. 이래서 재활용이 높게 컴포넌트 화 시키는갑다.. 라고 또 뼈맞긴 했지만 여튼 시간이 조금 더 있었으면 차분하게 더 고쳤을텐데 바로 지원해야 할 회사가 있어서 급하게 이부분만을 수정할 수 있는 방법을 고안하게 됐다.

 

혼자서 좀 벅차길래 선생님께서 전반적으로 쏴악 피드백을 주셨는데 결론적으론 params를 받지말고 query를 사용하기로 한것이였다. 유레카!! 

 

useParams로 파라미터를 받는 대신 useSearchParams로 파라미터 값을 받았다. 

요케하니까 모든 app.js에서 parmas를 받던 route삭제하고 문제는 해결 종료.

 

회고아닌 회고가 ... 회고인가..? 뭐여튼 

이럴때마다 느끼는 거지만, 귀찮더라도 많이 시도하고 해봐야 한다고 생각은 한다. 

모르는거 검색하다가 또 샛길로 빠져서 '이사람은 이렇게 문제를 해결하는구나..' 하고 

반성이 깊어져 가끔 자책이 되기도 하지만.. 알게됐으니까 천천히 하나씩 하나씩 풀어나가보쟝..

 

나새꾸 화이팅..!

 

 

[참고 블로그 목록]

 

https://velog.io/@pear/Query-String-%EC%BF%BC%EB%A6%AC%EC%8A%A4%ED%8A%B8%EB%A7%81%EC%9D%B4%EB%9E%80

Query String 쿼리스트링이란?

https://webisfree.com/2019-07-26/자바스크립트에서-url-쿼리스트링(query-string)-쉽게-가져오는-방법 

자바스크립트에서 URL 쿼리스트링(query string) 쉽게 가져오는 방법