co-building 썸네일형 리스트형 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명 팀으로 참가할 수 있.. 더보기 이전 1 다음
