본문 바로가기

전체 글

(72)

[성능 개선] Next Image + blur data url vs. cloudinary 'use client';import { BlurImageOnLoad } from '@tripie-pyotato/design-system/@components';import API from 'constants/api-routes';const TripieBlurImage = ({ src }: { src: string; index: number }) => { return ;};export default TripieBlurImage;2025.02.15 - [👩🏻‍💻 dev] - Nextjs blurDataUrl dynamic 하게 제공하기 Nextjs blurDataUrl dynamic하게 제공하기오랜만에 포스팅! 오늘은 nextjs 이미지 컴포넌트에서 blurDataUrl을 활용해서 이미지가 완전히 로..

[성능 개선] Font metrics override으로 Font 최적화하기 웹폰트를 사용하면 font-display:swap으로 설정하여 콘텐츠를 fallback 폰트로 보여줘서 FOIT를 제거하고,woff2나 woff 등 용량이 적은 폰트 format을 제공해서 로드 시간을 단축해 폰트 최적화를 하기도 한다. 하지만 해당 방식은 layout shift를 제거하기에는 부족한 점이 있다.오늘은 Font metrics override와 size-adjust를 통해 layout shift를 최소화(제거)하여 폰트 최적화를 하는 방법에 대해 다루고자 한다. 다음은 fallback 폰트를 제공해서 텍스트 랜더를 가속화하는 방법이다.@font-face { font-family: 'MaruBuri'; src: local('MaruBuri'), url('../static/fon..

세션 스토리지, 로컬 스토리지 어떤 걸 써야할까? 2025.03.13 - [👩🏻‍💻 dev] - 로컬 스토리지 vs 세션 스토리지 vs 쿠키 로컬 스토리지 vs 세션 스토리지 vs 쿠키http 프로토콜은 서버와 클라이언트 간의 커뮤니케이션이 용이하도록 중요한 해준다. 다만 http 프로토콜은 stateless 프로토콜이라는 점에서 서버나 클라이언트의 요청이나 응답을 트래킹 하지 않pyotato-dev.tistory.com이전 동작이 애매했던 나의 useFunnel 고쳐보기를 진행하면서 퍼널 스탭마다 데이터를 유지할 방법에 대해 고민했던 점이 생각이 나서 다뤄보고자 한다. 그중 이전에 살펴봤던 세션/로컬 스토리지 및 쿠키와 관련해서 선택한 옵션에 대해 살펴보고자 한다.🤔 탭이나 페이지를 닫고 다시 진입했을 경우, 해당 선택사항이 유지되어야할까? 삭..

로컬 스토리지 vs 세션 스토리지 vs 쿠키 http 프로토콜은 서버와 클라이언트 간의 커뮤니케이션이 용이하도록 중요한 해준다. 다만 http 프로토콜은 stateless 프로토콜이라는 점에서 서버나 클라이언트의 요청이나 응답을 트래킹 하지 않는다는 점이다. 해당 문제점을 해결하기 위해 로컬/세션 스토리지 및 쿠키를 사용해서 서버들 간의 요청을 트래킹 할 수 있다.TLDR;한눈에 비교해보기local storagesession storagecookie저장 용량5MB ~ 10MB대부분 5MB최대 4KBpersistence브라우저/탭을 닫아도 유지, 직접 또는 자바스크립트로 삭제를 해줘야 제거된다.브라우저/탭이 닫히면 제거됨쿠키 설정에 따라 다르다 (session-base 또는 persist)scopeorigin, 도메인이나 프로토콜에 의해 각각 저장됨..

[타입스크립트] Type error: Re-exporting a type when 'isolatedModules' is enabled requires using 'export type'. 2025.03.12 - [👩🏻‍💻 dev] - 🍬 React import 시 Wrapper 패턴 활용해 보기 과 같이 import하는 경우" data-og-host="pyotato-dev.tistory.com" data-og-source-url="https://pyotato-dev.tistory.com/entry/%F0%9F%8D%AC-React-import-%EC%8B%9C-Wrapper-%ED%8C%A8%ED%84%B4-%ED%99%9C%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0" data-og-url="https://pyotato-dev.tistory.com/entry/%F0%9F%8D%AC-React-import-%EC%8B%9C-Wrapper-%ED%8C%A8%ED%..

🍬 React import 시 Wrapper 패턴 활용해보기 최근에 리액트에서 import 시에 wrapper 패턴을 활용했다는 글을 읽었다.lodash나 Framer Motion를 전체 라이브러리 단위로 import하는 상황이 종종 있다고 한다.예를 들어, lodash를 > 과 같이 import하는 경우와 같다.>import _ from 'lodash' -> imported 71.78KB>import debounce from "lodash/debounce"; -> imported 3.41KBimport merge from 'lodash/merge'; -> imported 16KB물론 전체 라이브러리를 import하고 있지는 않지만, 글쓴이가 언급한 바와 같이, 여기저기 흩어져 있는 파일들마다 framer-motion나 className/bind를 import하고..

👋 굿바이 CRA (Sunsetting Create React App) TLDR;리액트 앱을 설치하기 위해 CRA를 사용하고 계셨나요? 이제는 CRA가 deprecate 됩니다.해당 이유는 크게 CRA는 라우팅, 데이터 fetching, 코드 스플릿을 자체적으로 지원하지 않아 추가적으로 라이브러리에 의존해야했다는 점, 최근 많은 프레임워크들이 해당 문제들을 해결했고 해당 기능들을 위해 CRA관리가 불필요해졌기 때문입니다.프레임워크나 빌드 툴로 리액트 프로젝트를 마이그레이션하기를 권장합니다. 비록 CRA+빌드 툴도 선택 가능한 옵션이지만 라우팅, 데이터 fetching, 코드 스플릿 기능을 “잘” 통합해놓은 Next.js, React Router, Expo와 같은 프레임워크를 사용하는 것을 추천합니다.위의 프레임위크들은 SSR과 CSR 옵션 모두 제공합니다.SSR이 SEO뿐만..

성능 - intro https://web.dev/learn/performance Learn Performance | web.devThis course is designed for those new to web performance, a vital aspect of the user experience. It covers key web performance concepts and techniques for improving performance.web.dev"성능을 챙겨야지"라고 생각은 했고, 작게 할 수 있는 방법들에 대해 알아보고 여기저기 실천했지만, 이론적인 것을 내가 잘 알고, 연결 지어 실제로 적용할 수 있는가를 생각하면 100% 자신 있게 그렇다고 하기 어려워 아쉬웠다.이번에는 web.dev를 통해 알고 있었던 ..

이전 1 2 3 4 ··· 9 다음

티스토리툴바