다중 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의 내장된 기능을 사용해야 합니다. ..
Next.js - Routing 정적 라우팅, 동적 라우팅, 링크 활용하기
Next.js는 일반적인 리액트의 페이지 기반 라우팅과 다르게 파일 기반 시스템으로 되어있어, vscode 같은 통합개발환경에서 개발을 위해 폴더와 파일을 만들면 그 구조가 자연스럽게 라우팅에 활용되도록 해줍니다. 정적 라우팅과 동적 라우팅을 활용하는 방법을 알아보겠습니다.1. 정적 라우팅정적 라우팅은 라우트가 빌드 타임에 결정되는 것을 의미합니다. 이 경우, 각 페이지에 대한 라우트가 사전에 정의되어 있으며, 사용자가 해당 페이지를 요청하면 라우팅이 발생합니다. 아래는 정적 라우팅 구조의 예시.- pages - index.js - about.js - contact.js위의 예시에서는 index.js, about.js, contact.js 파일이 각각 /, /about, /contact 경로로 이동됩니다..