프론트엔드 추천 기술스택

siwoo jang·2024년 4월 15일

개발언어부문 : Typescript

• 협업, 인터페이스 IDE 자동완성면에서 탁월한 성능을 가지고 있기에 대부분의 회사가 채용하고 있습니다.
• Type은 자바스크립트에서도 다음번 가장 먼저 개선되었으면 하는 스펙입니다.
• 이제는 거의 대부분의 라이브러리들이 이제 Typescript로 재작성되고 있다.
• Babel을 써야할 이유가 사라지고 있다.
• alternative : javascript

프레임워크부문 : React

• 변해버린 웹 개발판도에서 프레임워크 1개는 이제 필수가 되어버린 상황입니다.
• 2018년을 기점으로 React의 시장 점유율은 압도적으로 1등이 되었습니다.
• 대부분의 회사에서 새로운 프로젝트에는 React를 사용하고자 하고 있습니다.
• 그래서 대부분의 커리큘럼에서 React가 기본이 되고 있습니다.
• angular와 vue의 자책골
• svelte, solid, qwik는 캐즘을 넘지 못하고 있다.
• 인력수급면에서도 좋으나 싫으나 해야하는 Web Framework 입니다.
• alternative : Vue

메타 프레임워크부문 : Next.js

• SSR 프레임워크의 선두두자인 Next는 여전히 이 위치를 선점하고 있습니다.
• 실전에서 쓰고 있는 사람들은 Next에 대해서 자주 바뀌는 스펙과 Vercel에 대해서 완전히 호의적이지는 않습니다만 그렇다고 Remix로 갈아타는 경우는 드뭅니다.
• 왜냐하면 많은 사람들이 Next를 써보고 싶어하고 배워보고 싶어하기 때문입니다.
• alternative : Remix

서버상태관리 : Tanstack Query

• axios와 더불어 서버와 API 통신을 한다면 기본적으로 사용하게 되는 라이브러리 입니다.
• API를 처리하는 과정에서 필요한 대부분의 기능을 제공하고 있어 선호됩니다.
• alternative : SWR

상태관리 : Zustand

• Redux가 레거시 취급을 받고 있습니다.
• Recoil은 아직 1.0 버전이 나오고 있지 않습니다.
• 여전히 상태관리는 필요성이 느껴집니다.
• 귀여운 곰돌이와 함께 Redux의 대체제로써 자리매김을 하더니 지금은 상당히 보편적인 상태관리 라이브러리가 되었습니다.

유틸리티 CSS : TailwindCSS

• 필수는 아니고 여전히 호불호는 높지만 이제는거대해진 생태계로 인해 대세가 되었습니다.
• Atomic CSS, Utility CSS 중에는 대체제가 없다.
• 거의 모든 프레임워크에 Adapt 할 수 있도록 커뮤니티가 지원하고 있습니다.
• 현재 웹 개발 트렌드와 디자인 툴과의 궁합이 좋습니다.
• 최근 인기있는 CSS 컴포넌트들이 대부분 tailwindCSS로 만들어지고 있네요.
• 좋으나 싫으나 알아야 하는 CSS 트렌드입니다.

컴포넌트 라이브러리 : shadcn/ui

• React과 TailwindCSS 기반으로 작성이 되어 있습니다.
• Headless Component로 인기가 높은 Radix위에 작성이 되었습니다.
• 현재 가장 선호하는 기술스택위에 깔끔한 형태와 다양한 컴포넌트를 지원하는 점에서 최근 인기가 높아진 듯 합니다. (물론 저는 써보지 않았습니다.)

번들러 : Vite

• Webpack을 능가할 번들러 생태계 1인자될 후보
• React의 기본 생태계로 인해 webpack의 점유율은 가장 높지만 리텐션과 생태계의 크기면에서 Vite는 상당히 괜찮은 대안입니다.
• alternative : Webpack, Rollup

코드 포맷터 : Prettier

• 옵션이 없는 포맷터라서 호불호가 갈렸지만 이제는 컨벤션을 통일하는 역할을 합니다.
• Eslint도 이제 포맷팅 기능을 더 이상 개발하지 않습니다.
• 딱히 대체제가 없는 상황에서 사실상 표준 포맷터가 되었습니다.

UI 컴포넌트 관리 도구 : Storybook

• 여러가지 대체제가 나오는 듯 했으나 결국 Stroybook의 압승으로 끝났습니다.
• 프로젝트에 필수적인 도구는 아닐 수 있지만 마크업 인력이 별도로 있을 경우 마크업 개발자는 스토리북으로 작업을 하는 경우가 많습니다.

테스트 도구 : Jest, React Testing Library, Playwright

• React 생태계가 주류이기에 React 테스트 도구가 주류입니다.
• e2e는 전통의 cypress에서 Playwright로 서서히 분위기가 넘어와 어느덧 역전을 했네요.
• Vite를 주 번들러로 사용하는 경우 Jest대신 Vitest도 많이 사용하고 있습니다.