프론트엔드 썸네일형 리스트형 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.. 더보기 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.. 더보기 iframe으로 Vue to React Migration 준비하기 키워드: vue to react migration, iframe, postMessage, contentWindow, window.parent 상황 Vue2로 작성된 프로젝트가 있다. 프로젝트의 복잡성, 인수인계, 유지보수 등을 고려하여 React로 migration하기로 결정했다. 한 번에 옮기기엔 거대한 프로젝트이므로, 기존 로직을 유지하면서 점진적으로 migration하고자 한다. 해결 과정 기존 Vue 로직을 그대로 유지하면서 migration하는 방법은 iframe을 이용하는 것이다. React 프로젝트를 새로 만들어 특정한 기능을 만든 후, 해당 기능만 Vue에서 iframe으로 가져오면 된다. Vue와 React 프로젝트를 development mode로 실행할 경우, 각각 :8080(Vue).. 더보기 이전 1 2 3 4 5 ··· 8 다음
