프론트엔드와 과거와 현재
2024. 3. 26.
프론트엔드와 과거와 현재
심윤섭: 프론트엔드가 현재 걷고 있는 길을 모두 정리해놨다고 해도 과언이 아닐정도로 매우 많은 정보가 들어간 글입니다. SPA를 통해 개척된 프론트엔드 분야가 다시 서버가 많이 필요해지면서 다양한 기술이 나왔습니다. 다양한 기술이 쏟아질 때 우리가 해야 할 것은 기본으로 돌아가 우리에게 필요한 기술(도구)만을 사용하는 것입니다(물론 프론트엔드에 발을 들여놓은지 오래되지 않았다면 힘들겠지만요). 그래서 이 글은 오랫동안 분석하면서 보셨으면 하는 글입니다.
김대관: 프론트엔드가 과거 기술에서 발전이 이루어지면서 현재의 상황까지를 시간의 흐름으로 읽을 수 있는 좋은 글입니다. 해당 글을 통해 웹 기술의 히스토리를 이해하면서 앞으로 프론트엔드 기술의 발전이 어떻게 될 것인지 본인 스스로 인지하고 기술변화를 대비하는 마인드셋이 필요할 것 같습니다.
INP가 뭔데?
심윤섭: 2024.03.12에 Core Web Vital에 FID 대신 INP가 들어왔습니다. Sentry측에서 사이트 성능 최적화와 구글의 검색 순위를 위해 INP를 소개하는 내용입니다. INP를 해결하기 위한 새로운 방법(isInputPending, yield, 새로운 스케줄러)을 소개하지만..아직은 debounce와 throttle을 적용해야 할 것 같네요.
김대관: 구글 검색 순위에 대한 기준이 FID에서 INP로 변경된 이유는 chrome에서 유저의 행동을 분석하는 90%가 웹 내부에서 일어나는 행동이기에 이러한 척도를 변경한 것입니다. 한마디로 과거 웹페이지가 초기 로딩이 가장 중요했다면, 이제는 페이지 기능의 비동기 과정을 처리를 통해 사용자에게 보여지는 정도를 더 중요하게 보겠다는 의미로 느껴집니다.
NextJS의 서드파티 스크립트를 위한 노력
심윤섭: NextJS의 Script 태그를 더 쉽게 관리하도록 @next/third-parties패키지를 소개하고 있습니다. NextJS에서는 Script 태그의 strategy값을 통해 환경에 맞는 전략을 구사하고 있고, 이를 더 쉽게 사용하도록 @next/third-parties패키지를 만들었다고 하네요. 이외에도 Worker에서 불러오는 방식도 있으니 참고하세요. :)
명확한 테스트를 위한 암시적 Assert
심윤섭: 테스트를 진행할 때 테스트 라이브러리의 함수를 사용하게 됩니다. 이 때 테스트 코드를 짤 때 테스트 라이브러리의 함수는 여러가지 암시적 assertion이 포함되어 있다는 것을 인지하고 필요 없는 테스트 코드를 삭제해야 한다고 주장합니다. 개인적으로 더 나아가서 테스트 코드가 문서처럼 보일 수 있도록 하는게 최선일 수도 있다는 생각입니다. 테스트 코드를 현재 사용하지 않아도 볼만한 글이라고 생각합니다.
React 컴파일러의 타입 시스템
심윤섭: React 컴파일러에서 타입 추론을 위해 사용하는 시스템을 소개하고 있습니다. JavaScript 코드만으로 추론하는 방식을 보여주고 있습니다. 추론에 대한 시스템이나 논문을 소개해 어려운 글이지만, 키워드만 가볍게 보고 넘어갈만한 글이라고 생각합니다.
TS 5.5의 타입 술어(A is Type)추론 기능
더 좋은 TypeScript를 사용할 수 있는 라이브러리인 ts-reset과 함께 TypeScript 5.5에 추가될 타입 술어 추론 기능에 대해 소개합니다.
React 렌더링 대화형 가이드
심윤섭: React 렌더링이 어떻게 되는지에 대한 이해하기 쉬운 대화형 가이드입니다. 심화로 가고 싶으시다면 항상 나오는 이 글을 읽어주세요 🙂
DMAIC 접근법 소개
심윤섭: 리액트 네비게이션 성능 최적화 과정을 통해 DMAIC 접근법을 소개하고 있습니다. 성능에 대한 프로세스를 세우고 싶을 때 고려해보면 좋을 수도 있지만 이런 시스템을 구축하는 것도 시간이 많이 들기 때문에 빠르게 고쳐야 할 경우라면 적당하지 않을 수 있겠네요.
새로운 친구들
심윤섭: 많아서 주목할 만한 라이브러리를 한꺼번에 가져왔습니다. 첫번째는 이전에 소개했던 LLRT와 비슷한 런타임인 WinterJS입니다. 매우 빠르고 기존 웹 프레임워크 + WinterCG + Cloudflare API와 호환, Bun보다 빠른 속도를 갖고 있는 런타임입니다. 아직은 Bun처럼 도입하기에 어렵지만 지켜볼만 하다고 생각합니다. 두번째는 MUI팀에서 emotion을 계승하는 zero 런타임 CSS-in-JS입니다. CSS-in-JS와 utility-first CSS를 풀어내는 방식을 지켜보고 팀에게 맞는 기술을 선택하는게 중요하겠네요(CSS 기술이 더 파편화될 것으로 보여서요!). 세번째는 UX 개선, 성능 개선, 여러 기술과 통합을 추가한 스토리북 8 출시 글입니다. 테스트를 시작할 때 스토리북이 Jest처럼 꼭 필요한 패키지가 될 수도 있겠네요.
프레임워크 기본 배우기
세개의 프레임워크의 기본은 모두 같다고 생각합니다(그 외도요). 그 기본을 쉽게 배울 수 있는 책이 있다고 해서 가져왔습니다.
Million Lint
리액트의 성능 개선을 반자동으로 탐지해 주는 툴이라고 하네요. 유료로 할것이라는 소식이지만 신기해서 가져왔습니다 😅