야근시렁

어느날 문득 어떤 로컬에서 어떤 페이지를 열어도 이런 에러가 발생했다.

lockdown-run.js:17 Lockdown failed: TypeError: At intrinsics.Object.groupBy expected boolean not function

lockdown-more.js:99 Protecting intrinsics failed: ReferenceError: harden is not defined

이렇게 두가지 에러가 한번에 나왔다.

찾아보니 이건 chorme extension에서 발생되는 에러라고 한다. 

나같은 경우에는 Metamask 에서 오류가 발생됬다. 

또 무슨 npm버전관련된 에러인줄 알았는데, extension 에러라니... 🥹 다행임.

기존에는 document.execCommand('copy') 를 사용해서 구현을 했었는데, deprecated 되었다고 합니다. 

그래서 다른 방법을 찾아보다가 useRef 를 사요해서 navigator.clipboard.writeText() 함수를 사용했는데, 로컬에서는 잘 되다가 배포이후 안되서 찾아보니 보안상의 이유로 https 에서는 복사가 되지 않는다고 하네요. 

그래서 결국 라이브러리를 사용했습니다. "clipboard-copy"라는 라이브러리 입니다. 

먼저 설치를 해줍니다. 

npm install clipboard-copy

그리고 copy라는 함수를 import 해옵니다. 

이 copy라는 함수로 useRef를 사용하여 input의 value값을 클립보드에 복사하기를 할 껍니다. 

import copy from 'clipboard-copy';

const App = () => {
  const inputRef = useRef();
  const handleCopy = () => {
    copy(inputRef.current.value);
    alert('복사되었습니다!');
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="복사할 문구를 적으세요~" />
      <button onClick={handleCopy}>COPY!</button>
    </div>
  );
}

대부분의 UI요소의 반응형은 css로도 처리가 가능합니다.

하지만 간혹 js 내에서 구조를 다시 그린다거나, className을 pc냐 모바일이냐에 따라 다시 그린다거나 하는 일이 자주 발생하기 때문에 js 내에서도 window의 사이즈를 실시간으로 알아야 하는 것이 필요로 합니다. 

React에서는 useEffect와 window의 size의 변화를 addEventListener함수를 통해 알 수 있습니다. 

import React, {useEffect, useState} from 'react'

const WindowWidth = () => {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth)
  const handleResize = () => {
    setWindowWidth(window.innerWidth)
  }
  useEffect(() => {
    window.addEventListener('resize', handleResize)
    // 컴포넌트 언마운트 시 이벤트 리스너 삭제
    return () => {
      window.removeEventListener('resize', handleResize)
    }
  }, [])

  return (
    <div>
      <p>Window Width: {windowWidth}px</p>
    </div>
  )
}

export default WindowWidth

1.  window.innerWidth : window의 width 값을 알 수 있습니다. 

2. return () => { window.removeEventListener('resize', handleResize) } : 컴포넌트가 DOM에서 제거될때 실행되는 클린업 함수입니다. 이걸 추가해 줘야 메모리 누수를 방지할 수 있습니다. 

이외 특정 width 값 이하일때 mobile로 구분하도록 해보겠습니다. 

저는 460을 기준으로 이하일때는 모바일 이상일 때는 pc라고 가정했습니다. 

import React, {useEffect, useState} from 'react'

const WindowWidth = () => {
  const [isMobile, setIsMobile] = useState(false)

  const handleResize = () => {
    window.innerWidth < 461 ? setIsMobile(true) : setIsMobile(false)
  }
  useEffect(() => {
    window.innerWidth < 461 ? setIsMobile(true) : setIsMobile(false)
    window.addEventListener('resize', handleResize)
    // 컴포넌트 언마운트 시 이벤트 리스너 삭제
    return () => {
      window.removeEventListener('resize', handleResize)
    }
  }, [])

  return (
    <div>
      <p style={{color: `${isMobile ? "blue": "red"}`}}>
        {isMobile ? 'MOBILE' : 'PC'}
      </p>
    </div>
  )
}

export default WindowWidth

useEffect 내에 addEventListener로 연결하기 전

이 부분을 한번 더 넣어주는 이유는 최초 실행 후 window의 resize가 일어날 때만 값이 바뀌기 때문에,

최초 화면이 mobile 화면이어도 초기 세팅값이 false이기 때문에 pc로 나옵니다. 

이렇게 resize가 일어나지 않았을 때 최초 렌더링 될 때 한번 체크를 해주기 위해 추가해 줬습니다. 

은근히 자주 사용하는 window 실시간 width값 가져오기였습니다~