Next.js 프로젝트를 진행하며 만난 이슈들
Next.js를 복습하고자 진행한, 포트폴리오 템플릿을 만들며 마주친 이슈를 기록한다.
Warning: Extra attributes from the server: cz-shortcut-listen
Next.js 프로젝트에서 hydration하는데 특정 크롬 익스텐션(Grammarly, colorZilla 등)과 충돌해서 발생한다.
body 태그에 suppressHydrationWarning={true} 옵션을 추가하여 해결했다.
// layout.tsx
const RootLayout = ({ children }: { children: React.ReactNode }) => {
return (
<html lang="en">
<body suppressHydrationWarning={true}>{children}</body>
</html>
);
};깔끔한 Logo를 표현하고 싶을 때는 FontAwesome
아래 4가지 npm 패키지를 불러와 FontAwesomeIcon 태그로 표현할 수 있다.
Warning: Each child in a list should have a unique “key” prop.
리스트의 각 child는 유일한 ‘key’ prop을 가져야한다.
보통 key로 id 값을 할당하지만, 만약 값이 겹치는 경우 해당 값의 name이나 title을 붙여 사용할 수 있다.
함수 선언식 vs 함수 표현식
React 컴포넌트를 정의하는 데 두 가지 방식으로 표현할 수 있다.
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}함수 선언식(Function Declaration)은 function 키워드를 사용하여 함수 명으로 함수를 정의한다.
함수 선언식으로 작성된 함수는 코드 실행 전에 먼저 읽혀서 메모리에 할당(hoisting)되므로 함수가 정의되기 전에 호출할 수 있다. 즉, 함수가 정의되기 전에 해당 함수를 호출해도 오류가 발생하지 않는다.
const RootLayout = ({ children }: { children: React.ReactNode }) => {
return (
<html lang="en">
<body>{children}</body>
</html>
);
};
export default RootLayout;함수 표현식(Function Expression)은 const를 사용하여 변수를 선언, 해당 변수에 익명 함수를 할당한다. 주로 화살표 함수(arrow function)를 사용한다.
해당 함수는 변수가 선언된 후에만 사용할 수 있으므로 함수를 정의하기 전에 호출하면 에러가 발생한다.
웹 브라우저 zoom-in/out
브라우저에서 Cmd +를 누를 때마다 화면의 크기는 25%씩 커진다.
기본 값으로 100%로 설정되어 있으며 최소 25%에서 최대 500%까지 지원한다.
