본문 바로가기

전체 글164

이미지 최적화 나는 image를 이렇게 사용했다. process.env.PUBLIC_URL은 호스팅되는 웹 경로가 변경돼도 정적 파일의 경로를 하나하나 수정하지않아도 되기에 이렇게 불러와서 사용했고, alt은 잘 작성하지 않았다. 지금 진행하는 프로젝트에서 이미지 작업이 많아 문득 이미지를 어떻게 웹에 올리는 것이 최적의 방법인지 고민이 됐다. 1. 이미지 최적화란 무엇일까요? 좋은 품질의 이미지를 제공하면서, 가능한 가장 작은 크기를 유지하는 과정 2. 왜 필요한가? 이미지는 좋은 사용자 경험 제공을 위함이고, 이미지가 주인 웹사이트의 경우에는 최상의 이미지를 사용해야겠지요. 속도를 위해서 가벼운 이미지를 만들어 이미지를 구별할 수 없는 픽셀 덩어리로 만들겠다는 것이 아닙니다. 이미지 최적화의 이점 사용자 경험 향상.. 2024. 1. 2.
다른 형태 Header Compound Component 적용_02 "use client"; import { HeaderMap } from "@/types/header"; import { usePathname } from "next/navigation"; import React, { ReactNode } from "react"; import { AlertHeader, LogoHeader, CloseHeader, InteractiveHeader, BackHeader, BackCloseHeader, } from "./TypeHeader"; // 헤더 유형별 컴포넌트 정의 const HeaderElement = { Close: () => , Back: () => , Home: () => , BackClose: () => , Alert: () => , Interactive: (.. 2024. 1. 1.
특정 단어에만 다른 스타일 적용 1. 우선 highlight가 표시 될 키워드를 따로 prop를 제공한다. 2. 전체 문장에서 하이라이트 문자 추출 해당 문자열에 highlight 문자가 포함이 되어있으면 1) RegExp (new RegExp(`(${highlight})`) highlight를 문자열에서 정규식 표현식으로 찾습니다. 2) Split 정규식 표현식에 따라 분할 시킵니다. title을 highlight 기준으로 나눠줍니다. 3) Map split 메소드로 생성된 배열을 순회하면서 part와 highlight 키워드가 일치하면 css를 변경해줍니다. const TitleBox = styled.div``; const TitleContent = styled.div` margin-bottom: 10px; margin-right.. 2023. 12. 29.
다른 형태 Header Compound Component 적용_01 header 형태가 다르지만, 똑같은 곳에 위치해있고 어떻게 재사용해야 할 지 고민이 됐다. 그래서 나는 Compound Component를 사용해보기로 했다. 1. Compound Component 1) 정의 컴파운드 컴포넌트는 그룹 컴포넌트의 동작과 상태를 포함하고 있지만 렌더링 제어를 외부 사용자에게 제공하는 패턴이라고 한다. 그게 무슨말인지 이해가 안갔다. 컴파운드 컴포넌트는 여러 개의 컴포넌트를 함께 사용하는 패턴이다. 이때, 컴포넌트들이 하나의 그룹을 이루어 특별한 동작을 한다 예시로 보자 // Compound Components 예시 // 부모 컴포넌트 function ToggleGroup({ children }) { // 이 부모 컴포넌트는 자식 컴포넌트들을 모아서 그룹으로 만든다! ret.. 2023. 12. 27.

티스토리툴바