디버깅노트 (10) 썸네일형 리스트형 [solved] nextjs 13버전 404 에러 페이지에서 다른 페이지 이동시 오류 nextjs 13버전으로 페이지를 제작하면서 다양한 오류들을 만나는데 제일 황당했던 오류 중 하나.. 404에러 발생시 라우팅되는 페이지인 not-found.tsx가 화면에 뿌려진 상태에서, next/link 로 다른 페이지 이동시 계속 not-found 에서 화면이 바뀌지 않는다. csr과 ssr을 혼용한 탓에 난 오류인가 싶어서 layout까지 대거 드러내고 수정해봤지만 먹히지 않음,, link를 앵커태그로 고치고 이동할때마다 리렌더링되게 하는 게 나을까 싶었으나 구글링해보니 it has actually been fixed, just update your project to the latest nextjs version, npm install next@latest react@latest react-d.. [solved] nextjs 13 useRef 추가하면 에러 발생 Warning: Invalid hook call, TypeError 까지 슬라이더 라이브러리 Swiper를 조작하려고 useRef()를 쓰려는데, 예상치 못한 에러가 미친듯이 발생한다;; Unhandled Runtime Error Error: Invalid hook call. 이라면서 Hooks가 잘못 호출되고 있다는 거다.. 터미널에선 error TypeError: Cannot read properties of null (reading 'useRef') 라며 타입에러라고도 내뱉고 있었다. 원인을 계속 못 찾던 중.. hooks 호출이 잘못됐다니까 순서를 바꿔볼까..? 하는 마음에 랜더 순서 가장 상위로 올렸다 useRef 호출하는 코드를 위로 올렸더니 잘 돌아간다. 혹시나해서 테스트겸 다른 코드도 위에 추가해봤는데 다른건 괜찮다. 저 언어팩 호출하는 놈이 문제였던 듯 하다... next.js <Image /> attribute 타입 지정시 TS2322: Type 'StaticImageData' is not assignable to type 'string'. 에러 next.js에서 이미지를 마크업할 때 next/Image 컴포넌트를 주로 이용한다. lazy loading과 이미지 사이즈 최적화, placeholder 기능 등 유용한 쓰임이 있기 때문이다. 이번에 컴포넌트로 분리하는 작업을 하다가, 컴포넌트의 src값을 props로 받아오도록 했는데 언어가 typescript다 보니 props 값의 타입을 지정해줘야 했다. {title} {subTitle} export interface contentProps { title: string; subTitle?: string; background: string; } 위와 같이 background(즉, src의 타입)에 string으로 설정하면 될 줄 알았다...! 하지만 background에 들어갈 값은 import된 .. Mac m2 소스트리(github) 연결 + 소스트리에 클론할때 비밀번호 확인창 계속 뜨는 오류 해결 맥북 에어 M2를 구입했다! m2에 기존 쓰던 것들을 셋팅하고 있는데, 쉽게 되던 것들이 요상하게 막혔다. 본인은 github에 소스코드들을 저장하고 있고, 이를 GIT GUI인 sourcetree를 통해 관리하고 있다. 이전 맥에서 https로 소스를 관리하다보니 어느순간 토큰 에러 같은게 뜨면서 더이상 지원되지 않았다. https가 막히면서 작업 도중에 ssh로 변경했는데 그러다보니 약간의 우여곡절이 있었음.. 그래서 이번엔 애초부터 ssh로 연결하기로 했다. 우선 계정...으로 들어가 새 계정을 추가했다. 위처럼 github로 로그인해 계정을 연결하면 SSH 키에 .pub 파일이 생성되는데 바로 아래에 클립보드에 복사 버튼을 누르면 ssh키가 복사가 됩니다! (아무것도 안떠서 처음엔 당황했지만 확인.. 유튜브 임베드 오류 failed to execute 'postmessage' on 'domwindow': the target origin provided ('<url>') does not match the recipient window's origin ('<url>'). failed to execute 'postmessage' on 'domwindow': the target origin provided ('') does not match the recipient window's origin (''). 슬라이드에 유튜브 영상들을 임베드하는 작업을 하고 있었다. 이때 슬라이드가 돌아가면 재생중이던 유튭 영상이 일시정지 되어야 했다. 구글링을 해보니, postMessage로 유튭 영상을 제어할 수 있었다. 슬라이드 오른쪽 왼쪽 버튼을 클릭할때마다 (혹은 슬릭과 같은 라이브러리 사용시에는 afterChange 이벤트 후에) 아래의 코드를 넣었다. const player = document.querySelectorAll('.video_player'); for (let idx in.. yarn 실행 오류, Set-ExecutionPolicy : 레지스트리 키 엑세스 거부 해결 방법 git으로 업무를 하는데 pc를 옮기면서 새롭게 클론을 받다보니 여러 오류와 맞딱뜨리고 있다. 명령어 yarn을 쳤더니 이 시스템에서 스크립트를 실행할 수 없으므로 ~~파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies~~를 확인해보라는 경고 메시지가 뜬 것이다. 그래서 검색해보니 Set-ExecutionPolicy 명령어로 제한을 풀어야한다는 것. 그냥 터미널에서 Set-ExecutionPolicy를 치니까 보안때문에 여전히 명령어가 안먹힘. Set-ExecutionPolicy : 레지스트리 키에 대한 액세스가 거부되었습니다. 라는 경고가 뜸. 이럴땐 파워쉘을 관리자 권한으로 접속해야한다. 쉽게 들어가는 방법 윈도우 검색 -> powershell -> 오른쪽 버튼을 .. 자바스크립트 작동 안될 때, body onload 충돌문제 오늘도 여전히 코린이는 삽질만 열라 하다가 퇴근합니다.. 오늘은 평소 잘 돌아가던 페이지에서 갑자기 자스가 작동을 하지 않는 것... 대체 왜 안돌아갈까 생각해봤더니 최근에 팝업창 띄우는 코드를 입력했었는데, 그러고 나니 캘린더가 안열리는 거다.. 팝업창 띄우는 코드를 에 onload이벤트 인라인 입력했었는데, 요걸 빼고 새로고침하니까 나머지가 잘 돌아간다. 짱돌을 굴려보니 문제의 원인은 onload 충돌 때문이라는 결론이 났다. 호출된 js 파일 안에 window.onload = 코드가 입력돼 있었다.. onload이벤트는 두번 이상 실행하면 충돌이 일어나 한 쪽만 실행된다. 이때는 window.onload 나 document.onload 이렇게 나눠서 실행시킨다. 결국 에 인라인으로 넣었던 이벤트 실.. 분명 파일을 수정했는데 깃허브 연동 왜 안되나!! 깃허브...연동하려했는데 변동사항에 파일이 안 뜬다 ? (이걸로 뻘짓만 몇 시간..) 지정 폴더 외에 .git 폴더가 있는지 확인해봐야한다. .git은 최상위 폴더, 지정폴더에만 들어있어야 한다고 함.. 이걸 지우니까 변동사항에 똬랗 하고 뜸!!! 야호 자바스크립트 뒤로가기 감지 이벤트 실행 로그인 코드를 짜다가 비밀번호가 맞지 않을 경우 뒤로가기가 실행되게 함 (다른 페이지에서 유효성 검사후 실패시 뒤로가게 설정) 기존에 짠 자바스크립트 이벤트 함수들은 평소에 실행이 되다가 뒤로가기 실행으로 다시 돌아왔을 때는 window.onload로는 먹히지 않음. 뒤로가기를 어떻게 감지하나 찾아봤다. pageshow/pagehide 이벤트로 실행시키면 된다. window.pageshow 익스에서 :before, :after 영역 밖으로 이동 시 hidden 처리되는 경우 크롬에서 실컷 테스트하다가 익스에서 크로스 브라우징을 하다보면 봉변을 당하기 십상이다. button에 캐럿 기호를 만들어 말주머니처럼 꾸몄는데, 이 캐럿을 :before 가상 선택자로 생성하면서 새로운 봉변을 당했다. 인사말 역대 회장 /* CSS */ .tab_btn {position: relative; display: inline-block; height: 40px; line-height: 40px; padding: 0px 20px; background: #272343; margin: 0 5px; color: #fff;} .tab_now:before {content: ""; position: absolute; bottom: -10px; right: 35%; display: inline-block; b.. 이전 1 다음
