디버깅노트 (13) 썸네일형 리스트형 높이값 일정하고 너비가 가변인 이미지 불러올 때 IOS 간격 이슈 - 이슈: 크기가 제각각 다른 이미지들을 일렬로 정렬했을 때, IOS에서만 너비값이 제멋대로로 나타남 - 구체적인 조건: 이미지들은 flex로 정렬했으며, 높이값은 40px로 통일하되 너비값은 가변적이므로 따로 값을 주지 않은 상황. > ul { display: flex; align-items: center; flex: 0 0 auto; gap: 30px; > li { height: 40px; img { display: block; height: 40px; object-fit: contain; .. [solved] swiper를 map 함수로 감쌀 때 navigation lock disable 되는 현상 슬라이드 UI가 필요할때 swiper 라이브러리를 종종 쓰고 있는데,요번에 작업하면서 생각지도 못했던 에러가 발생해 기록해보고자 한다. {items.map((item, index) => ( {item.title} )} 위와 같은 형식으로 배열을 map으로 리턴하는 값들을 Swiper 안에 담았다.슬라이드는 문제없이 불러와지는데, 문제는 navigation 버튼들이 활성화가 안 되는 것이다. 제공되는 네비게이션 버튼의 기본 클래스명은 swiper-button-next, swiper-button-prev인 것을 확인할 수 있었는데,map으로 불러와진 리턴값을 슬라이드에 넣으면 초기 로딩 때 이 클래스에 lock과 disabled 클래스명도 함께 적용되는 걸 알 수 .. [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] react-i18next:: You will need to pass in an i18next instance by using i18nextReactModule 언어팩 설정시 <Trans> 사용시 오류 nextjs 이전 단계에서는 잘만 썼던 i18next를 13버전으로 올렸더니 여러가지 이슈들이 터지기 시작한다.. 현재 프로젝트 환경에 맞춰서 i18next를 잘 쓰고 있었는데언어팩 json 에서 html 태그를 사용해야해서 컴포넌트를 이용해야했다. react-i18next 문서를 참고하면서 잘 작성..https://react.i18next.com/latest/trans-component import React from 'react';import { Trans, useTranslation } from 'react-i18next'function MyComponent() { const { t } = useTranslation('myNamespace'); return Hello World;} 대충 위에 .. [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 이렇게 나눠서 실행시킨다. 결국 에 인라인으로 넣었던 이벤트 실.. 이전 1 2 다음
