반응형 챌린지67 패스트캠퍼스 챌린지 28일차 (Next.js 실제1 - Deploy) 22.2.20 (일) +28days Production 실제로 서비스를 배포하기 전에 고려해야 할 부분들 https://nextjs.org/docs/going-to-production In General Use caching wherever possible. Ensure your database and backend are deployed in the same region. Aim to ship the least amount of JavaScript possible. Defer loading heavy JavaScript bundles until needed. Ensure logging is set up. Ensure error handling is set up. Configure the 404 (Not.. 2022. 2. 20. 패스트캠퍼스 챌린지 27일차 (Next.js 심화3) 22.2.19 (토) +27days Routing https://nextjs.org/docs/routing/introduction Next.js has a file-system based router built on the concept of pages. When a file is added to the pages directory, it's automatically available as a route. The files inside the pages directory can be used to define most common patterns. Dynamic Routes https://nextjs.org/docs/routing/dynamic-routes Defining routes by using p.. 2022. 2. 19. 패스트캠퍼스 챌린지 26일차 (Next.js 심화2) 22.2.18 (금) +26days Layouts https://nextjs.org/docs/basic-features/layouts 모든페이지에 공통으로 존재 하는 페이지는 Layout으로 빼놓는다. 여러 Layout들을 사용할때는 Page.getLayout 활용 가능 Per-Page Layouts 멀티 layouts를 사용할 때는 getLayout 을 사용한다. Data Fetching layout 안에서는 useEffect 나 SWR을 사용할 수 있다. Page가 아니기 때문에 getStaticProps 또는 getServerSideProps를 사용할 수 없다. // components/layout.js import useSWR from 'swr' import Navbar from './navbar.. 2022. 2. 18. 패스트캠퍼스 챌린지 25일차 (Next.js 심화1) 22.2.17 (목) +25days Next.js는 프레임워크다. 다양한 도구들의 모음이다. 따라서 API가 꽤나 많다. 다 알 필요는 없지만, 일반적인 기능은 모두 살펴보고, 심화 기능들은 읽어라도 보자. 공식문서로 보는 Pages https://nextjs.org/docs/basic-features/pages Basic Features: Pages | Next.js Next.js pages are React Components exported in a file in the pages directory. Learn how they work here. nextjs.org Pages In Next.js, a page is a React Component exported from a .js, .jsx, .t.. 2022. 2. 17. 패스트캠퍼스 챌린지 24일차 (Next.js 기본3) 22.2.16 (수) +24days Dynamic Routes https://nextjs.org/learn/basics/dynamic-routes Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org getStaticPaths / remark / dynamic routes /posts 하위에 md 파일이 있을 때 해당 페이지를 statically generating 한다. https://nextjs.org/learn/bas.. 2022. 2. 16. 패스트캠퍼스 챌린지 23일차 (Next.js 기본2) 22.2.15 (화) +23days https://nextjs.org/learn/basics/data-fetching Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org Pre-rendering hydration: 페이지가 브라우저에 로드되고 자바스크립트 코드가 실행되면서 페이지가 인터랙티브하게 동작할 상태가 되는 과정 Next.js는 기본적으로 모든 페이지를 pre-rendering 한다. disable javascri.. 2022. 2. 15. 패스트캠퍼스 챌린지 22일차 (Next.js 기본1) 22.2.14 (월) +22days Learn 살펴보기 https://nextjs.org/learn/basics/create-nextjs-app Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org Create a Next.js App Navigate Between Pages Assets, Metadat, and CSS Code splitting and prefetching Next.js does code splitting.. 2022. 2. 14. 패스트캠퍼스 챌린지 21일차 (Next.js 소개, 환경 설정 및 프로젝트 생성) 22.2.13 (일) +21days Vercel이 만든 React Framework (for production) https://nextjs.org/ Next.js by Vercel - The React Framework Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications. nextjs.org Vercel 은? SWR로 한 번 소개 했었던... https://vercel.com/ Develop. Preview. Ship. For the best frontend teams – V.. 2022. 2. 13. 패스트캠퍼스 챌린지 20일차 (GraphQL 기본) 22.2.12 (토) +20days 배우기 https://graphql.org/learn/ Introduction to GraphQL | GraphQL Introduction to GraphQL Learn about GraphQL, how it works, and how to use it. Looking for documentation on how to build a GraphQL service? There are libraries to help you implement GraphQL in many different languages. For an in-depth learning experience wi graphql.org [번역] https://graphql-kr.github.io/learn/ Gra.. 2022. 2. 12. 패스트캠퍼스 챌린지 19일차 (GraphQL 소개) 22.2.11 (금) +19days GraphQL 소개 https://www.facebook.com/groups/react.ko Facebook이 만든 쿼리 언어 A query language for your API https://graphql.org/ GraphQL | A query language for your API Evolve your APIwithout versions Add new fields and types to your GraphQL API without impacting existing queries. Aging fields can be deprecated and hidden from tools. By using a single evolving version, GraphQL APIs .. 2022. 2. 11. 패스트캠퍼스 챌린지 18일차 (React-Query) 22.2.10 (목) +18days Overview https://react-query.tanstack.com/overview Overview Overview React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze. Motivation Out of the box, React a react-query.tanstack.com fetching or updating data 기존 상태 관리 라.. 2022. 2. 10. 패스트캠퍼스 챌린지 17일차 (SWR) 22.2.9 (수) +17days SWR stale-while-revalidate(HTTP 캐시 전략중 하나) 의도적으로 cache된 date를 return 하고 fetch(revalidate)한 후 data를 update 한다. SWR을 사용하면 컴포넌트는 지속적이며 자동으로 데이터 업데이트 스트림을 받게 됩니다.그리고 UI는 항상 빠르고 반응적 입니다. 개요 import useSWR from 'swr' function Profile() { const { data, error } = useSWR('/api/user', fetcher) if (error) return failed to load if (!data) return loading... return hello {data.name}! } 이 예시에.. 2022. 2. 9. 이전 1 2 3 4 5 6 다음 반응형
