페이지 라우터는 페이지 개념을 기반으로 구축된 파일 시스템 기반 라우터입니다. 파일이 페이지 디렉터리에 추가되면 자동으로 경로로 사용할 수 있습니다. Index routes 라우터는 index라는 이름의 파일을 디렉터리의 루트로 자동 라우팅합니다. pages/index.js → / pages/blog/index.js → /blog Nested routes 라우터는 중첩 파일을 지원합니다. 중첩된 폴더 구조를 만들면 파일은 여전히 동일한 방식으로 자동으로 라우팅 됩니다. pages/blog/first-post.js → /blog/first-post pages/dashboard/settings/username.js → /dashboard/settings/username Pages with Dynamic Ro..
해당 글은 John Ahn 님의 따라하는 리액트테스트 강의를 참고하여 작성했습니다. 왜 애플리케이션을 TEST 해야 할까요? 간단하게 더 안정적인 애플리케이션을 위해서는 여러 방법으로 테스트를 해줘야 더 안정적인 애플리케이션이 될 수 있습니다. 테스팅으로 얻는 이점은 무엇일까요? 디버깅 시간을 단축! 만약 데이터가 잘못 나왔다면 그것이 UI의 문제인지 DB의 문제인지등 전부 테스트를 해봐서 찾아야 하는데 테스팅 환경이 구축된 어있다면 자동화된 유닛 테스팅으로 특정 버그를 쉽게 찾아낼 수 있습니다. 더욱 안정적인 애플리케이션! 많은 테스트 코드와 함께 작성된 코드의 애플리케이션이 되기 때문에 훨씬 안정적인 애플리케이션이 됩니다. 이밖에도 재설계 시간의 단축과 추가로 무언가를 더 구현해야 할 때 더 용이하게..
error.js 파일 규칙을 사용하면 중첩된 경로에서 런타임 오류를 우아하게 처리할 수 있습니다. React Error Boundary 내에 라우트 세그먼트와 해당 중첩된 하위 항목을 자동으로 래핑합니다. 파일 시스템 계층 구조를 사용하여 세분화를 조정하여 특정 세그먼트에 맞는 오류 UI를 생성합니다. 오류를 해당 세그먼트로 격리시키면서 나머지 앱은 정상적으로 동작합니다. 전체 페이지 새로고침 없이 오류로부터 복구를 시도하는 기능을 추가할 수 있습니다. route segment 내에 error.js 파일을 추가하고 React 컴포넌트를 내보내어 오류 UI를 생성합니다. /* app/dashboard/error.tsx */ 'use client' // 에러 컴포넌트는 클라이언트 컴포넌트로 만들어야합니다. ..
이 글은 2021년 2월 19일에 작성되었습니다. Next JS에서는 SSG와 SSR 두 가지의 사전 렌더링 방식이 존재합니다. SSG는 프로젝트가 빌드되는 시점에 필요한 데이터를 미리 호출하며 이를 사용하기 위해 next js에서 getStaticProps와 getStaticPaths함수를 제공합니다. SSR은 각 페이지 요청마다 데이터 통신을 하며 next js에서는 getServerSideProps함수를 제공합니다. 이번 글에서는 getStaticProps와 getStaticPaths 그리고 getServerSideProps함수 사용방법에 대해 알아보겠습니다. getStaticProps /* pages/home/index.js */ export default function Home({homeDat..
이 글은 2021년 5월 1일에 작성되어 레거시 내용이 포함되어 있습니다. 최신 Next js Image 공식 문서를 확인 해주세요 서론 Next.js는 버전 10.0.0부터 이미지 태그를 자동으로 최적화는 next/image를 제공하고 있습니다. next/image의 는 HTML의 를 최신 웹 용으로 확장합니다. 를 사용하면 자동으로 크기를 최적화하는 WebP 같은 최신 형식의 이미지를 제공받을 수 있습니다. 이는 더 작은 장치의 화면에서 큰 이미지가 전송되는 것을 방지할 수 있습니다. 또한 Next.js가 향후 이미지 형식을 자동으로 채택하고 해당 형식을 지원하는 브라우저에 제공할 수 있습니다. 는 모든 이미지 소스에서 작동합니다. 이미지가 CMS와 같은 외부 데이터 소스에서 호스팅 되는 경우에도 여..
해당글은 2021년 5월 21일에 작성되어 레거시한 내용이 포함되어 있습니다. 설치 Apollo Client 및 GraphQL 종속성을 추가합니다. yarn add @apollo/client graphql subscriptions-transport-ws lib/apolloClient.js 파일 생성 Apollo 클라이언트 설정을 저장할 lib/apolloClient.js 파일을 생성합니다. import { ApolloClient, HttpLink, InMemoryCache, createHttpLink, split } from "@apollo/client"; import { concatPagination, getMainDefinition, offsetLimitPagination } from "@apollo..
