next.js 썸네일형 리스트형 routeChange event로 page transition loading UI 구현하기 프로젝트: Co-Building 키워드: routeChange, Router.events, page transition 상황 Next.js에서 Page가 전환되는 동안 페이지 중앙에 Loading UI를 그려주고자 한다. 모든 페이지에 해당하는 기능이니 Custom _app.js 파일에서 처리할 수 있는 방법을 찾는다. 해결 방법 먼저 Loading UI 컴포넌트를 만든다. 이 프로젝트에서는 loading 상태임을 확인하는 boolean 변수를 SWR로 관리하고 있다. // Loading.jsx import React from 'react'; import styled from '@emotion/styled'; import useSWR from 'swr'; import { LOADING_KEY } from.. 더보기 getServerSideProps로 query string 가져오기 프로젝트: Co-Building 키워드: query string, getServerSideProps, redirect 상황 게임 대기방(Room)에는 고유한 roomId가 있다. 대기방의 URL을 이용하여 친구를 초대할 수 있어야하기 때문에, URL의 query string에 roomId가 들어있다. 대기방 페이지 진입시 url에 roomId가 없는 등 예외 상황에 대해 처리를 해줘야한다. 해결 방법 문제를 해결하는 다양한 방법이 있겠지만, 해커톤 당시 급박한 개발에 의한 버그 최소화와 예외 처리 로직 분리를 위해 getServerSideProps API를 이용했다. (성능면에선 최선이 아닐 수 있다.) getServerSideProps의 query parameter를 이용하면 URL에 있는 query .. 더보기 Junction Asia 2022 해커톤 참가/수상 후기 참가 배경 2021년 여름에 지인으로부터 Junction Asia 2021 해커톤에 참가하자는 제안이 왔지만 비대면이라 흥미가 안가기도 했고, 일정상 참가하지 못했다. 올해 여름에는 부산에서 대면으로 해커톤이 열린다는 소식을 접했고, 인생 첫 해커톤을 이번 기회에 해보고 싶다는 생각이 들었다. (정션 아시아 홈페이지 링크: https://asia.hackjunction.com/ko) JUNCTION ASIA 2022 JUNCTION ASIA 2022 Coming Soon asia.hackjunction.com 디자이너 지인과 함께 2명이서 참가한 후 디스코드를 통해 나머지 팀원들을 모을 계획이었지만, 디자이너 분이 멋진 백엔드 개발자와 개자이너(개발자+디자이너)를 데려와주셔서 5명 팀으로 참가할 수 있.. 더보기 Next.js에 PWA 적용하기 키워드: next-pwa, PWA, next.js 상황 Google I/O 2022와 2022 Apple WWDC에서 각각 chrome PWA 추가 기능과 Web Push Notification 지원에 관한 발표가 나오면서, 웹의 가능성이 더욱 넓어졌다. PWA를 프로젝트에서 제대로 사용해본 적은 없지만, 브라우저가 향하고 있는 방향성에 맞게 PWA를 간단하게나마 체험해보고자 한다. 해결 과정 Next.js 프로젝트에서 next-pwa 패키지를 설치한다. yarn add next-pwa next.config.js에서 next-pwa 패키지를 연결한다. /** @type {import('next').NextConfig} */ const withPWA = require('next-pwa'); module.e.. 더보기 Next.js SEO plugin 이용하기(feat. next-seo, next-sitemap) 키워드: next-seo, next-sitemap, SEO, robots.txt, sitemap, canonical URL 상황 지금까지는 Next.js 프로젝트에서 _document.tsx와 next/head를 이용하여 meta/link tag를 작성했다. next-seo 라는 패키지를 이용해서 더 간단하고 가독성있게 SEO 관련 설정을 하고자 한다. 해결 과정 next-seo 패키지를 설치한다. (https://www.npmjs.com/package/next-seo) yarn add next-seo 먼저 seo.config.js 파일을 생성하고, 모든 페이지에서 사용할 전역(Default) SEO properties를 작성한다. 설명을 위해 사이트 이름 등은 'example'로 한다. // seo.c.. 더보기 Next.js API routes CORS 대응하기 + hook 이중 호출 방지하기 프로젝트: tracking map 키워드: Next.js, api routes, CORS, next.config.js, rewrites, strict mode, double-invoking 상황 1 Next.js에서 Naver Maps Directions 5 서비스의 driving(길찾기) API를 호출해야한다. API를 Next.js의 API routes를 이용하여 분리하고, CORS에도 대응하고자 한다. 해결 방법 1 먼저 api/driving.ts 파일을 만들어 API를 분리한다. (참고: start와 goal parameter를 입력값으로 하면, 네이버 길찾기 API를 이용하여 출발지와 목적지에 대한 paths(좌표들의 배열)를 return 하는 로직이다.) // Next.js API route .. 더보기 Next.js를 통해 prefetch 최적화 기법 이해하기(feat.next/link) 프로젝트: 공우 홈페이지 키워드: prefetch, Link, SSR, SSG, CSR, Next.js, Chrome DevTools Network 상황 Next.js가 최초 진입한 페이지의 html파일만 가져온다는 사실은 알고 있었지만, 다른 페이지로 이동할 때 어떤 데이터가 언제 불러와지는지 정확히 알진 못했다. Next.js로 구현한 공우 홈페이지에서 Chrome Devtools Network 탭을 통해 궁금증을 해소하고자한다. 해결과정 먼저 공우 홈페이지에 들어가 network 탭에서 Doc 파일을 확인한다. 역시 최초 진입한 페이지의 html만 가져오고, 다른 페이지로 이동하여도 추가적인 html 요청은 없다. 다른 페이지에 대한 정보를 언제 가져오는지 알기위해 Fetch/XHR과 JS 탭을 확.. 더보기 Vercel log를 통해 Next.js 500 error 원인 분석하기 프로젝트: 채식 지도(가명) 키워드: Next.js, vercel, logging, realtime log, firebase 상황 mock으로 개발 중이었던 유저 피드백 데이터를 firestore에 저장된 실제 데이터로 교체하고자한다. 먼저 firebase를 package.json에 추가하고, firebase initialize 파일을 작성한다. // firebase/index.ts import { initializeApp } from '@firebase/app'; import { getFirestore } from '@firebase/firestore'; initializeApp({ apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY, authDomain: proce.. 더보기 이전 1 2 다음
