본문 바로가기

전체 글

(72)

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

Specified module format (CommonJs) is not matching the module format of the source code (EcmaScript Modules) Specified module format (CommonJs) is not matching the module format of the source code (EcmaScript Modules) The CommonJs module format was specified in the package.json that is affecting this source file or by using an special extension, but Ecmascript import/export syntax is used in the source code. The module was automatically converted to an EcmaScript module, but that is in conflict with th..

puppeteer aws lambda에 배포하기 puppeteer는 크롬이나 파이어폭스에서 동작을 조작하기 위한 자바스크립트 라이브러리이다.오늘은 이 puppeteer를 통해 웹스크래핑을 하여 장소 정보를 실시간으로 가져오고자 한다.그리고 aws 람다를 통해 배포하는 과정을 담은 튜토리얼을 차근히 따라가면서 작업한 사항을 기록하고자 한다.구글 place api를 사용하느라 30만 원어치 이상의 비용이 발생해서, 차선택으로 웹스크래핑한 정보를 가져와서 써보는 방향을 선택해 봤다.물론 api에 비해서 응답 속도 등이 느려질 부분이 염려되지만 금액적으로 최선인 거 같고,평소에 들어보기만 했던 lambda와 docker를 경험해 볼 좋은 경험 같아서 공부 삼아해 보기로 했다. 준비물- aws 계정 : lambda에 배포 - aws sam CLI (설치 링..

[⚛️ React conf 2024] 두 대의 컴퓨터로 돌아가는 리액트 (React for Two Computers | Dan Abramov) 2024.09.24 - [👩🏻‍💻 dev] - [⚛️ React Conf 2024] 리액트 19에서 새로워진 것들 (What's new in React 19 | Lydia Hallie) [⚛️ React Conf 2024] 리액트 19에서 새로워진 것들 (What's new in React 19 | Lydia Hallie)What's new in React 19 | Lydia Hallie약 2 달 전에 REACT CONF 2024가 열렸다.여러 토크들이 진행되었었는데, 그중 따끈 따근(?)한 React 19의 새 소식들을 살펴보고자 한다.canary 버전의 리액트를 쓰고 있었다면pyotato-dev.tistory.com이전 글은 리액트 19에서 새로워진 기능들이나 개선된 사항에 대해 살펴봤었다.오늘..

[TOSS] useFunnel 만들어보기 2024.07.05 - [👩🏻‍💻 dev] - 토스ㅣSLASH 23 - 퍼널 : 쏟아지는 페이지 한 방에 관리하기 (TOSH | SLASH 23 - Funnel Pattern : Organizing an overflow of pages at once) 토스ㅣSLASH 23 - 퍼널 : 쏟아지는 페이지 한 방에 관리하기 (TOSH | SLASH 23 - Funnel Pattern : Organizing an ov⚠️ 저작권 보호를 위해 자료 및 예시가 대체되었습니다. 예시 코드는 React⚛️로 작성되었습니다.🫨 통신사 가입을 하기 위해서 아래와 같이 긴 폼과 약정이 포함된 페이지를 마주치게 될 때pyotato-dev.tistory.com이전 토스 SLASH23에 소개된 useFunnel에 대해 살..

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

티스토리툴바