개인 Next.js 보일러 플레이트를 세팅하면서 Yarn 4 의 PnP(Plug And Play)와 Zero-install로 환경을 구성을 시도해보았다. 이번에 환경을 세팅하며 마주했던 상황들과 이슈들을 정리해본다. 편의상 Yarn PnP를 Yarn berry라 부르겠다.

Element implicitly has an 'any' type because expression of type 'string'
can't be used to index type 'data'
No index signature with a parameter of type 'string' was found on type 'Data'

객체의 키 배열을 뽑아냈지만, string[] 타입으로 강제되어 위와 같은 에러를 만난 적이 있을 것이다.

이를 이해하기 위해 타입스크립트 인덱스 시그니처와 자바스크립트 덕 타이핑 관계를 알아보자.

프론트엔드라면 주로 사용하는 프로그래밍 언어 중 하나인 타입스크립트의 특히 '유틸리티 타입'이라는 매우 유용한 기능을 알아보려고 한다.

타입스크립트는 자바스크립트의 슈퍼셋으로, 자바스크립트에 정적 타입 기능을 추가한 언어다. 이를 통해 코드의 안정성을 높이고 버그를 줄일 수 있게 되는데, 이러한 타입스크립트의 장점 중 하나가 바로 '유틸리티 타입'이다.

프로젝트 대부분을 sass를 사용하면서, 프로젝트 멤버가 바뀌거나 다른 개발자의 스타일을 수정하며 사뭇 두려워질 때면 style도 js,ts 코드와 마찬가지로 개선해 나가는 게 중요하다고 느끼게 된다.

style도 레거시가 될 수 있는데 이에 도움될뿐 아니라 심지어 스크립트를 제거하여 손쉽게 사용자 경험의 성과를 보여줄 수 있는 최신 css의 12가지 속성에 대해 알아보자.

"개발자에게 버그란 항상 따라다니는 그림자와 같다. 모든 개발자들이 버그가 없는 제품을 만들기 위해 최선을 다하지만 늘 그렇듯 버그는 예기치 못한 곳에서 매번 발생한다."

모던 리액트 Deep dive 중

버그와 예기치 못한 작동을 방지하기 위한 여러 가지 방법이 있는데, 그중 가장 빠르게 시도해 볼 수 있는 방법은 정적 코드 분석이다. 자바스크립트 생태계에 가장 많이 사용되는 정적 코드 분석 도구 ESLint가 무엇인지 어떻게 사용하면 좋을지 살펴보자.

지인에게 '모던 리액트 Deep dive' 발간 소식을 듣고, 책 정보를 찾아 보다가 이 책의 저자님이 제가 평소에 감명깊게 보던 블로그의 주인분이라는 것을 알게 되어, 고민 없이 해당 도서의 서포터즈 활동까지 지원하고 책을 구매하였다.

웅모님의 '모던 자바스크립트 Deep dive'로 JavaScript를 깊게 파고들 수 있었던 기억이 있는데, 현업에서 Next.js와 React를 다루고 있어 이 책을 통해 더 깊게 이해하고 실무에 적용하는 것을 기대하게되었다.

위키북스 '모던 리액트 Deep dive'의 서포터즈로 선정되면서 절반정도 읽은 시점의 책의 서평을 간단하게 남겨본다.

이전 포스팅에서 코어 웹 바이탈에 대해 살펴보고, 웹을 개선하기 위해 어떻게 코어 웹 바이탈을 측정할 수 있는지에 대해 알아보았다. 두 번째 단계로, 측정한 코어 웹 바이탈을 어떻게 개선할지 알아보자.

현재 담당하고 있는 프로젝트의 개발 환경인 Next.js 를 기준으로 정리해 보았다.

이전 포스팅:
웹 성능 지표, 코어 웹 바이탈(CWV)
코어 웹 바이탈 측정을 위한 도구 모음

이전 포스팅에서 살펴본 "Core Web Vitals", 각자의 프로젝트에서 코어 웹 바이탈을 개선하기 위한 첫 단계로 어떻게 코어 웹 바이탈을 측정할 수 있는 지에 대해 알아보자.

이것저것 찾아보고 정리하다 보니 크게 개발 시 유용한 측정 도구들과 지속적인 모니터링을 위한 도구들로 나누어졌다.

이전 포스팅:
웹 성능 지표, 코어 웹 바이탈(CWV)

성능은 회사의 수익에 직접적인 영향을 미쳤습니다.
Performance has directly impacted the company’s bottom line.

Pinterest

웹 바이탈(Web Vitals)은 웹에서 최종 사용자 페이지 경험을 측정하기 위한 통합 지침과 지표를 제공하기 위해 Google에서 만든 이니셔티브다.

데이터 요청 상태에 따라 다르게 노출되는 UX/UI 설계는 많은 고민을 필요로 한다. 이러한 문제를 해결하기 위해 React는 다양한 방법을 제공하는데, 그 중 Suspense와 ErrorBoundary를 활용한 선언적 데이터 패칭이 있다.

지금부터 Suspense와 ErrorBoundary를 활용한 선언적 데이터 패칭이 어떻게 효과적인지 함께 알아보자.