codinghatso

7장이랑 연결되는 내용입니다. 7장의 마지막 내용 두 가지 를 참고하며 진행하시면 됩니다. 1. 데이터 요청이 의도하지 않는 waterfall을 만들었다. 2. 대시보드는 정적(static)이므로 데이터 업데이트가 애플리케이션에 반영(reflected)되지 않는다. 이번 장에서 배울 내용 * 정적 렌더링이란 무엇이며 애플리케이션의 성능을 향상시킬 수 있는 방법입니다. * 동적 렌더링이란 무엇이며 언제 사용해야 하는지에 대한 것입니다. * 대시보드를 동적으로 만들기 위한 다양한 접근 방식. * 느린 데이터 가져오기를 시뮬레이션하여 어떤 일이 일어나는지 확인합니다. 정적 렌더링이란? 정적 렌더링을 사용하면 빌드시(배포 시) 또는 재검증 중에 서버에서 데이터 가져오기 및 렌더링이 수행됩니다. 그런 다음 결과를..

애플리케이션에 대한 데이터를 가져올 수 있는 다양한 방법에 대해 논의하고 대시보드 개요 페이지를 작성합니다. 이번 장에서 배울 내용 * API, ORM, SQL 등 데이터를 가져오는 및 가지 방법에 대해 알아봅니다. * 서버 구성요소를 통해 백엔드 리소스에 보다 안전하게 액세스할 수 있는 방법 * network waterfalls란? * JavaScript Pattern을 사용하여 병렬 데이터(parallel data) fetching을 구현하는 방법. 데이터 가져오는 방법 선택 API 계층 데이터베이스 쿼리 React Server Components 추가 API 계층 없이 서버에서 직접 데이터베이스를 조회할 수 있습니다. SQL 사용하기 대시보드 프로젝트의 경우 Vercel Postgres SDK 및 ..

이 포스팅은 Learn Next.js를 학습하면서 보조 역할로서 봐주시면 좋겠습니다. 대시보드 작업을 계속하려면 먼저 데이터가 필요합니다. 이번 장에서는 PostgreSQL을 설정합니다. @vercel/postgres 이번 장에서 배울 내용 * GitHub에 프로젝트를 Push합니다. * Vercel 계정을 설정하고 즉각적인 미리보기 및 배포를 위한 GitHub 저장소를 연결합니다. * 프로젝트를 만들고 Postgres database에 연결합니다. * 초기 데이터로 데이터베이스를 seed합니다. GitHub 저장소에 관한 내용을 학습하려면 이동하시길 바랍니다. https://docs.github.com/en/repositories/creating-and-managing-repositories/qui..

사용자가 대시보드 경로 사이를 탐색할 수 있도록 몇 가지 링크를 추가하겠습니다. 이번 장에서 배울 내용 * next/link 요소 사용 방법 * usePathname() 에 대한 활성 링크를 표시하는 방법 * Next.js에서 내비게이션이 작동하는 방식 내비게이션을 최적화하는 이유는 무엇일까? 전통적으로 HTML의 요소를 사용합니다. 현재 사이드바 링크는 요소를 사용하여 각 페이지 이동시 전체 페이지 새로 고침이 있습니다. The component Next.js 에서는 를 사용할 수 있습니다. Javascript로 client-side navigation을 수행할 수 있습니다. import Link from 'next/link'; import 해서 사용하며 태그를 태그로 교체해 주면 됩니다. Automa..

2023년도의 브라우저 업데이트는 전체적으로 2022년도의 새로운 기능들을 수정하고 발전시키는 방향으로 진행되었던 것 같습니다. 또한 디자인적인 부분도 많이 신경쓰면서 트렌디함을 유지하며 기존의 기능들을 더 편하게 사용할 수 있게 해 주었습니다. ▲(핵심) ▲(편의성) 2022년 01월 측면 패널, 번역, 검색 단축키 등 새로운 기능을 사용해 보세요. 측면 패널을 활용하여 웹을 탐색할 수 있습니다. (읽기 목록, 읽기 모드, 북마크) ▲ 읽기 목록을 만들 수 있으며, 읽음으로 표시와 삭제 기능을 통해 읽기 목록 관리 가능 특정 텍스트만 번역하기 ▲ 주소 표시줄을 활용하여 탭, 북마크, 방문 기록을 검색할 수 있습니다. (@북마크, @기록, @탭) ▲ 페이지 확대 축소의 단축키를 통해 제어 가능 ( CMD..

많은 개발자와 소비자가 선호하는 Chrome의 업데이트 내용을 보면서 앞으로 웹 시장이 어떤 걸 중요시하며, 방향을 잡고 있는지 생각해 보는 시간이 되었으면 합니다. ▲(핵심) ▲(편의성) 2022년 01월 링크를 쉽게 공유하고 Chrome 프로필을 여러 개 만들어 보세요. 웹 서핑,서칭을 하다가 공유하는 부분을 UI를 이용해 간편하게 할 수 있도록 업데이트했습니다. ▲ QR 코드나 다운로드 무선 전송 등 다양한 방식을 지원하는 부분이 인상적 입니다. 2022년 03월 안전 확인을 사용해 안전하게 인터넷 이용하기 안전한 인터넷 사용을 위해 사용자가 보안 부분을 설정할 수 있도록 합니다. ▲ 위치 및 기기에 대한 웹사이트의 액세스 권한을 제어할 수 있도록 합니다. 2022년 05월 과거 검색어를 되돌아보고..

지금까지 애플리케이션에는 홈페이지만 있습니다. 레이아웃과 페이지로 더 많은 경로를 만들 수 있습니다. 이번 장에서 배울 내용 * dashboard routes를 만들고 file-system routng을 사용해 봅니다. * 새 경로 세그먼트를 만들 때 폴더와 파일의 역할을 이해합니다. * 여러 대시보드 페이지 간에 공유할 수 있는 중첩 레이아웃을 만듭니다. * colocation, partial rendering, 그리고 the root layout이 무엇인지 이해합니다. Nested routing 중첩 라우팅 Next.js는 폴더가 중첩된 경로를 만드는 데 사용되는 파일 시스템 라우팅을 사용합니다. 각 폴더는 URL segment에 매핑되는 route segment를 나타냅니다. 라우팅 페이지 만들기 ..

이번 장에서 배울 내용 * 사용자 정의 글꼴을 추가하는 방법 next/font. * 이미지를 추가하는 방법 next/image. * Next.js에서 글꼴과 이미지가 최적화되는 방법. 글꼴을 최적화하는 이유 글꼴 파일을 가져와서 로드해야 하는 경우 성능에 영향을 미칠 수 있습니다. Cumulative Layout Shift 줄여서 CLS라고 불리는 레이아웃 변경 횟수는 안정적인 Core Web Vitals 측정항목이다. 이는 시각적 안정성을 측정하는 데 있어 중요한 사용자 중심 측정항목이다. 예를 들면 링크나 버튼을 탭 하려고 하는데 손가락이 닿기 직전에 링크가 이동하여 다른 것을 클릭하게 되는 피해가 일어날 수 있습니다. 글꼴의 경우 브라우저가 처음에 텍스트를 대체(fallback) 하거나 system..