2026/04/09 2

Next.js 검색 API 500 에러 디버깅 및 문제 해결 과정 정리

1. 문제 상황MenuMate 프로젝트에서 레시피 검색 기능을 구현하던 중, 다음과 같은 문제가 발생했습니다.검색어 입력 후 제출 시에는 정상적으로 결과가 나옴뒤로가기 / 새로고침 시 간헐적으로 500 에러 발생검색 중 오류 발생시 출력되는 '레시피 검색 기능을 구현하던 중, 다음과 같은 문제가 발생'가 나옴 항상 성공하는 것도 아니고 항상 실패하는 것도 아닌 간헐적으로 검색 요청이 실패하는 문제 상황을 이해할 수 없었습니다. 2. 초기 의심 포인트처음에는 다음과 같은 가능성들을 의심했습니다.API route(/api/search) 로직 문제searchRecipes()(검색 유스케이스 진입점) 내부 로직 문제JSON 파싱 에러네트워크 오류이중에서 특정 상황에서만 발생하는 조건부 원인을 찾아보고자 했습니..

길이 단위 px, em, rem

PXpx은 화면의 물리적인 픽셀 단위를 기준으로 한 고정 단위입니다. 이 값은 절대적인 크기를 나타내며, 요소의 크기가 고정되어 디바이스의 해상도나 사용자 설정에 영향을 받지 않습니다. 예를 들어, font-size: 16px으로 설정하면 항상 16픽셀 크기로 표시됩니다. 픽셀 단위는 간단하고 정확한 제어를 제공하지만, 사용자의 접근성 설정(예: 브라우저에서 텍스트 크기 확대)에 따라 조정되지 않아 유연성이 떨어질 수 있습니다. emem은 해당 요소에 현재 적용된(즉, 부모 요소 또는 현재 요소의) font-size를 기준으로 하는 상대 단위입니다. 기본적으로, 브라우저의 초기 폰트 크기가 16px이므로, 상속받은 기본값이 없을 경우 1em은 16px로 계산됩니다. 그러나 상위 요소에 따라 상대적으로 크..