서버 액션에서 DB를 쿼리하는 코드에 try - catch 구문을 사용하여 오류를 처리할 수 있습니다.즉, try 구문에서 DB 쿼리를 시도하고, catch 구문에서 오류 메시지가 포함된 객체를 반환합니다. 이후 실제 오류 발생시 애플리케이션이 제대로 동작하지 않는 것을 확인하고 싶습니다.우리의 목표는 오류가 발생해도 레이아웃 UI를 그대로 유지하여 애플리케이션을 사용하는 것입니다.Next.js는 이 문제를 해결하기 위해 error.tsx 파일을 사용하여 오류를 처리하는 방법을 제공합니다.즉, 해당 세그먼트에서 오류가 발생하면 같은 수준에 있는 error.tsx 파일에서 렌더링하는 UI가 표시됩니다. error.tsx 파일은 모든 오류를 처리합니다. 하지만, 존재하지 않는 리소스를 가져오는 오류의 경우 ..
Next.js
서버 액션서버 액션이란 별도의 API 엔드포인트 없이 서버 컴포넌트 자체에서 비동기 작업을 모두 수행하는 것을 의미합니다.서버 액션을 구현하기 위해서는 최소한 다음과 같은 코드가 필요합니다.export default function Page() { async function create(formData: FormData) { "use server"; // 데이터 뮤테이션 로직 } // 서버 액션을 트리거하는 양식 return ...;} 위 코드를 분석해보면 다음과 같습니다.서버 컴포넌트는 비동기 함수를 action으로 가지는 form 요소를 반환합니다.action으로 올 수 있는 함수는, FormData 타입의 데이터를 인자로 전달받는 비동기 함수입니다.그리고 이 함수는 내부에서 "..
검색 기능은 다음과 같이 클라이언트 및 서버 양쪽에 걸쳐있는 기능입니다.사용자가 클라이언트에서 텍스트를 입력합니다.입력된 텍스트를 URL 검색 매개변수로 추가합니다.URL 검색 매개변수의 값을 사용하여 데이터베이스를 쿼리합니다.데이터베이스 쿼리의 결과를 사용하여 UI를 업데이트합니다.URL 검색 매개변수검색 키워드를 URL 상태 매개변수로 관리하면 다음과 같은 장점을 얻을 수 있습니다.검색어가 입력된 상태의 웹 애플리케이션을 URL로 공유하거나 북마크할 수 있습니다.URL 검색 매개변수는 서버에서 직접 사용할 수 있으므로, 페이지 초기 렌더링에 사용할 수 있습니다.구현 과정검색어를 입력받는 input 태그에 onChange 이벤트 리스너를 추가합니다.useSearchParams 후크와 URLSearchP..
데이터를 가져오는데 시간이 오래 걸리면 전체 페이지 렌더링이 차단됩니다. 이는 사용자 경험을 저하시킵니다.이 문제를 해결하기 위해 스트리밍이라는 기술을 사용할 수 있습니다.스트리밍스트리밍이란 여러 데이터 가져오기 중 데이터 요청에 성공한 데이터부터 먼저 클라이언트로 전송하는 데이터 전송 기술입니다.즉, 병렬로 여러 데이터 가져오기를 수행하더라도, 먼저 성공한 요청의 결과부터 클라이언트로 전송되어 UI에 표시됩니다.스트리밍 구현 방법스트리밍은 두 가지 방법을 이용해 구현할 수 있습니다.전체 페이지 수준에 스트리밍을 적용하기 위한 loading.tsx컴포넌트 수준에서 스트리밍을 적용하기 위한 SuspenseLoading.tsx 파일같은 경로 수준에 있는 page.tsx 파일에서 데이터를 불러오는 동안 표시될..
Next.js App Router에서 선언한 컴포넌트는 기본적으로 서버 컴포넌트이며, 정적으로 렌더링됩니다.이는 컴포넌트에서 가져온 데이터가 새로 업데이트되어도 반영되지 않는다는 것을 의미합니다.가져온 데이터와 함께 UI가 업데이트되도록 하려면 정적으로 렌더링하지 않고, 동적으로 렌더링해야 합니다.동적 렌더링정적 렌더링은 빌드시 렌더링되어, 그 결과가 CDN에 캐싱됨을 의미합니다.그러면 사용자가 서버로 요청을 보냈을때 그 요청이 CDN으로 전송되어 UI를 빠르게 받을 수 있습니다. 즉, 정적 렌더링과 반대로 캐싱을 비활성화하여 동적 렌더링을 수행할 수 있습니다.캐싱을 비활성화 하면 빌드시 UI가 생성되지 않고, 서버에 요청이 전송될때 UI가 생성되어 사용자에게 전달됩니다.이는 서버로 직접 요청을 전송하기..
클라이언트 - 서버 워터폴여러 데이터를 순차적으로 요청하는 경우 클라이언트 - 서버 워터폴이 발생할 수 있습니다.워터폴이란 여러 요청을 순차적으로 처리할 때 현재 요청에 대한 통신이 성공적으로 이루어질 때까지 다음 요청이 대기하면서 모든 요청의 시간이 길어지는 현상을 의미합니다. 다음 코드와 같이 현재 요청의 결과가 다음 요청에 필요한 경우에는 매우 유용할 수 있습니다.export default async function Page() { const profile = await fetch(...); const info = await getInfoById(profile.id); const { friends } = await getFriends(info.name); // ...}하지만, 서로 관련이 없..
Next.js에서 데이터 가져오기클라이언트 측에서 데이터 가져오기를 실행하려는 경우 데이터베이스의 비밀 또는 민감한 정보가 노출될 수 있습니다.Next.js에서는 Router Handler를 통해 API 엔드포인트를 생성하여 이 문제를 해결할 수 있습니다.데이터베이스 쿼리데이터베이스에 저장된 데이터를 가져오는 등 상호작용을 하기 위해 SQL을 직접 사용하거나 Prisma와 같은 ORM을 사용할 수 있습니다.이 역시 데이터를 가져오는 작업이므로 API 엔드포인트에서 데이터베이스와 상호작용하기 위한 코드를 작성해야 합니다.서버 컴포넌트Next.js app 라우터에서 선언하는 컴포넌트는 기본적으로 모두 서버 컴포넌트입니다.서버 컴포넌트는 서버에서 복잡하고 비용이 많이 드는 작업을 수행한 후, 그 결과만를 정적..
활성 링크 표시 패턴링크가 가진 href (이동할 경로)의 값과 현재 경로가 일치하는 경우 해당 링크에 클래스를 추가하여 스타일을 적용할 수 있습니다.네비게이션 링크에 이 패턴을 적용하여 현재 경로에 해당하는 링크를 표시할 수 있습니다.usePathname이 후크는 현재 경로를 반환합니다.URL에 접근하여 현재 경로를 반환하는 작업을 수행하므로 클라이언트 컴포넌트에서만 사용할 수 있습니다.// 현재 경로/players/kiin// usePathname이 반환하는 경로const pathname = usePathname();console.log(pathname); // /players/kiinclsx클래스 이름에 조건문을 추가할 때 사용할 수 있는 매우 작은 라이브러리입니다.clsx함수 인자에 객체, 배열,..
레이아웃Next.js는 layout.tsx 파일을 사용하여 여러 세그먼트에서 공유되는 UI를 레이아웃으로 설정합니다.레이아웃 역시 컴포넌트이며, page.tsx 파일에서 렌더링되는 UI가 children에 할당됩니다. 다음 예시는 루트 레이아웃 코드입니다. (루트 레이아웃은 반드시 html, body 태그를 포함해야 합니다.)export default function Layout({children} : {children: React.ReactNode}) { return Hello Layout! {children} }루트 레이아웃의 children에는 다음과 같은 app/page.tsx 파일에서 렌더링되는 UI가 자동으로 할당됩니다.expo..
이미지 최적화Next.js에서 이미지와 같은 정적 자산을 보관하기 위해 public 폴더를 사용합니다. 이 폴더에 있는 파일은 애플리케이션에서 바로 참조될 수 있습니다.예를 들면, public/my-profile.png 파일이 있는 경우 다음 코드로 이미지를 참조할 수 있습니다.하지만, img 태그를 이용해 이미지를 렌더링하는 경우 많은 작업들을 직접 처리해야하는 단점이 존재합니다.화면 크기에 따라 변하는 이미지 (반응형 이미지) 설정기기 종류에 따라 달라지는 이미지 설정이미지를 불러올 때 레이아웃 변경 피하기뷰포트에 포함되지 않는 이미지 지연 로딩이미지 최적화Next.js는 next/image 모듈에서 제공하는 Image 컴포넌트를 통해 이미지를 자동 최적화를 달성할 수 있습니다.Image 컴포넌트는..
