잡다하다

소개Next.js는 웹 성능 향상을 위해 이미지 최적화 기능을 제공합니다. 이 기능을 통해 이미지를 자동으로 최적화하고, 적절한 크기로 리사이즈하여 사용자에게 최상의 경험을 제공합니다. 다음은 Next.js의 이미지 최적화 기능에 대한 자세한 설명입니다.  이미지 컴포넌트 사용Next.js의 Image 컴포넌트는 최적화된 이미지를 렌더링합니다. 기본적으로 이미지의 너비와 높이를 지정해야 하며, 이를 통해 이미지의 비율이 유지됩니다.import Image from 'next/image';const MyImage = () => ( );export default MyImage;  레이즈와 레이아웃 설정이미지의 레이아웃을 설정하여 반응형 디자인을 구현할 수 있습니다. intrinsic, responsive, ..

개요 NEXT.JS를 사용하면서 느꼈던 폴더 구조에 대해 작성해보려고 한다. 현재 포트폴리오겸 개발중인 프로젝트기 때문에 완성되지 않은 구조임을 감안해주길 바란다. 또한, 공부가 완벽하지 않아 틀린점이 있을 수 있으니 많은 지적 부탁한다. public과 src로 크게 분리되며, public에는 font, image, svg 파일들을 보관하는 용도로 사용했다. src/app 실질적인 페이지들을 보관한 디렉토리이다. routing을 통해 접근하는 페이지별로 디렉토리를 구성한 모습이다. src/components 공통으로 사용하는 component들에 대해 보관했다. 테이블이나 버튼 등을 모든 페이지에서 공통으로 사용할 수 있다. src/config layout.tsx에서 가지게될 컴포넌트들에 대한 모음이다..

이전 글에서 next project를 생성했다. 이번 글은 nextjs의 페이지 이동에 대해 작성하였다. [NEXT.JS] #2 Project 생성하기 특징과 기능에 대한 정리를 마쳤으니 이제 프로젝트를 생성해 보겠다. NEXT.JS 특징과 기능 [NEXT.JS] #1 특징과 기능 회사에서 진행하는 프로젝트에서 REACT.JS가 선택되었다. NEXT.JS를 통해 FRONTEND 개발 many.tistory.com routing을 통해 호출한 url과 component를 연결해주는 작업이 필요한 library인 react와 달리 framework인 nextjs는 pages 내부에 생성된 파일명만으로 웹에서 해당 파일을 호출할 수 있었다! pages/test.js 이제 intelliJ를 열고 pages하위에..