프론트엔드 썸네일형 리스트형 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 .. 더보기 JS QR Code generator 사용하기 프로젝트: Co-Building 키워드: qr code generator, qr code library, window.location 상황 Co-Building의 'Room' 페이지는 동시에 5명까지 접속 가능한 대기방이다. 대기방을 개설한 후 친구들에게 방 정보를 공유하는 시나리오가 있다. 이 때 단순한 URL 복사에 더해 QR Code를 추가하면 옆에 있는 친구에게 쉽게 공유가 가능할 것이다. 대기방마다 고유의 QR Code를 삽입하여 URL 공유 기능을 구현하고자 한다. 해결 방법 QR code를 generate 해주는 라이브러리를 찾아 설치한다. https://www.npmjs.com/package/qrcode qrcode QRCode / 2d Barcode api with both server .. 더보기 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명 팀으로 참가할 수 있.. 더보기 backdrop-filter, box-shadow 크로스 브라우징하기 키워드: backdrop-filter, box-shadow, pseudo-element, nested-element, cross browsing 상황 아무런 효과가 없던 기존의 Header 배경을 backdrop-filter와 box-shadow를 이용하여 꾸미고자 한다. 윗 줄의 흰색 배경(Header)과 아랫줄의 회색 배경(Sub Menus)에 각각 backdrop-filter와 box-shadow를 적용해야했는데, 그 과정에서 Chrome/Safari css 오류가 생겼다. 오류 발생 과정과 해결법을 설명하고자 한다. 해결 과정 먼저 Header와 SubMenu에 각각 새로운 background-color, backdrop-filter, box-shadow를 적용해본다. // header.modul.. 더보기 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.. 더보기 gitbook-cli cb.apply error 해결하기 키워드: gitbook, gitbook-cli, graceful-fs, npm, node, nvm, terminal 상황 gitbook 관련 작업을 하시는 동료로부터 gitbook cli에서 알 수 없는 에러가 발생한다는 얘기를 들었다. 사용해보진 않은 툴이었지만 npm package와 terminal에 익숙하지 않은 분이라 직접 도움을 드리기로 했다. 해결 과정 먼저 gitbook의 README에 따라 gitbook을 install하고 init 해본다. npm install gitbook-cli -g gitbook init 그러면 아래와 같은 에러가 발생한다. if (cb) cb.apply(this, arguments) TypeError: cb.apply is not a function at .../l.. 더보기 이전 1 2 3 4 5 ··· 8 다음
