프론트개발이모저모

vite 프로젝트에서 msw를 통해 mock api를 구성하고 jest와 비슷한 vitest를 이용해 테스트 코드를 작성해보는 것을 목표로 진행해봤습니다. 이렇게 제대로 테스트 코드 작성은 거의 처음이다보니 하다가 막히는 부분과 고민이 많았습니다.

저번 시간에 이어 오늘은 본격적인 테스트 코드를 작성해볼 예정입니다. 제가 원하는 테스트는 저번 시간에 말씀드렸다 싶이 4가지 유형에 대해 테스트 코드를 작성해보도록 하겠습니다. 그 과정에서 발생한 이슈사항이 여러 개 있었는데 어떻게 해결하였는지 정리하였습니다.

요즘 많은 곳에서 '모바일 웹' 형태로 개발이 되고 있는 거 같습니다. 따라서 이제는 PC 브라우저 환경에 맞춰서 개발할 것이 아니라 모바일도 고려하면서 개발을 하는게 중요한 때인거 같습니다. 저는 그러한 부분이 좀 부족하지 않나 싶어서 해당 주제를 선정하게 되었습다.

이번 시간에는 간단하게 TouchEvent에 대해 알아보도록 하며 MouseEvent와는 어떤 차이가 있는지 살펴보겠습니다. 그리고 둘 다 지원 하려면 어떻게 해야 하는지도 가볍게 알아보도록 하겠습니다.

저는 원하는 영역에 대해서만 pinch zoom을 하면 해당 영역이 확대되거나 축소되었으면 좋겠습니다. 하지만 기본적으로 브라우저 자체에서 핀치줌을 하면 브라우저가 확대되어버린다는 문제가 있습니다. 따라서 브라우저 자체 핀치 줌을 막는 방법에 대해 알아보도록 하겠습니다

이번 시간에는 pinch zoom 기능 구현에 초점을 맞춰서 진행하도록 하겠습니다. 앞에 1~3장은 오늘을 위한 빌드업이었습니다. 기본 pinch zoom 기능 구현과 이를 개선하는 방법에 대해 설명하도록 하겠습니다.

요즘 프론트엔드 트렌드 하면 웹 성능과 최적화 방법에 대한 내용이 아닐까 싶습니다. 저 또한 관심이 많은 편인데요. 오늘은 그 중에서 LCP 라는 측정 지표에 대해 알아보면서 간단하게 이미지를 가지고 테스트를 진행해볼까 합니다.

View Transitions API 에 대해 들어보셨나요? 나온지 얼마 안된 녀석이기 때문에 모를 수 있을 거 같습니다. 참고로 저는 카카오엔터테이먼트 FE 기술 블로그를 보다가 알게되었습니다. 흥미로운 내용이길래 해당 글을 참고하여 실습을 진행해봤습니다.

이번 시간에는 폰트에 대해 알아보겠습니다. 이미지와 더불어 폰트는 프론트엔드 입장에서는 매우 중요하면서도 까다로운 녀석이라고 할 수 있겠습니다. 그만큼 성능에 직접적인 영향을 미치기 때문인데요. 그래서 무엇보다 성능을 고려해서 최적화를 해주는 게 좋습니다.

요즘에 제가 부족하다고 생각되는 부분을 찾아서 공부하고 있는데 그 중 한가지가 모듈 시스템입니다. CommonJS와 ES Module(ESM)에 대한 대략적인 부분은 알고 있지만 제대로 알고 있다고 말하기는 힘들거 같습니다. 이번 시간에는 모듈 시스템을 알아보겠습니다.

프론트엔드에서 form은 참 중요한 거 같습니다. 사용되는 곳보다 안되는 곳을 찾기 더 어려울 듯 합니다. 그만큼 관리가 중요하고 많은 곳에서 사용되고 있습니다. 그래서 이번 시간에는 React Hook Form의 인기와 왜 많이 사용되는지 알아보도록 하겠습니다.

최근에 우연찮게 Micro Frontends에 대해 알아볼 기회가 생겼습니다다. 사실 그 전까지는 알아볼 필요성을 못느꼈다고 봐야 될 거 같습니다. 이전 회사에서 제가 맡은 서비스가 대규모인것도 아니었고, 개인적인 공부나 실습에서도 사용할 필요가 없었기 때문입니다.

저번 시간에 Module Federation 글에 연장선으로 이번 시간에는 Monorepo에 대해 알아보도록 하겠습니다. 모노레포 또한 대규모 웹 애플리케이션 개발 시 자주 언급되는 방법론인거 같습니다. 그만큼 토스, 라인 등 여러 회사에서 채택되어 사용되고 있습니다.

이번에는 어떤 글을 써볼까 하다가 Zod가 눈에 들어왔습니다. 해외 개발 블로그 보다보면 Zod에 대한 영상이 보이는데 해보면 재밌을거 같다는 생각이 들었습니다. React Hook Form과 연계해서 Zod를 통한 Form Validation을 구현해보도록 하겠습니다

공유 UI 컴포넌트를 가져다가 사용하는 방법에는 어떤 것들이 있을까요? 이에 대해 알아보고 Radix-ui와 이를 기반으로 만들어진 shadcn/ui 를 선택한 이유와 간단한 사용 방법에 대해 알아봤습니다.

사이드 프로젝트로 전역 상태 도구를 사용할 필요가 생겨서 Recoil을 사용하려다가 Jotai를 사용하게 된 썰. 하지만 조금 익숙하지 않아서 공식 문서를 통해 천천히 읽어봤습니다.

차트 라이브러리 중에 Chart.js에 대해 알아보면서 차트는 어떻게 만들어지는지 디버깅을 통해 알아보는 시간을 가졌습니다.

Nx에 대해 공식문서를 읽으면서 간단하게 알아본 글 입니다.

한글 문서... HWP... 별로 좋아하지 않습니다만... 이번에 분석해야할 일이 있었습니다. 그렇다고 처음부터 맨땅에 헤딩을 할 수 없으니 적당한 라이브러리를 찾다가 hwp.js 라는 것을 보게 되었습니다.

최근에 웹 소켓, Socket.io 를 사용해볼 일이 생겼습니다. 음... 그 동안은 간단한 개념만 알고 있었고 실제 사용해볼일은 없었습니다. 이번시간에는 간단하게 웹 소켓 개념과 Socket.io 사용법에 대해 알아봤습니다.