프로젝트로 느낀 window.location.href와 origin의 차이

프로젝트를 진행하던 중 링크공유 및 카카오 공유하기 기능을 맡게 되었다.

 

링크 공유하기는 window.location.href를 사용해서 현재 url을 복사하면 된다는 아주 간단한 생각을 했다. 

 

href를 사용하면 현재 페이지의 전체 URL을 문자열로 반환하며 웹브라우저의 주소 표시줄에 표시되는 것과 동일한 주소가 나온다. 

const ShareBtn = () => {
  const [isToast, setIsToast] = useState(false)
  const url = window.location.href

  const shareToFacebook = () => {
    const sharedLink = encodeURIComponent(url)
    window.open(`http://www.facebook.com/sharer/sharer.php?u=${sharedLink}`, '_blank')
  }

  const handleCopyClipBoard = async (text) => {
    try {
      await navigator.clipboard.writeText(text)
      setIsToast(!isToast)
      setTimeout(() => {
        setIsToast(false)
      }, 5000)
    } catch (err) {
      console.log(err)
    }
  }

이렇게 url을 window.location.href  선언하고

<ShareLinkImg
	src={LinkSvg}
	alt='link'
	onClick={() => {handleCopyClipBoard(url)}}
 />

링크 이미지에 onClick={() => {handleCopyClipBoard(url)}} 을 설정해 주고 링크 이미지를 눌러 url 복사해주면

url복사가 잘 되는 것 같다.. 고 생각했지만 문제가 있었다.

이번에 진행한 프로젝트는 익명의 질문 서비스 웹사이트로 링크공유나 카카오 공유 목적의 의미는 "내 닉네임으로 질문 많이 해줘" 라고 홍보하는 느낌..!

따라서 링크를 공유했을 때는 "꼬부기"에게 질문을 할 수 있는 페이지가 나와야 하는데

 window.location.href로 링크를 복사하게 되면 post/3273/answer(answer는 답변하는 페이지)

즉 "꼬부기"가 답변하는 페이지로 들어가게 되는 것, 

 

하지만 다른 닉네임을 가진 사람이나, 로그인을 안한 사람들이 "꼬부기" 전용의 답변 페이지로 들어가서 대신 답변할 수 없도록 로컬스토리지에 저장된 해당id값을 가진 사람이 아니면 홈페이지로 돌아가도록 설정을 해놔서 사진에 있는 링크를 공유해서 들어가면 홈페이지로 가는 오류가 발생하는 것을 늦게 알았다. 

 

그렇다면 window.location.origin을 사용해서 현재 페이지의 루트 url만 가져오고 useParms로 id값만 가져오자!

이런식으로 어떤 페이지에서 콘솔을 찍어도 루트 url만 가져온다.

useParms는 React Router에서 제공하는 hook으로 url의 동적인 파라미터 값을 가져오는데 사용된다.

<Route path='/post/:id' element={<IndividualFeed />}

App컴포넌트에 질문하기 페이지(IndividualFeed)로 갈 수 있는 React Router 의 '/post/:id' 를 useParms로 가져와서 

const ShareBtn = () => {
  const [isToast, setIsToast] = useState(false) 
  const Params = useParams()
  const url = `${window.location.origin}/post/${Params.id}`
  
    return (
    <>
      <ShareBtnDiv>
        <ShareLinkImg
          src={LinkSvg}
          alt='link'
          onClick={() => {
            handleCopyClipBoard(url)
          }}
        />
        <ShareFaceBookImg src={FacebookSvg} alt='facebook' onClick={shareToFacebook} />
        <ShareKakaoImg src={KakaotalkSvg} alt='kakao' onClick={handleShareKakao} />
      </ShareBtnDiv>
      <div>{isToast && <Toast />}</div>
    </>
  )

변수 url에 넣고 parms.id를 지정해주면 "꼬부기"의 질문할 수 있는 피드가 복사가 되어서 익명 질문 사이트에 딱 맞는 기능을 구현 할 수있다. 

해당 주소의 url은 답변하기 피드의 url 

콘솔에 찍힌 url은 복사한 url -> 질문하기 피드가 잘 나온 것을 확인할 수 있다