튜이의 블로그 튜이의 블로그

들어가기 전에이 글은 Next.js - Chapter 14 : Improving Accessibility 강의를 번역한 글입니다.접근성 향상이전 챕터에서, 404 에러를 포함하여 에러를 처리하여 대체 UI를 보여주는 방법을 배웠습니다. 하지만 아직도 폼(form) 유효성 검사 관련하여 남은 퍼즐 조각에 대해 이야기 할 게 남아있습니다. 이제 Server Action을 통한 서버사이드 유효성 검사를 하는 방법과 useFormState 훅을 통해 에러를 보여주는 방법을 배울겁니다. -- 접근성을 고려하면서이번 챕터에서...여기 우리가 다룰 주제들이 있습니다.eslint-plugin-jsx-a11y 를 통한 Next.js에서 접근성을 구현하는 좋은 방법서버 사이드 폼(form) 유효성 검사를 하는 방법리액트 ..

들어가기 전에이 글은 Next.js - Chapter 13 : Handling Errors 강의를 번역한 글입니다.에러 핸들링이전 챕터에서, Server Action을 이용한 데이터 변형 방법을 배웠습니다. 이제 자바스크립트 try/catch문과 Next.js API를 이용해서 우아하게(gracefully) 에러를 처리하는법을 배웁시다.이번 챕터에서...여기 우리가 다룰 주제들이 있습니다.error.tsx 파일을 사용하여 라우트 경로의 에러를 잡는 방법과 유저에게 대체 UI를 보여주는 방법404 에러(경로를 찾을 수 없습니다.)를 처리하기 위한 notFound 함수와 not-found 파일을 사용하는 방법Server Action에 try/catch 추가하기우선, 우리가 만든 Server Action에 자..

1. 히어로 이미지(Hero image): 웹 사이트에서 처음 들어왔을때 한 눈에 들어오는 이미지. 2. 브레드 크럼(bread crumbs): 유저가 웹사이트 내에 어느 경로에 있는지 알려주는 UI 계속 추가, 수정하며 업데이트 할 예정..

들어가기 전에이 글은 Next.js - Chapter 12 : Mutating Data 강의를 번역한 글입니다.데이터 변형(Mutating)이전 챕터에서 우리는 URL 검색 파라미터와 Next.js API를 이용해 검색과 페이지네이션(Pagination) 기능을 구현했습니다. 이제 invoices 페이지에 송장을 추가, 업데이트, 삭제하는 기능을 추가해봅시다.이번 챕터에서...여기 우리가 다룰 주제들이 있습니다.React Server Action이란 무엇이고 데이터를 변형(mutate)하는데 어떻게 사용하는지폼(form)과 서버 컴퍼넌트로 작업하는 방법타입 유효성 검사와 네이티브 formData 객체를 사용하는 좋은 방법revalidatePath API를 사용한 클라이언트 캐시 리밸리데이션(revalid..

들어가기 전에이 글은 Next.js - Chapter 11 : Adding Search and Pagination 강의를 번역한 글입니다.검색과 페이지네이션 추가하기이전 챕터에서, 스트리밍으로 대시보드의 초기 로딩 성능을 향상시켰습니다. 이제 /invoices 페이지로 넘어가서 검색기능과 페이지네이션 기능을 추가하는 방법을 배워봅시다.이번 챕터에서...여기 우리가 다룰 주제들이 있습니다.다음과 같은 Next.js API 다루는 법을 배웁니다: searchParams, usePathname, useRouterURL 파라미터로 검색과 페이지네이션을 구현하는 법을 배웁니다. 시작하는 코드/dashboard/invoices/page.tsx 내에 다음의 코드를 붙여넣으세요./app/dashboard/invoice..

CSS 트랜지션(transition) 관련 정리미리보기transition-property: 트랜지션이 적용되야하는 속성(all: 전체, none: 없음)transition-duration: 트랜지션이 일어나는 지속시간.transition-timing-function: ease: 중간까지 점점 빨랐다가 다시 느려짐linear: 일정한 속도ease-in: 점점 빨라짐ease-out: 점점 느려짐ease-in-out: ease랑 비슷, 빨라졌다가 느려지면서 종료transition-delay: 트랜지션이 시작되기까지 대기시간transition: CSS 트랜지션CSS 트랜지션은 css 속성이 변경될때,어떤 속성에(transition-property),얼마만큼의 지연시간 후에(transition-duratio..

들어가기 전에이 글은 Next.js - Chapter 10 : Partial Prerendering (Optional) 강의를 번역한 글입니다.부분 미리 렌더링부분 미리 렌더링(Partial prerendering)은 Next.js 14에서 소개된 실험적인 기능입니다. 이 페이지의 컨텐츠는 기능이 안정화되면서 변경될 수 있습니다. 만약 실험적인 기능을 사용하고 싶지 않다면 이번 챕터는 건너 뛰어도 됩니다. 이번 챕터는 전체 강의를 완료하기 위한 필수는 아닙니다.이번 챕터에서...여기 우리가 다룰 주제들이 있습니다.부분 미리 렌더링이 무엇인지부분 미리 렌더링이 어떻게 동작하는지정적인 컨텐츠와 동적인 컨텐츠의 결합만약 라우트 내에서 동적인 함수를 부르고 있다면(예를 들어, noStore(), cookies(..

들어가기 전에이 글은 Next.js - Chapter 9 : Streaming 강의를 번역한 글입니다.스트리밍이전 챕터에서, 대시보드 페이지를 동적 렌더링 하도록 만들었습니다. 하지만 느린 데이터 가져오기가 우리 어플리케이션 퍼포먼스에 어떤 영향을 끼치는지도 볼 수 있었습니다. 이제 느린 데이터 요청이 있을때, 어떻게 유저 경험을 향상시킬 수 있을지 이야기 해봅시다.이번 챕터에서...여기 우리가 다룰 주제들이 있습니다.스트리밍이 무엇인지, 언제 쓸 수 있는지스트리밍과 loading.tsx 그리고 을 어떻게 같이 쓸 수 있는지로딩 스켈레톤이란 무엇인지라우트 그룹이란 무엇이고, 언제 그것을 쓰면 되는지어플리케이션 내에 Suspense 영역을 어디에 넣으면 되는지스트리밍이란 무엇인가요?스트리밍은 하나의 라우트..