JavaScript 썸네일형 리스트형 브라우저에서 뒤로 버튼을 사용할 수 있는지 여부 체크하는 방법 결론: 할 수 없다. 기술적으로 history.previous을 확인하는 정확한 방법이 있습니다. history.previous 그러나 작동하지 않습니다. 대부분의 브라우저에서 history.previous를 보안 위반으로 간주하고 일반적으로 undefined을 반환합니다. 다른 사람들은 아래와 같은 방법을 제안하지만.. history.length 그러나 length는 당신이 history에서 어디에 있는지를 나타내지 않기 때문에 완전히 작동하지 않습니다. 또한 항상 같은 숫자로 시작하는 것은 아닙니다. 예를 들어 랜딩 페이지를 갖도록 설정되지 않은 브라우저는 0에서 시작하는 반면 랜딩 페이지를 사용하는 다른 브라우저는 1에서 시작합니다. 이슈 재현 1. https://~ 새창으로 열기 2. 이전 버튼 .. Next.js "window,document is not defined" 해결하는 법 https://sumini.dev/issue/000-nextjs-window,document-is-not-defined/ Next.js "window,document is not defined" 해결하는 법 Next.js 개발환경에서 window object를 사용할 때, document is undefined, Cannot read innerWidth of undefined 등의 에러메세지를 마주할 때가 있다. Next.js… sumini.dev [next.js] setting init 1. 터미널에 명령어를 순서대로 작성 nvm use 14.15.5 yarn init -y yarn add react react-dom next 2. package.json "scripts": { "start": "next" "build": "next build" }, pages 폴더 생성 pages 폴더 생성해서 index.tsx 파일 만들기 scss loader 설정 yarn add classnames sass --save --dev [파일명].module.scss typescript 1. 루트 디렉토리에 next-env.d.ts 파일을 만들기 2. package 설치 yarn add --dev typescript @types/react @types/node 3. 파일들을 .tsx 파일로 변경.. [next.js] 맵핑되지 않는 라우터 404페이지 노출 대신 redirect 하는 법 pages/404.js import { useEffect } from "react" import { useRouter } from "next/router" import { TEMPLATE_MODEL } from "../common/constants/Template"; export default function Custom404() { const router = useRouter() useEffect(() => { router.replace(`/${TEMPLATE_MODEL}`); }) return null } svg 그라데이션 동적으로 적용 export const createSvgGradient = (svg: SVGSVGElement, id: string, stops: IStop[]) => { const svgNS = svg.namespaceURI; const grad = document.createElementNS(svgNS, 'linearGradient'); grad.setAttribute('id', id); stops.forEach((stop) => { const stopNS = document.createElementNS(svgNS, 'stop'); stopNS.setAttribute('offset', stop.offset); stopNS.setAttribute('stop-color', stop.stopColor); grad.appe.. package.json add classic.yarnpkg.com/en/docs/cli/add/ 커서 맨 뒤로 이동하기 export const setCursor = (el: HTMLElement, offset: number) => { const range = document.createRange() const sel = window.getSelection() range.setStart(el, offset) range.collapse(true) if (sel) { sel.removeAllRanges() sel.addRange(range) } } setCursor(textRef.current, textRef.current.childNodes.length); safari relatedTarget = null 이슈 (구)safari에서는 버튼이 아닌 element를 클릭 시, FocusEvent의 relatedTarget이 null을 갖는다. const handleTextEditorBlur = (event: FocusEvent) => { const relatedTarget = event.relatedTarget as HTMLElement; console.log(relatedTarget); // null in safari } 해결방법 클릭을 받는 element에 tabIndex = 1 을 주면 된다. 이전 1 2 3 4 5 6 7 8 ··· 12 다음