• 안쓰는 CSS 속성 삭제
• 원래 app디렉토리 하위에 있던 page.tsx 파일을 (site)디렉토리 하위로 변경
  • 이렇게 하더라도 똑같이 localhost:3000으로 진입시 같은 화면을 보여줌

Next.js에서 (괄호) 디렉토리의 역할은?

클라이언트 컴포넌트의 자식 컴포넌트들이 모두다 클라이언트 컴포넌트는 아니다.

• props를 children으로 넘기면 클라이언트 컴포넌트내에도 서버컴포넌트가 위치 할 수 있다.

모바일 퍼스트 개발을 진행

• 예를들어 css를 부여할때 처음에 classname=’hidden’ 을 주면 모바일사이즈에서는 안보이게 하겠다는 뜻이다.
• 하지만 classname=’hidden md:flex’ 라고 부여하면 모바일에서는 보이지 않고, 그다음 사이즈에서는 노출된다는 뜻이다.

tailwind merge?

• css를 기본적으로 줄 수 있고, 나머지 추가되는 것들은 props className으로 넘겨서 오버라이딩하거나, 추가할 수 있는 것 같음

function Box({ children, className }: BoxProps) {
  return (
    <div
      className={twMerge(
        `
    bg-neutral-900
    rounded-lg
    h-hit
    w-full
  `,
        className
      )}
    >
      {children}
    </div>
  );
}

export default Box;