Next.js 15 App Router에서 PWA 설정하기 🍍

PWA는 프로그레시브 웹 앱의 줄임말로, 요즘 브라우저 기반으로 서비스를 제공하는 경우 많이 적용되어있는 기술이다.(스타벅스, notion, AliExpress, 스포티파이 등등) 단순하게 생각하면, 웹 사이트인데 윈도우 App이나 맥 App처럼 바로가기를 만들 수 있는 등 어플리케이션 같은 기능을 제공해주는 웹 사이트다.(즉, 네이티브 앱처럼 동작하도록 만들어진 웹 앱 & 설치 가능한 웹사이트) 💘 PWA의 주요 특징은 다음과 같다.📱 설치 가능크롬이나 사파리에서 "홈 화면에 추가"로 앱처럼 설치 가능🔌 오프라인 지원네트워크가 끊겨도 일부 기능 사용 가능 (서비스 워커 덕분)🚀 빠른 로딩캐싱 덕분에 다음 방문 시 로딩 속도 빠름💬 푸시 알림백그라운드에서도 사용자에게 알림 전송 가능 (조건 있음..

• format_list_bulleted 웹 개발
• · 2025. 4. 11.
• textsms

requestIdleCallback 알아보기 (브라우저가 idle할 때, 콜백함수를 대기열에 👍)

✨ 주의) requestIdleCallback는 아직 실험적인 기능인 것 같다.... 브라우저가 idle할 때 (메인 스레드가 사용자의 입력, 애니메이션 실행 등으로 한가 때) 콜백 함수를 실행할 수 있도록 해주는 함수가 requestIdleCallback 라고 한다. 브라우저가 여유가 있을 때, 콜백함수를 실행시켜서 여유 시간에 덜 중요한 작업을 효과적으로 처리할 수 있는 장점이 있다.메인 스레드 과부하를 줄이며, 여러 작업을 동시에 처리하여 사용자의 경험을 향상시킬 수 있다.var handle = window.requestIdleCallback(callback[, options]) mdn에서 소개하는 requestIdleCallback 함수는 이렇게 구성되는데, 아주아주 간단하게 실제로 실행할 수 있..

• format_list_bulleted 웹 개발
• · 2024. 9. 5.
• textsms