Sungtt

useImperativeHandle useImperativeHandle를 사용하면 forwardRef로 넘긴 요소에 메서드를 커스텀하여 핸들링 할 수 있다. 먼저 forwardRef 예제를 작성했다. 제네릭에 각 메소드와 프롭스의 인터페이스를 작성하면 부모 요소에서 정상적으로 접근 가능하다. (미리 지정해주지않으면 해당 메서드의 존재여부를 보장할 수 없기때문에 번거로워졌었다.) interface ChildMethods { usingFocus: () => void; valueCheck: () => void; } interface ChildProps { // ... } const MyInput = forwardRef(function MyInput( props, ref, ) { const inputRef = ..

.current 프로퍼티를 변경하는것이 리렌더링을 발생시키지않는다. 아래 gif 보면 알 수 있다시피 current를 변경한다고하여 리렌더링되지않는다. 하지만 current 값은 정상적으로 변경되어있으며, 타 요소로 인해 리렌더링 될 시 정상적으로 갱신된다.

이벤트리스너처럼 정리하지않으면, 컴포넌트 이동간에 onValue가 중첩된다. 이벤트리스너를 클린업을 이용하여 remove해주듯 onValue도 off(Ref)를 호출해주면 중첩되지않는다. //useEffect onValue로 채팅을 계속 가져와야함 useEffect(() => { const chatRef = ref( realtimeDbService, `oneToOneChatRooms/${chatRoomInfo.chatRoomUid}/chat`, ); onValue(chatRef, (snapshot) => { console.log(`채팅이 갱신되었습니다`); let messageList = Object.values(snapshot.val()); setChatList(messageList); }); retu..

티스토리의 게시물 썸네일 이미지를 크롤링하던 도중 만난 오류다. 악의적인 사용자로부터 웹을 보호하기위해 외부이미지 사용 시 next.config.json 파일에서 도메인 설정을 허용해주어야 한다고 한다. 아래처럼 불러올려는 호스트에 맞게 설정해 주면 정상적으로 외부 이미지가 로드된다. //next.config.js const nextConfig = { images: { remotePatterns: [ { protocol: 'https', hostname: 'i1.daumcdn.net', // 로드할 이미지의 도메인 }, ], }, }; module.exports = nextConfig; 참고 https://nextjs.org/docs/messages/next-image-unconfigured-host n..

실제로도 index에 들어가면 텍스트가 뜰때까지 굉장히 오랜시간이 걸린다. 1차 실행 작업 - 이미지 webp로 변경 - 스와이퍼 이미지 lazyload

[Next.js@13] 버셀로 배포 시 통신 속도 향상시키는 법 버셀로 처음 배포하였을 시 서버와 통신 속도가 너무 느리다면 이 방법을 확인해보자 getSeverSideProps로 사전에 렌더링해오는 페이지의 현재 속도 1.75초로 매우 느리다. 버셀 대시보드에서 Settings > Functions로 접속하여 Region을 자신의 국가에 맞게 변경해준다. (워싱턴으로 되어있었다.) 서울로 변경 완료 약간이나마 빨라졌다. 개인적인 내용 추가 aws 인스턴스를 재부팅하여 좀 더 올렸지만 그래도 느리다. 더욱 높히고싶다면 서버와 클라이언트의 배포 위치를 동일하게 한다면 좀 더 향상한다고 한다.

주소(URL)에서 패스,쿼리스트링 추출하기 new URL에 정상적인 URL을 넣고 출력하면 된다. import { RefObject, useRef, useState } from 'react'; export default function Home() { const [url, setUrl] = useState(''); const [path, setPath] = useState(''); const [params, setParams] = useState(''); const [query, setQuery] = useState(''); const inputRef = useRef() as RefObject; return ( { let value = inputRef.current?.value as string; let..

[Next.js@13] jsonwebtoken 대신 jose Next.js에서 jwt를 생성할 때 늘 쓰던 jsonwebtoken 모듈을 시도했다. 결과는 오류! 공식 문서에 따르면 Edge 런타임은 모든 Node.js API를 지원하진 않는다고 알려준다. error - Error: The edge runtime does not support Node.js 'buffer' module. jose 그래서 대체 모듈을 찾다가 jose 라는 모듈을 찾았다. 해당 모듈은 종속성없이 작동한다. 내부에 각 모듈들은 독립적이기에 트리쉐이킹도 가능하다고한다. 지원 목록을 보면 맨 아래에 당당하게 Vercel이 있다. 현재 jwt 생성과 복호화를 jose를 통해 모듈화시켜서 사용하고있다. import { JWTPaylo..

[Next.js@13] redirect와 cookie 설정 한 번에 하기 jwt인증 미들웨어를 짜던 도중에 쿠키를 삭제하고, 리다이렉트 시키는 것을 구현하다가 좀 많이 헤매서 남긴다. 우선 공식 문서에서 알려주는 redirect와 cookie 설정 방법이다. //middleware.ts //리다이렉트 - 지정한 URL로 리다이렉트 시킨다. export async function middleware(req: NextRequest) { return NextResponse.redirect(new URL('/', req.url)); } //쿠키 설정 - Token을 삭제하고 미들웨어 체인을 이어서 진행한다. export async function middleware(req: NextRequest) { const..

[Next.js@13] Next + RTK 적용중 오류... Prefer to use the callback notation for the middleware option in configureStore to access a pre-typed getDefaultMiddleware instead. 기본 미들웨어를 불러오는 getDefaultMiddleware 함수가 더 이상 사용되지 않고, 콜백으로 대체되었다고 한다. 오래전에 PR된 내용이었다. 이전의 코드는 아래와 같이 getDefaultMiddleware을 import하여 사용했다. // store.ts import { configureStore, AnyAction, Reducer, getDefaultMiddleware } from '@reduxjs/..