Category364 패스트캠퍼스 챌린지 36일차 (Pagination) 22.2.28 (월) +36days 페이지네이션(Pagination) 이란? API 를 통해서 많은 양의 데이터를 가져와 화면에 렌더링해야 하는 경우 자칫하면 성능 문제를 야기할 수 있다. 이 때 성능을 최적화하기 위한 다양한 방법 중 전통적인 방법으로 페이지네이션이 있다.. 페이지네이션은 데이터의 갯수를 미리 알고 있고 데이터의 추가나 삭제가 자주 일어나지 않을 때 유용하다. 더 나은 경험을 위한 페이지네이션 클릭 가능한 요소의 크기를 크게 제공한다. 현재 페이지를 표시한다. 이전, 다음 페이지 링크를 제공한다. 페이지 링크 간 간격을 넓힌다. Preview 리액트 프로젝트 생성 npx create-react-app pagination-playground --template typescript 패키지 .. 2022. 2. 28. 패스트캠퍼스 챌린지 35일차 (Carousel) 22.2.27 (일) +35days 캐러셀(Carousel)이란? 캐러셀은 사전적 의미로 회전 목마를 뜻함. 슬라이드 형태로 순환하며 이미지, 영상 등의 콘텐츠를 노출하는 UI를 의미한다. 더 나은 경험을 위한 캐러셀 autoplay를 사용하지 않는다. 사용자가 직접 캐러셀을 컨트롤 하게끔 한다. 대부분의 사용자들에게 캐러셀은 일반적인 UI이고 이를 인터페이스 하는데 이미 익숙해져 있다. 간결하고 명확한 카피를 작성한다. 슬라이더 내부에 h1 태그를 사용하지 않는다. 검색엔진이 h1 태그를 제목처럼 취급하기 때문에 슬라이드가 여럿일 경우 한 페이지에 여러 개의 제목을 부여하는 것과 같다. 캐러셀이 터치 친화적인지 확인한다. 모바일에서 캐러셀을 보고 좌우의 화살표가 아닌 스와이프하여 콘텐츠를 넘기는 것은 .. 2022. 2. 27. 패스트캠퍼스 챌린지 34일차 (Skeleton) 22.2.26 (토) +34days 스켈레톤(Skeleton) 이란 ? 데이터가 로드되기 전에 콘텐츠의 자리비움(placeholder)를 표시해서 사용자가 기다리는 시간을 좀 덜 지루하게 느끼게끔 하는 UI 스켈레톤 컴포넌트의 장단점 장점 (Pros) 아래의 표는 80명의 참가자를 대상으로 스켈레톤, 스피너, 블랭크 화면을 보여주며 테스트 했을 때 인지되는 로딩 시간을 보여줌. 결과적으로 블랭크 페이지 < 스피터 < 스켈레톤 순서대로 더 빠르다고 느끼게 됨. 단점 (Cons) 아무래도 스켈레톤을 화면마다 표시해야 되기 때문에 상대적으로 시간이나 비용이 많이 든다. 스켈레톤 컴포넌트 사용 예시 페이스북 링크드인 구글 드라이브 유튜브 더 나은 경험을 위한 스켈레톤 규칙 스켈레톤은 콘텐츠의 로드를 방해하면 안.. 2022. 2. 26. 패스트캠퍼스 챌린지 33일차 (Next.js 실제6) 22.2.25 (금) +33days Upgrade Guide https://nextjs.org/docs/upgrading 12 버전까지... 12버전 오픈과 함께 Upgrade Guide를 제공한다. Migrating to Next.js Incrementally Adopting Next.js https://nextjs.org/docs/migrating/incremental-adoption Migrating from Gatsby https://nextjs.org/docs/migrating/from-gatsby Migrating from Create React App https://nextjs.org/docs/migrating/from-create-react-app Migrating from React Ro.. 2022. 2. 25. 패스트캠퍼스 챌린지 32일차 (Next.js 실제5 - Debugging 외) 22.2.24 (목) +32days Debugging https://nextjs.org/docs/advanced-features/debugging Debugging with VS Code Create a file named .vscode/launch.json at the root of your project with the following content: { "version": "0.2.0", "configurations": [ { "name": "Next.js: debug server-side", "type": "node-terminal", "request": "launch", "command": "npm run dev" }, { "name": "Next.js: debug client-side", ".. 2022. 2. 24. 패스트캠퍼스 챌린지 31일차 (Next.js 실제4 - Custom) 22.2.23 (수) +31days Custom Server https://nextjs.org/docs/advanced-features/custom-server 커스텀을 하면 Next.js의 장점을 살리기 어려움 Custom `App` https://nextjs.org/docs/advanced-features/custom-app 페이지들의 공통화 pages/_app.js Persisting layout between page changes / Keeping state / Global style getInitialProps를 여기서 사용하면 모든 페이지는 Static Optimization X getStaticProps와 getServerSideProps는 지원 X // import App from 'ne.. 2022. 2. 23. 패스트캠퍼스 챌린지 30일차 (Next.js 실제3 - AMP, Babel 등) 22.2.22 (화) +30days AMP Support With Next.js you can turn any React page into an AMP page, with minimal config, and without leaving React. Accelerated Mobile Pages 가속화된 모바일 페이지 amp.dev Enabling AMP To enable AMP support for a page, and to learn more about the different AMP configs, read the API documentation for next/amp. Caveats • Only CSS-in-JS is supported. CSS Modules aren't supported by AMP.. 2022. 2. 22. 패스트캠퍼스 챌린지 29일차 (Next.js 실제2) 22.2.21 (월) +29days Authentication https://nextjs.org/docs/authentication 인증 패턴 클라이언트 사이드에서 인증: 로딩 상태 있음 서버 사이드에서 인증: 인증될때까지 block iron / next-auth / passport.js next-auth example https://github.com/nextauthjs/next-auth-example Testing Cypress Cypress is a test runner used for End-to-End (E2E) and Integration Testing. Playwright Playwright is a testing framework that lets you automate Chromium, .. 2022. 2. 21. 패스트캠퍼스 챌린지 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. 이전 1 ··· 20 21 22 23 24 25 26 ··· 31 다음 반응형
