본문 바로가기

분류 전체보기402

<Image> 컴포넌트 Image 컴포넌트란?Next.js 에서 제공하는 이미지 최적화 컴포넌트이다.Next.js 프로젝트에서는 태그를 사용하면 컴파일 에러가 발생한다. 런타임 환경에서 사용하는 데는 아무런 문제가 없지만, 이왕이면 Next.js에서 제공하는 컴포넌트를 써서 대역폭을 줄이고 최적화를 하라는 의미의 에러가 뜬다.Image 컴포넌트의 장점Image 컴포넌트를 사용하면 아래와 같은 장점이 있다.사이즈 최적화 : 브라우저에 적합한 크기의 이미지를 자동으로 제공하여 불필요한 대역폭 사용을 줄여 줌.포멧 최적화 : WebP와 같은 최신 이미지 포맷을 사용해서 파일 크기를 줄이고 로딩 속도를 향상시킴.반응형 이미지 : 다양한 해상도에 맞게 이미지를 자동으로 조절해 줌.레이아웃 보정 : 이미지가 로드되기 전에 공간을 예약.. Programing/Next.js 2024. 8. 5.
모듈의 exports는 선언문에서? 하단에서? // 선언문에서 바로 export 하는 use caseexport function Login() { ...}export fuction Logout() { ...}// 하단에서 모아서 export 하는 use caseexport function Login() { ...}export fuction Logout() { ...}export { Login, Logout }  위 예제는 컴포넌트로 예를 들었지만, 물론 보통 한 파일에서 컴포넌트를 여러 개 export 하는 경우는 잘 없었던 것 같다.함수를 여러 개 export 하는 경우를 생각해보면 더 적절하겠다. 둘의 기능은 완전히 같다. 단순히 취향 차이이다. 각각 장단점이 있는데,선언문에서 바로 export 하는 경우 함수나 컴포넌트가 export 됨.. Programing/React 2024. 8. 2.
layout 컴포넌트 React.js에서 App 컴포넌트에서 했던 일을 Next.js에서는 layout 컴포넌트가 해주고 있다고 생각하면 된다. 프로젝트를 처음 생성하고 나면 src/app 폴더 하위에서부터 layout.tsx 컴포넌트가 만들어져 있을 건데,이곳에서 해당 레이아웃 컴포넌트가 있는 폴더 내부의 모든 파일들 (자식 요소들, children)에 대해서 공통된 레이아웃을 설정할 수 있다. 예를 들어 아래처럼 모든 페이지에 둥둥 떠있는 내비게이션 헤더를 만들 수도 있다. import Link from 'next/link';export default function Layout({ children }) { return ( 홈 ㅣ 로그인 {children} );} .. Programing/Next.js 2024. 8. 1.
<Link> 컴포넌트 넥스트에서는 컴포넌트와 useRouter() 훅으로 페이지 간 이동을 할 수 있다. import Link from 'next/link'function Home() { return ( Main Login )} 앵커 태그와 비슷한 형태로 되어 있는 것을 알 수 있다.Link 컴포넌트로 만든다고 해서 별도의 태그로 만들어지는 것이 아니라 개발자 도구에서 확인해보면 HTML 문서에서는 앵커 태그로 변환되어 있는 것을 확인 할 수 있다. 앵커 태그로 만들어져야 검색 엔진 크롤러가 페이지를 읽을 수 있기 때문에 그런 부분은 넥스트에서 잘 변환해주니 걱정하지 않아도 된다. 다만 Link 컴포넌트로 페이지 이동할 수 있는 링크를 만들어 놓으면 a 태그와는 다르게, 사용자의 뷰포트에.. Programing/Next.js 2024. 7. 31.
개발 초기 아이템 리스트 스켈레톤 로더 구현하기 스크린샷코드// 스켈레톤 컴포넌트// 이후에 가져올 데이터가 렌더링 될 크기와 동일하게 맞춘다import React from 'react';const SkeletonLoader: React.FC = () => { return ( );};export default SkeletonLoader; 위 스켈레톤을 isLoading이나 isPending 등의 값을 반환 받거나 api route에서 로직.. Programing/Next.js 2024. 7. 31.

티스토리툴바