기록을 우선시하자

도입 배경 프로젝트가 많아지다보니 레거시 시스템으로 운영되고 있는 프로젝트도 있고 서로 베이스로 사용하는 Node버전이 달라지게 되었습니다. 개발자마다 프로젝트 내부에서도 사용중인 Node의 버전이 달라지는 이슈를 해결하기 위해 문서화한 가이드입니다. nvm은 Node Version Manager의 약자로써 여러 Node 버전을 설치하고 관리하는 기능을 제공합니다. 이를 활용하여 프로젝트별로 버전을 통일 하는 방법이 있습니다. 쉘 환경 별로 설정하는 방법은 아래와 같습니다. 환경별 설정방법 zsh GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions vi..

$ sh apigen.sh ✔ src/gql/index.ts was generated. Error: Cannot find module 'graphql/validation/rules/KnownArgumentNamesRule' Require stack: - /opt/homebrew/lib/node_modules/apollo/node_modules/@apollo/federation/dist/composition/validate/preNormalization/tagDirective.js - /opt/homebrew/lib/node_modules/apollo/node_modules/@apollo/federation/dist/composition/validate/preNormalization/index.js - /..

해당 기능이 왜 필요하게 되었는가? 태블릿에서 사용할 모바일 웹앱을 개발하던 도중, 가상키보드로 인한 스크롤 이슈를 접하게 되었습니다. 그 과정에서 알아본 내용을 정리하려 합니다. 돔의 이벤트 핸들러로 스크롤을 제한하는 방식도 찾아보았으나 해당 방법으로는 해결하지 못했고, 이 글에서는 자바스크립트를 핸들링하지 않고 CSS속성을 추가하여 해결하는 방법을 알려드리려 합니다. touch-action 사용하기 touch-action은 사용자의 터치 이벤트에 대한 브라우저의 기본 동작을 변경하는 CSS 속성입니다. 이 속성을 사용하여 터치 이벤트를 원하는 방식으로 조작하고, 사용자 경험을 개선할 수 있습니다. touch-action의 속성을 정리하자면 1. auto: 브라우저가 가진 기본 동작을 수행 2. non..

이 글을 쓰게 된 배경 저는 AWS의 Amplify를 이용하여 도메인을 서빙하였는데, Amplify의 이슈인지 Middleware의 이슈인지는 정확하게 판단이 서질 않습니다. 그렇지만 Amplify는 아직 Next.js의 모든 기능을 지원해주지 않기 때문에 기록해봅니다. Middleware의 matcher가 고장의 원인 공식 홈페이지에서 middleware의 matcher의 활용법으로 여러가지 방식을 공유하고 있습니다. 서비스를 구축하면서 미들웨어에 해당 matcher를 사용했더니 API routes가 동작하지 않는 문제가 발생하였습니다. API Routes의 경우는 문제가 생길경우 Proxy서버 내부에서 발생하기 때문에 에러로그를 볼 줄 모른다면 블랙박스 영역에서 문제가 생겨 디버깅이 상대적으로 어려..

일렉트론 장점 React, Next 등 많은 프레임워크를 지원해준다 가장 많이 쓰이고 있고 레퍼런스가 많다 지원해주는 API 기능이 많다 -> 크러쉬 리포트 등 잘만 쓴다면 좋은 기능이 많은거 같음 단점 용량을 크게 잡아 먹는다 메모리도 많이 잡아먹는다 데스크탑 앱만 지원된다 → 요거는 포팅하는 방법을 찾아보면 있을수도 있다 Tauri 장점 Rust로 백엔드 API가 구성되어 속도가 빠름 빌드 작업물의 용량이 작음 메모리를 적게 먹음 2.0 alpha버전에서 모바일도 지원 예정 한글 문서를 지원해준다 -> 아직 번역기 수준정도에 머물러있는듯 함 단점 대부분 프레임워크를 지원하는 것 같긴 하나 표기되어있진 않음 -> Next, Vite, Svelt 등등 간략하게만 표기 각각의 사용법에 맞는 예시가 적음 지..

webOS를 개발하면서 여러가지 문제들을 겪었다. 애니메이션의 지연, 키 이벤트 다중호출로 화면 이동의 지연 등 TV라는 디바이스 환경은 웹에 비해서 생각보다 열악했다. 필요에 의해 수많은 최적화들을 거쳤지만 이중 TV개발에 있어서 엄청나게 많은 도움이 되었고, 가장 성능에 많은 영향을 미친 Throttle을 정리해볼까 한다. Throttle 이벤트를 일정 주기마다 발생하도록 처리하는 기법으로 실행이 된 이벤트 이후 지연 시간 내의 이벤트는 실행이 되지않는다. 주로 무한 스크롤 같이 이벤트가 많이 발생하는 경우에 사용이 되는데, 나의 경우는 TV 개발에서 리모콘을 계속 누르고 있는 행위 자체가 수백번의 키 이벤트를 동작하게 하였기에 적용하게 되었다. 예시코드 let timer; function throt..