전체 글 (114) 썸네일형 리스트형 폴리필이란? 폴리필 📖`폴리필`은 자바스크립트 표준에서 새로 추가된 기능을 구현하지 않은 브라우저나 환경에서도 해당 기능을 사용할 수 있게 만들어주는 코드입니다. 예를 들어, 최신 브라우저는 최신 표준의 대부분 기능을 지원하지만, 오래된 브라우저는 지원하지 않는 경우가 많습니다. 이때 폴리필을 통해 부족한 기능을 "채워 넣는" 작업을 합니다. 폴리필은 다음 두 가지 방식으로 작동합니다.새로운 내장 함수 추가예를 들어, `Array.prototype.includes` 같은 함수가 오래된 브라우저에 없을 경우 이를 직접 구현해 사용할 수 있게 만듭니다.기존 함수의 동작 수정브라우저에 이미 존재하는 기능이 최신 표준과 맞지 않다면, 이를 수정해 동작을 맞춥니다. 왜 폴리필이 중요한가요? 📖폴리필은 개발자가 최신 기술로.. 전역 상태 관리, 정말 필요한가? 현대 프론트엔드 개발에서는 저역 상태 관리 도구의 사용이 일반적입니다.하지만 모든 프로젝트에서 전역 상태 관리가 필요하다고는 생각하지 않습니다. 이 글에서는 전역 상태 관리가 왜 필요한지, 언제 사용하는 것이 적합한지에 대해 소개해보려고 합니다.1. 전역 상태란? 📖전역 상태는 앱의 여러 컴포넌트가 공통으로 사용하는 데이터를 의미합니다. 예를 들어로그인된 사용자 정보쇼핑몰의 장바구니 데이터다크 모드와 같은 UI 설정 이러한 데이터는 앱 전반에서 공유되며, 여러 컴포넌트에서 접근하고 수정할 수 있어야 합니다. 2. 전역 상태 관리가 필요한 경우?📖전역 상태 관리가 필요한지 판단하려면 데이터의 범위와 복잡성을 고려해야 합니다. 데이터가 여러 컴포넌트에서 사용될 때예) 로그인된 사용자 정보헤더에서 사용자.. [모아 프로젝트] 버전 관리와 사용자 피드백을 통한 꾸준한 개선 서비스를 개발하고 배포하는 과정에서 중요한 요소 중 하나는 사용자 피드백을 수용해 지속적으로 제품을 개선하는 것입니다.이번에는 `Release 1.0.0` 첫 배포 이후 사용자 피드백 기반으로 기능 추가와 버그 수정 과정, 버전 관리의 중요성에 대해 공유해보려고 합니다. 1. Release 1.0.0 첫 배포! 📖초기 목표서비스를 초기 사용자에게 선보이기 위해 핵심 기능에 집중했습니다. `핵심 기능` : 스탬프 관리, 지도, 앨범, 추천 관광지 2. 사용자 피드백 기반 개선 과정 📖Release 1.0.1🔥 fix 수정된 문제폰트 오류: 특정 브라우저에서 글꼴이 올바르게 표시되지 않는 문제를 해결했습니다.스와이퍼 중앙 정렬 오류 : 콘텐츠 정렬이 어긋나는 문제를 수정해 UI를 강화했습니다.비로그인 .. [성능 최적화] Next.js HydrationBoundary를 활용한 서버-클라이언트 데이터 최적화 Next.js 서버 컴포넌트와 Tanstack Query를 활용해 성능 최적화하는 방법에 대해 소개해보려고 합니다.서버 - 클라이언트 데이터 최적화 📖✨ Next.js의 서버 컴포넌트에서 데이터를 미리 패치해 클라이언트 컴포넌트로 넘겨준다면 초기 렌더링을 개선할 수 있습니다. ✨ 기존 코드기존에는 클라이언트 컴포넌트에서 `Tanstack Query`를 사용해 데이터를 패칭을 했습니다.const MainComponent = () => { const userId = useUserId(); const { data: tourismList, isPending isError } = useGetTourismListQuery(userId); ...} 리팩토링 코드`HydrationBoundary`와 `.. [트러블 슈팅] 스와이퍼가 메인 -> 지도 -> 메인 이동 시 사라지는 이슈 해결 발생한 오류 🔥메인 -> 지도 -> 메인 화면으로 이동했을 때 메인 화면에 있는 `Swiper` 컴포넌트가 사라지는 현상을 겪었습니다. 해결 과정 🔎스와이퍼가 정상적으로 렌더링 되지 않아 매우 당황했지만 그 이유에 대해서 분석을 해봤습니다. 기존 스타일 mapSwiper.css@tailwind base;@tailwind components;@tailwind utilities;.swiperWrapper { @apply fixed bottom-16 left-2/4 z-[99] flex h-[140px] w-[100vw] -translate-x-1/2 transform flex-col items-center justify-end bg-scrollButtonGradient leading-[27px] lg.. [트러블 슈팅] Next.js에서 이미지 최적화로 FCP 및 LCP 성능 개선하기: 이미지 압축을 통한 로딩 속도 향상 lighthouse를 통해 성능을 측정했을 때 이미지 파일이 커서 초기 로딩 성능이 저하되는 문제가 있어서 이미지 파일을 압축해 로딩 속도를 개선한 내용을 공유하려고 합니다. 발생한 오류 🔥성능 측정 이미지 사이즈가 큰 콘텐츠를 렌더링 할 때 `Lighthouse`를 통해 성능을 측정해 보니 `FCP`와 `LCP`가 지연돼 페이지의 초기 렌더링이 느리다는 문제를 확인했습니다. 성능 지표 `FCP (First Contentful Paint)`: 사용자가 처음 콘텐츠를 확인할 수 있는 시점`LCP (Largest Contentful Paint)`: 페이지에서 가장 큰 요소가 표시되는 시점 ❗이 두 지표는 사용자가 페이지를 빠르게 인식할 수 있도록 하는 중요한 요소입니다. 해결 과정 🔎Next.js의 ``.. [트러블 슈팅] SVG 속성 오류 해결하기 - <svg> Height 속성에서 Expected length, "auto" 오류를 수정하는 방법 발생한 오류 🔥 SVG의 `height` 속성을 `auto`로 설정했을 때 발생한 오류였습니다. 해결 과정 🔎HTML, CSS에선 `height`에 `auto`를 사용해 콘텐츠의 높이를 유동적으로 설정할 수 있지만, SVG의 `height` 속성은 `length`값 (예시: `px`,`%`)으로 지정해야 합니다. 따라서 `auto`는 SVG 표준에서 요구하는 유효한 `length`값이 아니어서 오류가 발생했습니다. 해결 방법 ✨수정 후 이 문제를 해결하기 위해 `height`속성을 `auto`에서 `100%`로 변경했습니다. 회고 🧐SVG 속성값을 지정할 때 표준을 준수하고 HTML과 CSS의 차이를 고려해 적절한 속성값을 사용하는 것이 좋을 것 같습니다!출처 🏷️https://github... Supabase에서 타입 설정하기 오늘은 Next.js에서 Supabase를 사용할 때 자동으로 타입을 생성하고 적용하는 방법에 대해 설명해보려고 합니다! Supabase 로그인 📖먼저 터미널에서 `npx supabase login`를 입력해 Supabase 로그인을 해줍니다.npx supabase login 그럼 아래 화면으로 이동하게 되는데 인증 번호를 복사하고 터미널에 붙여 넣기를 해줍니다. Supabase 프로젝트 초기화📖로그인을 했다면 `npx supabase init`를 입력해 Supabase와 관련된 기본 설정 파일들을 생성해 줍니다.(자동으로 생성)npx supabase init Supabase 타입 생성📖supabase 홈페이지에서 Project_id를 복사한 후 아래 명령어를 입력해 원하는 위치에 `databa.. 이전 1 2 3 4 ··· 15 다음
