원인
에디터를 사용하고 있는데 이미지에 링크태그를 넣으면 a 태그로 적용이 된다..
앱내에서 웹뷰를 사용해서 포스팅을 관리하고 있었는데 이미지를 클릭하여서 상세 보기로 이동하고 다시 뒤로가기를 누르면 기존 포스팅으로 이동하지 않고 메인으로 이동하게 되었다.
원인을 생각해보니 a태그로 인해 히스토리가 쌓이지 않아서 뒤로가기 하면 히스토리없이 메인으로 이동하게 되는 것이었다.
방법을 찾기 위해서 검색하던 도중 라이브러리를 활용하라는 말이 많았기도 했는데 배포할때 그냥 기본 nextjs 가 배포시간이 오래걸려서 라이브러리로 더 용량을 늘리기는 싫었다.
테스트 할때마다. 맥으로 개발중인데 안드로이드 테스트 해야 해서 빌드를 해야만 테스트가 가능해서 계속 빌드할때마다 시간을 소요하는 것이 너무 불편했기 때문이다.
그러다가 챗GPT 의 도움을 얻어보자 생각하였다. 처음에 너무 큰 범위로 질의를 하니 그냥 next.js의 router를 사용해서 히스토리를 쌓아라 이런식으로 나오길래 범위를 좁혀서 이렇게 이렇게 하고 싶은데 제안해줘 라는 방식으로 질문을 하니 버블링에 대해서 파악하고 코드를 알려주었다.
이게 html이 템플릿형식으로 고정되었다면 쉽게 해결할수 있었는데 에디터에서 만들어준 코드들을 서버에 저장하고 코드들을 뿌려주는 형태라서 고정된 에디터따위는 없었다.
그래서 부모 태그로 감싸고 이벤트 버블링을 활용하여 코드를 구축할수 있었다.
const handleLinkClick = (event: React.MouseEvent<HTMLDivElement>) => {
const link = event.target as HTMLAnchorElement;
if (link.tagName === "IMG") {
const isParentAnchor = link.parentNode; //부모를 지정
if (isParentAnchor instanceof HTMLElement) {
if (isParentAnchor?.tagName === "A") {
event.preventDefault(); // a태그로 바로 이동하지 않도록 설정
const href = isParentAnchor.getAttribute("href"); // href 값가져오기
const {
token,
seq,
languageIsoCode,
timezone,
displayTargetPageName,
refUrl,
} = paramObj;
router.push(
`/imgviewer?src=${href}&refUrl=${refUrl}&token=${token}&seq=${seq}&timezone=${timezone}&isocode=${languageIsoCode}&pageName=${displayTargetPageName}`
);
}
}
}
};
코드를 짤때 처음 A 태그를 잡아서 진행하려고 했는데 A태그 범위가 height가 작아서 그런지 img 보다 작아서 img, A 둘다 클릭시에 이벤트가 진행되도록 코드를 짜게 되었다.
a태그의 기본 이동에서 router.push를 이용해서 히스토리를 쌓아보자라는 생각을 코드를 짜게 되었다.
다행히 a 태그 말고 router로 이동이 잘 되었다.
중간에 문제점을 만나게 되었는데 nextjs 13버전을 써서 나온 문제였다.
문제 직면 "NextRouter was not mounted."
기존에 쓰던 방식으로 router 를 import 를 했는데
"NextRouter was not mounted." 라는 오류를 직면하게 되었다.
찾아보니 next13 에서는 'next/router' 를 사용하지 않고 'next/navigation' 모듈로 변경되었다고 한다.
import { useRouter, useSearchParams } from "next/navigation";그래서 import 할때 Router,와 Params 도 따로 가져와서 사용하게 되었다.
하지만 router로 이동했는데 뒤로가기 눌렀을때 정상적으로 작동하지 않는것 같아서.
params 에 이전 주소를 강제로 부여 하는 방법을 사용하게 되었다.
결국 뒤로가기의 기능은 잘 작동하도록 하였는데 코드가 지저분 하게 되었다.
뒤로가기 로직
즉 나의 방법은
img,a 태그 의 이벤트를 router.push 로 변경해 준다 + queryPrams로 현재 url과 필요state를 url에 저장해준다. -> 이동한 페이지에서 뒤로가기 버튼을 만들었고 뒤로가기 버튼을 누를때 저장했던 url 값을 이용해서 router.push 해준다. 이번에도 state를 사용해야 하기 때문에 처음 포스팅에서 저장한 state를 그대로 router.push 할때 queryParams로 넣어준다. 다시 포스팅 위치로 왔을때 state 를 받아서 작동시켜준다.
router.push 로 히스토리를 쌓고 이동해줬는데 왜 뒤로가기할때 작동이 안되는지 이해할수 없어서 좀 돌아가는 방법을 활용했지만 다행히도 이동한 페이지에서도 router를 활용할수 있어서 params를 쓸수 있는 것이 다행이었다.
완벽한 방법은 아니지만 해결했다는 것에 의의를 두었다.
