codinghatso

애플리케이션에 대한 데이터를 가져올 수 있는 다양한 방법에 대해 논의하고 대시보드 개요 페이지를 작성합니다. 이번 장에서 배울 내용 * 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..

개요 스타일링 : Next.js에서 응용프로그램 스타일을 지정하는 다양한 방법. 최적화 : 이미지, 링크 및 글꼴을 최적화하는 방법. 라우팅 : 파일 시스템 라우팅을 사용하여 중첩 레이아웃 및 페이지를 만드는 방법 데이터 가져오기 : Vercel에서 데이터베이스를 설정하는 방법 및 가져오기 및 스트리밍 모범 사례. 검색 및 페이지 지정 : URL Search Params를 이용한 Search 및 Pagination 구현 방법 데이터를 변형하는 중 : React Server Actions를 사용하여 데이터를 변경하고 Next.js 캐시를 다시 확인하는 방법. 404 오류를 찾을 수 없습니다. 양식 점증 및 접근성 : 서버 측 양식 검증 방법 및 접근성 향상을 위한 팁 인증 : 및 미들웨어를 사용하여 응용프..