본문 바로가기

전체 글

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.. 더보기
Junction Asia 2022 해커톤 참가/수상 후기 참가 배경2021년 여름에 지인으로부터 Junction Asia 2021 해커톤에 참가하자는 제안이 왔지만 비대면이라 흥미가 안가기도 했고, 일정상 참가하지 못했다.올해 여름에는 부산에서 대면으로 해커톤이 열린다는 소식을 접했고, 인생 첫 해커톤을 이번 기회에 해보고 싶다는 생각이 들었다.(정션 아시아 홈페이지 링크: https://asia.hackjunction.com/ko) JUNCTION ASIA 2022JUNCTION ASIA 2022 Coming Soonasia.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.. 더보기
UX/UI의 10가지 심리학 법칙(존 야블론스키) 존 야블론스키님의 책을 읽고, 책의 내용과 저자의 웹사이트(https://lawsofux.com/) 내용을 간단하게 정리하고자 한다. 핵심 개념을 제외하고는 생략된 설명과 예제가 많으니, 책을 직접 읽거나 웹사이트를 정독하는 것을 추천드린다. 제이콥의 법칙(Jakob’s Law) Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. 혁신적으로 UX를 향상(much better)하는게 아니라면, 사용자가 익숙한 인터페이스를 똑같이 제공하라. 웹사이트가 제공하는 핵심 기능에 집중하는 것도 힘든 유저.. 더보기
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.. 더보기
ESLint custom rule(plugin) 만들기 키워드: eslint, custom rule, eslint plugin, spellcheck, generator-eslint, Yeoman, AST 상황 프로젝트에서 자주 쓰이는 단어들이 있는데, 디자이너에게 전달받은 문구에 오타가 있는 경우가 잦다. Lint를 이용하여 코드 레벨에서 오타를 잡아낼 수 있으면 좋겠다고 생각했다. IDE에 사전을 등록하는 기능은 있지만, 오타를 감지하고 수정해주는 rule까지는 설정할 수 없기 때문에 custom rule을 만들어보기로 한다. 해결 과정 eslint custom rule을 만들 수 있는 generator-eslint package를 이용하기로 한다. (https://www.npmjs.com/package/generator-eslint) README 대로 Y.. 더보기

티스토리툴바