아래의 Dynamic API들이 15부터 비동기로 동작한다.cookiesheadersconnectiondraftModesearchParamsparams아래처럼 await를 붙여야한다.async function Page({ params }) { // asynchronous access of `params.id`. const { id } = await params return ID: {id}}해당 방식은 codemod로 1차 수정, 앱 내부 잔존버그들 일일히 수정$ npx @next/codemod@canary next-async-request-api .서버컴포넌트의 경우에는 params을 await로 비동기처리해야하고클라이언트 컴포넌트는 React.use hook을 사용해서 Promise를 풀어내야함..

브라우저에서 대용량 파일 block없이 읽기 String으로 되어있는 파일을 읽기 위해서는 브라우저의 메모리에 올려야한다. 용량이 큰 파일은 전체를 올리는게 한계가 있다. 전체 파일을 한번에 읽지않고 chunk로 쪼개어 2gb가 넘는 파일을 브라우저에서 읽는 방법을 알아보자 이러한 작업이 필요했던 이유 사용자가 2gb가 넘는 소설파일을 업로드할 수 있다. 이 파일의 내용은 string으로 이루어져있고 각 챕터마다 @@@@라는 구분자가 존재한다고 해보자. 이 파일이 몇챕터로 이루어져있는지 알고싶다. 백엔드를 거쳐서 돌아오게 된다면 2gb파일을 업로드해야하므로 약 1분의 시간과 비용이 발생한다. 백엔드를 거친다해도 그 서버의 메모리를 2gb사용하는 것이므로 요청이 많아지면 서버에 부하가 올 것이다. 이를 브..

유저액션 중심의 컴포넌트 테스트를 위한 도구 testing library Jest는 테스트러너로서 테스트를 돌리고 성공, 실패를 확인하거나 테스트에 대한 함수를 제공해주는데에 반면에 Testing library는 리액트 컴포넌트를 테스트하기위한 가상 DOM을 제공해준다. 이 둘은 각각 수행하는 역할이 다르다. 시작하기전에 읽어보면 좋은 포스팅 NHN 프론트엔드 테스트 초보자를 위한 React 어플리케이션 테스트 심층가이드(1) 초보자를 위한 React 어플리케이션 테스트 심층가이드(2) Testing Library Docs introduction, Guiding Principles 두 섹션 읽어보기 테스팅 원칙 유저가 페이지랑 인터렉션하는 방식과 매우 유사하게 테스트하는 것에 중점을 둔다. 컴포넌트 렌더..

useQuery useQuery로 요청한 API가 실패했다면 2번 더 보낸다. 모두 실패시 실패했다고 처리된다. const { data, isError, error, isLoading} = useQuery("posts", fetchPost); isError, isLoading 으로 요청에 대한 상태를 알 수 있다. error은 요청에 대한 에러메시지를 나타낸다. staleTime 데이터가 만료되기 전까지의 시간, 데이터 유효기간을 stale Time이라고 한다. stale data는 만료된 데이터 React Query는 데이터 fetching을 도와주는 라이브러리이다. 다시 가져오는 refetch도 수행해주는데 트리거는 다음과 같다. 컴포넌트 리마운트 윈도우 포커싱 예를들어 어떤 게시판을 키고서 요리를 ..

React Query Fetching, caching, synchronizing and updating server state 라이브러리 React Query Star : 8.4K SWR Start : 5.6K 왜 등장했지 ? 전통적인 상태관리 라이브러리는 client 상태를 다루는데는 좋았지만 async 또는 server 상태관리에는 좋지 않았다. Server 상태는 Client와는 매우 다르기 때문이다. client에서 제어할 수 없음 비동기 요청이 필요함 나도모르게 변경될 수 있음 최신결과를 가져오지 않으면 "오래된"상태로 남아있음 이러한 특징 때문에 하나의 store에서 둘의 상태를 관리하는 것은 쉽지 않았다. 또한 아래와 같은 것들을 해결해내기위해 엄청난 리소스가 투입이 되어야했다. 캐싱 - 구..

Lifecycle 컴포넌트가 render된 후 실행됨 useEffect와 다르게 동기적으로 실행 동기적으로 실행되기 때문에 로직이 클 경우 그만큼 화면에 보여지는 시간이 오래걸리게 되므로 간단한 로직들만 넣어서 사용한다. SSR일 때 useEffect, useLayoutEffect 둘 다 JS가 다운로드된 이후에 수행된다는 것을 명심하자 react가 warning을 주는 이유가 이 때문이다. useLayoutEffect를 사용하면 마주하는 warning ⚠️ Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer’s output format. This wi..

사이즈가 수백, 수천kb에 육박하는 이미지를 보여줄 때 적절한 처리가 필요하다. 레이아웃이 그만큼 밀릴 수도 있고 n초동안 화면에 사진이 보여지지 않다가 깜빡하고 보여지는 경우는 이슈가 될 수 있다. 이를 피할 수 있는 방법 - 간단하고 짧다 좌(직접구현), 우(next 기능) - load속도엔 차이가 거의 없다. 문제 이미지가 로드되는데 한참 걸림 그동안 흰색화면이어서 있는지 없는지 모르겠음 인터넷속도가 요새 많이 빠르지만 다 빠른게 아님. 일시적으로 느릴 수 있고, 사양이 좋지 못할 경우도 영향을 받음. 이런 디테일을 고려해야함 다양한 방법으로 해결할 수 있다. 디바이스 사이즈에 맞게 이미지 조절 이미지가 뷰포트에 위치했을 때 load하도록 하기 (lazy load) 이미지 최적화(압축) progre..

Rewrites request Path를 다른 destination path로 매핑시켜주는 것 클라이언트사이드에서 프록시요청이 필요할 때 react-proxy 이런거 대신 사용하기 위한 옵션 Case 1. Request URL에 숨기고 싶은 정보가 있을 때, 블로그에 가장 많이 소개되는 예제인데 API Key를 request url param으로 같이 던지는 경우가 있는데 이를 브라우저단에서 표시하지 않게하기 위해 사용한다. Case 2. COR proxy 도메인이 다른 서버로부터 Set 쿠키도 되는지는 확인이 안되는데, 예제가 있는 것으로 보아 ,, 백엔드에서 응답하는 응답 헤더의 Set-Cookie 은 domain 이라는 속성을 갖는데, 여기에 기술된 도메인의 요청에만 쿠키를 set할 수 있다. 명시..

TypeScript-component, hook npm에 배포하기 최근 반응형 pagination component와 hook을 작성했다. 이 둘을 npm에 배포해놓고 싶었다.(최근 package관련해서 경각심을 느끼게된 계기도 있고해서,, 겸사겸사) npm에 배포하기 전 해야할 것 먼저 npm계정이 있어야한다. npm login으로 로그인해야한다. package.json 에 배포관련 스크립트, 정보를 추가해야한다. tsconfig.json 에 빌드관련 정보를 추가해야한다. package.json { "name":"배포할 패키지 명을 작성한다.", "main":"dist/index.js", "types":"dist/index.d.ts", "version":"0.0.1" //시맨틱버저닝을 따른다, "des..

fs error in storybook 발생 npm run storybook 실행 시 Module not found: Error: Can't resolve 'components/SomeComponent' in '/Users/css/Desktop/Project/styles' 등 module 에러 발생 ModuleNotFoundError: Module not found: Error: Can't resolve 'fs' in '/Users/css/Desktop/Project/node_modules/next-i18next/dist/esm/config' - fs module 참조에[러 runtime에 fileSystem 모듈을 찾을 수 없다. ..