이번장은 앞서 이미지 최적화를 다룬 1장 2장에 이어지는 내용입니다. 이번에 다룰 주요 내용은 sizes 적용입니다. next/image - sizes 속성 적용 내용을 살펴보자면 아래와 같습니다. A string, similar to a media query, that provides information about how wide the image will be at different breakpoints. The value of sizes will greatly affect performance for images using fill or which are styled to have a responsive size. "Sizes"는 미디어 쿼리와 유사한 문자열로, 다양한 브레이크포인트에서 이미지의 ..

이번 장에서는 Tailwind CSS를 사용한 Next.js의 이미지 작성예를 다루고자 합니다. 첫째로 이전에 다루었던 필수 속성들을 다시 확인해보겠습니다. 그것은 fill 속성을 사용할때입니다. width와 heigth prop이 항상 필수라고 생각하였지만 예외가 있었습니다. 우선 작성되어 있는 내용은 아래와 같습니다. 항상 필수라고 생각되었던 옵션에 예외를 발견할 수 있습니다. A boolean that causes the image to fill the parent element, which is useful when the width and height are unknown. 부모 요소의 너비와 높이가 알려지지 않은 경우에 이미지를 채우도록 하는 부울 값입니다. 영어 실력때문인지... 바로 이해가..

웹사이트의 성능을 향상하기 위한 고려사항 중 가장 중요하게 여겨지는 NEXT.js에서의 이미지 최적화에 대해서 다루어 보고자 합니다. NEXT.JS의 이미지 최적화 nextjs에서는 기본적으로 'next/image' 를 제공하고 있습니다. 네 가지 특성을 살펴보겠습니다. 향상된 성능 (Improved Performance) : 언제나 디바이스 사이즈에 맞게 최적화된 이미지 제공 - 스마트폰으로 보면 그에 맞는 이미지를 보여주고, 태블릿 또는 피씨에서 보면 그 디바이스에 맞는 사이즈의 이미지를 보여줍니다. 시각적 안정감 (Visual Stability) : CLS(Cumulative Layout Shift - 누적 레이아웃 이동)을 방지 - 페이지를 최초 오픈시나 살펴볼 때 레이아웃이 이상하게 움직이는 것..

1. Routing 정책 - App Router를 쓰는지 그렇다면 use client를 써야하는 상황 - App Router vs. Page Router → App Router 방식을 사용합니다. 공시문서: https://nextjs.org/docs#app-router-vs-pages-router App Router에서는 streaming과 같은 최신 React 기능을 사용할 수 있는 이점이 있습니다. Next.js 13.3까지 Page Router 방식을 사용했고 App Router는 베타 단계였고, Next.js 13.4부터 App Router가 정식 버전으로 채택되었습니다. App Router의 가장 큰 변화는 RSC(React Server Component)를 default로 쓰고 있다는 점입니다..

개요 : React에서의 routing React.js에서는 routing을 위해서 react-router-dom을 설치해야한다. (현재 최신 버전은 6.2) React에서는 routing을 아래처럼 코딩을 해야한다. import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom'; const App = () => { return ( ) } export default App; 위의 코드는 별거 아니지만, E-commerce에서 Nested Routing이 들어가는 순간 코드는 어마어마하게 길게 될 수 있다. router package도 다운로드 받을 뿐 아니라 코드도 복잡해진다. 이를 위해 Next.js (Nuxt.js ver..

재사용의 이유 Tailwind CSS는 uility class를 html에 markup 형태로 쓰는 방식이다. 그러나 보통 좀 제대로 된 간단한 버튼 하나를 구현하려고 해도 코드과 다음과 같아 길어진다. Hello 위 코드를 반복해서 쓰고 싶다면 가독성이 더욱 더 떨어질 것이다. 이 코드를 My Button 의 형태로 재정의해서 사용하면 .jsx (.tsx) 파일의 가독성이 훨씬 올라갈 것이다. 재사용 방법 Utility class를 재사용하는 방법은 기본적으로 3가지가 있다. 1. tailwind.config.js 이미 정의되어있는 utility class를 재정의하거나, 새로운 utility class를 정의할 때 사용 예시: theme: { extend: { colors: { primary: '#F..