서버 액션에서 DB를 쿼리하는 코드에 try - catch 구문을 사용하여 오류를 처리할 수 있습니다.즉, try 구문에서 DB 쿼리를 시도하고, catch 구문에서 오류 메시지가 포함된 객체를 반환합니다. 이후 실제 오류 발생시 애플리케이션이 제대로 동작하지 않는 것을 확인하고 싶습니다.우리의 목표는 오류가 발생해도 레이아웃 UI를 그대로 유지하여 애플리케이션을 사용하는 것입니다.Next.js는 이 문제를 해결하기 위해 error.tsx 파일을 사용하여 오류를 처리하는 방법을 제공합니다.즉, 해당 세그먼트에서 오류가 발생하면 같은 수준에 있는 error.tsx 파일에서 렌더링하는 UI가 표시됩니다. error.tsx 파일은 모든 오류를 처리합니다. 하지만, 존재하지 않는 리소스를 가져오는 오류의 경우 ..
전체 글
서버 액션서버 액션이란 별도의 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..