데스크탑에서 크롬이나 모바일 안드로이드 같은 경우 beforeinstallpropmt 이벤트를 사용해서 다운로드 버튼을 만들 수 있지만 ios는 작성일 기준까지도 불가능하다. 1. beforeinstallpropmt 이벤트 등록하기 import React, { useEffect, useRef } from "react"; ... let deferredPrompt = useRef(null); useEffect(() => { console.log("Listening for Install prompt"); window.addEventListener("beforeinstallprompt", (e) => { e.preventDefault(); deferredPrompt.current = e; }); //설치가 되어..
next js에 pwa 적용하기
next js에서 pwa를 적용하여 모바일에서 다운로드가 가능하게 만드는 튜토리얼 입니다 1. next js 설치 npx create-next-app next js를 설치한다 2. next-pwa 설치 npm install next-pwa next js 프로젝트 안에 next-pwa 패키지를 설치한다 3. next.config.js 파일을 생성한다 해당 파일 안에 아래와 같이 작성한다 const withPWA = require('next-pwa') module.exports = withPWA({ pwa: { dest: 'public' } }) 다른 웹팩에 관련된 패키지를 적용하려면 아래와 같이 한다. const withPlugins = require("next-compose-plugins"); const..
beforinstallpropt라는 wepAPI를 사용하여 클릭시에 홈화면에 추가 할 수 있도록 했다. 다만 ios에서는 불가능하고 안드로이드만 가능하다 useEffect에서 이벤트를 생성한다 let installPrompt = null; useEffect(() => { console.log('Listening for Install prompt'); window.addEventListener('beforeinstallprompt', (e) => { // For older browsers e.preventDefault(); console.log('Install Prompt fired'); installPrompt = e; // See if the app is already installed, in that..
next-pwa 설치 npm install next-pwa `next.config.js` 파일 생성 const withPWA = require('next-pwa') module.exports = withPWA({ pwa: { dest: 'public' } }) meta tag 생성 예제: Next.js PWA Example 참고 : https://itnext.io/pwa-with-next-js-create-next-app-in-2020-%EF%B8%8F-9ee0e1a6313d
목차Next js 튜토리얼 1편: 시작하기Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리얼 6편 : 데이터 가져오기 Next js 튜토리얼 7편 : 컴포넌트 스타일링 Next js 튜토리얼 8편 : 배포 - 현재 글 Deploying a Next.js App▲ZEIT Now 를 통해 애플리캐이션을 매우 간단하고 확장 가능한 배포를 할 수 있습니다.Node.js를 통해서도 비교적 간단하게 가능합니다. 그럼 Next.js를 배포하는 방법에 대해 알아 봅시다 Setup아래의 예제를 다운로드해주세요git clone https://github.com/zeit..
목차Next js 튜토리얼 1편: 시작하기Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리얼 6편 : 데이터 가져오기 Next js 튜토리얼 7편 : 컴포넌트 스타일링 - 현재 글Next js 튜토리얼 8편 : 배포 Styling Components지금까지 컴포넌트의 스타일링을 많이 하지 않았습니다. 하지만 앱에는 스타일이 필요합니다.리엑트 앱에는 스타일을 적용하는 많은 기술들이 있으며, 크게 두가지의 방법으로 분류할 수 있습니다 1. 전통적인 css 파일 기반에 스타일링 (SASS, PostCSS 등)2. CSS in Js 스타일링 전통적인 css ..
목록Next js 튜토리얼 1편: 시작하기Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리얼 6편 : 데이터 가져오기 - 현재 글Next js 튜토리얼 7편 : 컴포넌트 스타일링 Next js 튜토리얼 8편 : 배포Fetching Data for Pages지금까지 next.js의 routing API를 활용하는 방법에 대해 배웠습니다. 이것만으로도 꽤 괜찮은 앱을 만들 수 있지만, 실제로 서비스 되는 앱들은 보통 데이터를 가지고 와서 앱에 뿌려주어야 합니다. Next.js에는 데이터를 가지고 오는 표준 API가 제공됩니다. 우리는 비동기 함수인 'ge..
목차Next js 튜토리얼 1편: 시작하기Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 - 현재 글Next js 튜토리얼 6편 : 데이터 가져오기 Next js 튜토리얼 7편 : 컴포넌트 스타일링 Next js 튜토리얼 8편 : 배포 Clean URLs with Dynamic Routing이전 장에서 query string을 사용하여 동적 페이지를 만드는 방법에 대해서 배웠습니다. 이를 통해 링크를 눌러 이동하면 아래와 같이 나옵니다.http : // localhost : 3000 / post? title = Hello % 20Next.js 이번 장에서는 http : ..
목차Next js 튜토리얼 1편: 시작하기Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용Next js 튜토리얼 4편 : 동적 페이지 - 현재 글Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리얼 6편 : 데이터 가져오기 Next js 튜토리얼 7편 : 컴포넌트 스타일링 Next js 튜토리얼 8편 : 배포Create Dynamic Pages여러 페이지로 기본적인 next.js 앱을 만드는 방법을 알게 되었습니다. 그러나 실제 앱에는 동적 컨텐츠를 표시하기 위해 페이지를 동적으로 만들어야 합니다. next.js에는 여러 가지 방식이 있습니다 이번장에서는 query strings를 이용해 간단한 블로그 앱을 만들어 봅시다. Setup다음 예제를..