본문 바로가기

Project29

eslint + husky + lint-staged로 CI 부담 덜어주기 0. TL;DR CI/CD 구축이 완료되었으나, CI단계에서 lint와 test를 모두 진행하는 것이 적절한지 고민 CI단계에서는 많은 코드가 한번에 추가될 것 어긋난 코드를 한번에 수정하는데 많은 리소스가 소모될 우려가 있음 Git hooks를 사용해 pre-commit 단계에서 lint catch를 하기로 결정 husky와 lint-staged를 사용해서 구현 1. Why? Pennyway 프로젝트에서 CI/CD 파이프라인 구축이 완료되었다. 대략적인 로직은 아래와 같다. CI & CD 더 자세한 사항은 repository wiki에서 볼 수 있다. 고민 근데 CI에서 eslint를 catch하는 게 적절한지에 대한 고민이 생겼다. 현재 CI의 로직은 다음과 같다. Main branch로 PR 작성 .. 2024. 4. 18.
Next.js 14 다크모드 구현하기 / 웹 이력서(작성 중) 0. TL;DR 웹 이력서에 다크모드를 적용할 필요성을 느낌 일관적인 경험을 위해 system값을 기본값으로 사용하고, 이후에는 dark / light모드를 토글로 변환하도록 결정 'system 값 사용'과 'load 시 flickering 이슈' 해결에 장점이 있는 next-themes 라이브러리를 사용해서 구현 1. Why? 이력서의 경우 많은 사람들에게 피드백을 받아보는 것이 좋다고 생각한다. 그래서 어느정도 완성된 이력서 사이트를 친구에게 보여줬더니 개발자를 위한 다크모드는 없냐고 불평을 했다. 난 사실 화이트모드를 더 좋아하지만, 상당수의 개발자들이 다크모드를 선호하는 것은 사실이다. 내 이력서 보는 사람들도 어두운 화면을 보다가 갑자기 밝은 화면을 보면 불쾌할 수도 있고, 눈 아프다고 그냥 끄.. 2024. 4. 2.
Web Worker로 백그라운드에서 타이머 작동시키기 0.TL;DR 기존의 타이머 수정방안 3가지 모두 서버 리소스와 UX측면에서 약간의 손해를 감수해야 했기에 아쉬웠음 JavaScript의 비동기 처리 브라우저의 멀티 스레드 동작, 그리고 백그라운드 스레드에서 동작하는 Web Worker 학습 이후 Web Worker를 사용해서 background에서 타이머가 동작하도록 해 문제 해결 1. Why? 스타게이트에서 타이머를 동작시키는 과정에서, 백그라운드로 탭이 넘어갈 시 1000ms에 한 번 동작해야 할 타이머가 60000ms에 한 번 동작하게 되는 문제점이 있었다. 이를 해결하기 위해 Page Visibility API로 타이머가 정상적인 값을 보내주도록 처리했었다. setInterval과 Page Visibility API로 정확한 대기시간 알려주기 .. 2024. 3. 19.
Next.js에서 MongoDB Data 가져오기 / 웹 이력서 1. Why?최근에 취업을 위해서 Web으로 이력서를 만들었다. 회사에 지원할때 제출할 용도로 만들었기에 최대한 빠르게 구현하고자 했고, Project와 Experience등의 사용되는 Data를 src/data 폴더에 넣어두고 가져와서 쓰고 있었다. 하지만 이런 방식으로 구현하다 보니 여러 문제점이 생겼다.내용을 조금 바꿀때마다 새로 commit 하는것이 불편함다른 사람들이 변경 전의 내용을 모두 볼 수 있다는 점마침 Next.js를 사용하는 김에 DB에서 직접 데이터를 가져와서 사용해보고 싶었기에, MongoDB를 사용해서 data를 가져와 사용하는 방식으로 변경하기로 결정했다.MongoDB를 선택한 이유몽고DB는 구글에 검색만 해도 연관검색어 맨 위에 쓰지말라는 말이 뜨는 아주 놀라운 DB이다. 그.. 2024. 3. 3.

티스토리툴바