본문 바로가기

전체 글

(70)

세션 스토리지, 로컬 스토리지 어떤 걸 써야할까? 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를 통해 알고 있었던 ..

[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..

목록 더보기

티스토리툴바