기술 블로그

React.memo export default React.memo(Category); //videos 내려오는 props가 자주 동일할 때 사용된다. props가 변경될 때만 리렌더링하게 개별 컴포넌트를 설정할 수 있어서 렌더링 최적화에 도움이 된다. 그러나 오버헤드 우려가 있어 필요한 컴포넌트에만 적용하도록 한다. react-window npm install react-window 외부 라이브러리이나 화면에 보이는 부분만 렌더링하도록 한다 몇만개의 데이터가 배열 되어있을때 사용한다. useCallback 함수 재사용 useMemo 값 재사용

getServerSideProps (서버 사이드 렌더링) 페이지에서 getServerSideProps라는 함수를 내보낼 때, Next.js는 이 함수로 반환된 데이터를 사용하여 각 요청에 대해 이 페이지를 사전 렌더링합니다. 주로 자주 변경되는 데이터를 최신으로 업데이트 하는 경우 유용하고 클라이언트 측에 번들되지 않는다. context매개변수는 params,req,res,query를 포함한다. 이 함수는 이중 하나를 포함하는 객체를 반환해야한다 - props라고 명명된 객체 속성 - notfound(bool)로 명명된 속성 - redirect 문제 getServerSideProps내의 기능은 클라이언트 렌더링 이전에 수행된다. 즉 클라이언트 단에서 서버단의 데이터를 받을 순 있지만 일반적인 방법(nex..

// src/_app.js import { RecoilEnv } from 'recoil'; RecoilEnv.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED = false

Layout Components class name const StyledLayout = styled(Layout)` background-color: #ab4b4b !important; padding-top: 4.375rem; width: 100vw; height: 100vh; `; 위와같이 컴포넌트 스타일링을 적용할 때 스타일드 컴포넌트 내부적으로 css class 선택자로 적용된다. function Layout({children}: {children: React.ReactNode;}) { return ( {children} ); } 위 레이아웃 컴포넌트의 문제는 자식 컴포넌트는 잘 내려주었지만 css class지정 까지는 설정해주지 못했다. function Layout({ className, chil..

문제 Next.js의 router-query를 이용해 객체 데이터를 전달하려 했으나 수신페이지에서 특정 객체만 수신할 수 없었다. 원인 router-query는 url 쿼리 파라미터로 전달되고 다음과 같은 문제가 발생할 수 있다. 인코딩 문제: 객체는 URL 안전한 문자열로 인코딩되어야 합니다. 이를 위해 encodeURIComponent와 같은 함수를 사용하여 객체를 문자열로 변환하고 인코딩해야 합니다. 그렇지 않으면 URL이 유효하지 않을 수 있습니다. 길이 제한: URL에는 길이 제한이 있습니다. 대부분의 웹 브라우저와 서버는 URL의 길이를 제한합니다. 큰 객체를 쿼리 파라미터로 전달하려고 하면 이 제한을 초과할 수 있습니다. 읽기 어려움: 복잡한 객체를 URL에 포함시키면 URL이 읽기 어려워집..

문제 타입 스크립트를 사용할 때 금기시 되는 것들이 있다. 타입 단언 as any 사용 Typescript에서 as 키워드는 타입 단언(type assertion)을 사용하여 특정 변수 또는 객체가 특정 타입임을 명시적으로 지정할 때 사용됩니다. 그러나 이를 남용하면 런타임 오류를 초래할 수 있으므로 권장되지 않습니다. 어떠한 런타임 오류를 발생할 수 있을까? 주로 발생하는 에러는 개발자가 타입을 잘못 단언하여 발생한다. 이에 런타임에는 js로 변환되어 타입 정보가 없어지고 예기치 않은 오류가 발생한다. 1.프로퍼티 접근 오류 const obj: any = { name: "Alice" }; const age: number = (obj as { age: number }).age; console.log(ag..