본문 바로가기

👩🏻‍💻 dev

(42)

세션 스토리지, 로컬 스토리지 어떤 걸 써야할까? 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, 도메인이나 프로토콜에 의해 각각 저장됨..

🍬 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뿐만..

[Nextjs] Dynamic metadata tag 생성하기 (Part.2) 2025.02.25 - [👩🏻‍💻 dev] - [Nextjs] Dynamic metadata tag 생성하기 (SEO 지표 54 ➡️ 91) [Nextjs] Dynamic metadata tag 생성하기 (SEO 지표 54 ➡️ 91)nextjs로 해보고 싶었던 것이 있다면 Metadata API 를 활용해서 간단하게 metadata tag를 달아주는 게 아닐까 싶다.오늘은 그 중 페이지 파람에 따라 다이내믹하게 메타태그를 생성할 수 있는 방법에 대pyotato-dev.tistory.com 이전에는 /region 경로의 페이지들에 대한 메타데이터를 붙여줬다.하지만 당시 중복되는 부분이 많은 거 같아서 좀 더 간결하게 할 수 있는 방법을 찾아보니, 상위의 페이지에 공유할 메타데이터 객체를 만들어 쓸 ..

[Nextjs] Dynamic metadata tag 생성하기 (SEO 지표 54 ➡️ 91) nextjs로 해보고 싶었던 것이 있다면 Metadata API 를 활용해서 간단하게 metadata tag를 달아주는 게 아닐까 싶다.오늘은 그 중 페이지 파람에 따라 다이내믹하게 메타태그를 생성할 수 있는 방법에 대해 다루고자 한다.Tripie 앱은 크게 두 가지 서비스를 제공하는데, 트리플에서 스크래핑한 여행지에 대한 팁, 지역 정보나 식당 정보, 여행 일정 팁 등을 열람할 수 있다.챗지피티 기반으로 사용자의 기호에 따라 여행일정을 작성해 준다. 이 중 메타태그로 삼을 데이터들이 모두 준비된 첫 번째인 여행지 정보에 대한 페이지들에 메타태그를 추가해주고자 한다. 공식문서를 살펴보면, 메타태그를 달 수 있는 방법은 두가지다.Config 기반 : static metadata object나 dynami..

Nextjs blurDataUrl dynamic하게 제공하기 오랜만에 포스팅! 오늘은 nextjs 이미지 컴포넌트에서 blurDataUrl을 활용해서 이미지가 완전히 로드되기 전, 흐리게 보이도록 하는 로더를 활용해 보는 방법을 다루고자 한다.지금까지는 일반 img 태그에 스켈레톤을 활용해서 placeholder를 구현했었는데, tripie는 여행 관련 앱이므로 사진 콘텐츠가 엄청 많아 모두 스켈레톤으로 로드하기에는 보기에 좋지 않았다.따라서 앞으로 로드될 이미지의 blur 처리된 버전으로 UX를 높이고자 한번 다뤄보고자 한다. blur data url을 활용한 Nextjs 컴포넌트 placeholderBlur Data Url 이냐 스켈레톤 UI냐먼저 blur data url이 스켈레톤 ui 보다 더 적합한가 챗지피티한테 물어보았다.✅ Pros of Blur Da..

polling mechanism으로 react ref 확인하기 프로젝트 마무리를 하고 있던 중, 제대로 모두 돌아가고 있나 확인하다가자동 회전하고 있던 컴포넌트인 Globe의 동작이 이상하다는 것을 발견했다.오늘은 간단하게 useRef와 useEffect으로 threejs 애니메이션을 추가하는 컴포넌트가 reload/refresh 되어도 제대로 동작하도록 polling을 활용한 것을 다루고자 한다.리로드하면 돌아가야하는 지구본이전 코드'use client';import classNames from 'classnames/bind';import COLORS from 'constants/colors';import dynamic from 'next/dynamic';import { useEffect, useRef } from 'react';import { GlobeMetho..

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

티스토리툴바