기록을 우선시하자

도입 배경 프로젝트가 많아지다보니 레거시 시스템으로 운영되고 있는 프로젝트도 있고 서로 베이스로 사용하는 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서버 내부에서 발생하기 때문에 에러로그를 볼 줄 모른다면 블랙박스 영역에서 문제가 생겨 디버깅이 상대적으로 어려..

2021년의 회고를 작성하고 1년이라는 시간이 지났다. 다시 한번 돌아오면 참으로 다사다난했던 한해라는 생각이 든다. 처음부터 끝까지 손수 작업하고 마무리 지었던 TV 어플리케이션 출시, 그리고 이직까지 우여곡절이 많았고 배운점도 많았던 시간들을 보냈다. 프론트엔드 개발자로써의 2년이라는 시간을 보낸 지금 나는 어떠한 개발자가 되었을까? 조금이나마 정리를 해보려한다. 제품 출시 4-5개월에 걸쳐 만들게 된 TV어플리케이션은 배포부터 관리까지 쉬운게 없었다. 웹 프론트엔드만 해보다보니 어플리케이션의 심사 프로세스가 이렇게나 답답할 줄은 상상도 못했다. 새 버전에 대한 빌드 파일을 심사 올리면 거진 2-3주씩 걸렸고, 그 과정에서의 마이너, 패치 버전의 버그픽스 등이 계속 생겨 심사와 동시에 심사가 계속 올..

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

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

싸피를 졸업하면서 회사를 붙었고 여러모로 좋은 기회였지만 욕심이 생겨서 조금의 도전을 더 하게 되었습니다. 1개월 반의 기간이 지났고 최종으로 3개의 회사를 합격하게 되었습니다. 여러 고민 끝에 2차면접에서 좋은 말씀을 많이 해주셨던 CTO님이 계신 원밀리언이 조금 더 제 마음을 움직였습니다. 원밀리언 댄스 스튜디오 원밀리언은 아주 큰 댄스 스튜디오를 운영중이고 안무 제작, 에이전시, 광고 등 엔터테인먼트로 유명한 회사입니다. 처음에는 원밀리언이 프론트엔드 개발자를 뽑는다는 것에 호기심이 커서 공고를 읽어보게 되었습니다. SSAFY에서 했던 WebRTC에 관련된 내용들이 있었고, 구현 해본 기술이 원밀리언에서 필요하다는 것을 알고는 지원을 하게 되었습니다. 입사할 때 개발자는 서버개발자 두분과 iOS개발..