다중 props 상태로 styled-components 스타일링 하기
styled-components는 컴포넌트 간의 분리와 재사용성을 높여주며, 스타일의 일관성을 유지하는 데 도움이 됩니다. 부모 컴포넌트에서 상속받은 props의 상태가 여러 상황일 때, 효율적인 사용방법을 알아보겠습니다. 물론 저는 Next.js와 Typescript 사용을 기본으로 합니다. 1. 재사용할 Button 컴포넌트 만들기import Link from 'next/link'; import styled from 'styled-components'; const Button = ({ size, href, children }: ButtonStyledType)) => { const { size, href, children } = props; return ( {children} ); }; export d..
Next.js - Image 기본 기능 활용하기
이미지 최적화에 도움이 되는 next/image 기본 사용법을 알아보겠습니다. 기본 사용법이고, 실제 최적화에 해당하는 내용은 추후 포스팅하겠습니다.1. public 폴더 생성Next.js에서 public 폴더에 저장된 파일들은 정적 파일(static files)로 취급됩니다. 이러한 파일들은 서버에서 직접 제공되어 클라이언트(브라우저)에서 접근할 수 있어야 합니다. 하지만 Next.js는 기본적으로 파일 시스템 라우팅(File System Routing)을 사용하여 페이지를 서빙하며, 이는 정적 파일을 자동으로 처리하지 않습니다. 따라서 public 폴더 안에 있는 이미지 파일은 기본적으로 브라우저에서 접근할 수 없는 상태입니다. 정적 파일을 제공하려면 Next.js의 내장된 기능을 사용해야 합니다. ..