Published on

2023 유명한 자바스크립트 라이브러리?

Authors
  • avatar
    Name
    불타는 라쿤들
    Twitter

🦡 작성자 : 혜원

🔥 인사이트 한줄 소개!

2023년 JavaScript 관련 어떤 기술들이 떠올랐는지 통계를 매긴 글인데, 번역하는 김에 대도서관에도 공유해 봅니다 ☺️ 처음 보는 기술들도 많고 익숙한 기술들도 많네요… 영원히 리액트의 시대가 끝나지 않았으면 좋겠어요,,,

✅ 이런 분들 읽으면 좋아요!

✔️ 작년에는 한 해동안 JavaScript 관련 기술들 중 어떤 기술이 유행했는지 알고 싶으신 분

✔️ 이걸 기반으로 2024년의 트렌드도 대충 짐작이 갈 것 같아요… 2024년 JS 트렌드를 알고 싶으신 분!

🔎 본문 내용

전체 트렌드

  1. shadcn/ui
    • tailwind를 이용한 사용자 정의 가능한 스타일 라이브러리
    • MUI나 ChakraUI랑 다르게 npm 패키지가 아니고, 터미널 명령어를 통해 직접 설치해야 하는 것 같아요
    • 요즘 Next.js 때문에 tailwind가 많이 뜨고 있어서 시너지가 좋은듯
  2. Bun
    • JS 및 TS 애플리케이션을 실행, 구축, 테스트, 디버깅 하기 위한 빠른 올인원 툴킷
    • Bun은 벨로그에서 글을 한 번 읽었었는데 이렇게 붐인 줄은 몰랐네요,,,,,,,
    • Bun의 2024년 목표가 기본 백엔드 JS 런타임을 Node.js에서 Bun으로 전환하는 거래요… 이게 된다면 거의 React 등장 급 혁신일듯
  3. Excalidraw
  4. tldraw
  5. Next.js
  6. Supabase
  7. React
  8. Tauri
  9. Drizzle ORM
  10. htmx

프론트엔드 프레임워크

  1. React
    • 계속 1위에 있어 줘 제발…
  2. htmx
    • 이거는 짧게 설명만 읽어봤는데, 사용자가 화면 요소와 상호작용할 때 JS 코드로 동작하게끔 작성하잖아요? 근데 그걸 향상된 HTML로 대체하는? 그런 기술인 것 같아요 대박
    • 이거는 잘 쓰면 엄청 편하고 좋을듯… 한 번 알아보고 싶어요
  3. Svelte
    • 2024년의 제 목표… 스벨트로 프로젝트 하나 해 보기
  4. Million
  5. Vue.js

React 생태계

  1. shadcn/ui
  2. Excalidraw
  3. Next.js
  4. Zustand
    • 요즘 이 상태관리 라이브러리를 진짜 많이 쓰더라고요…
    • Jotai 선택에 후회는 없지만 이 라이브러리도 꼭 사용해 보고 싶어요!!!
  5. Refine

백엔드/풀스택

  1. Next.js
    • 저희 프로젝트는 백엔드 개발자도 서버도 따로 있으니 Next.js로 api를 만들 일은 없겠지만, 프론트엔드 개발자 혼자 사이드 프로젝트 할 때 Next.js만큼 좋은 풀스택 프레임워크가 없는듯…
    • 저도 인턴할 때 api 딱 하나 만드는(POST) 프로젝트 했었는데, 로직이 진짜 직관적이고 쉬웠던 기억이 있어요
  2. Astro
  3. tRPC
  4. create-t3-app
  5. Nest
    • Nest는 제 생각에 점점 떨어질듯?! 아닌가… Next.js가 있으니까 Nest의 장점을 잘 모르겠는… 로고가 간지난다는 것 말고는…

빌드 도구

  1. Bun
    • 올해가 가기 전에 꼭 써 봐야지…
  2. Vite
  3. Biome
  4. 0xc
  5. Rspack

모바일

  1. Expo
  2. React Native
    • 저는 Flutter가 진짜 전망이 좋다고 생각했는데 구글 말고는 아직 RN을 훨씬 많이 쓰는 추세인듯…
    • 어디서 Flutter보다 RN이 4배? 5배? 정도 많다?는 카더라인지 칼럼인지를 봤었던 기억이 있는데 왜일까요… Flutter가 더 좋아 보이는데 의아함…
  3. Tamagui
  4. Quasar
  5. Capacitor

스타일링 / CSS-In-JS

  1. Stylex
  2. UnoCSS
  3. Tamagui
  4. Panda
    • PandaCSS는 Next.js랑 같이 떠오르고 있는 라이브러리라고 들었던 것 같아요 ㅇ.ㅇ SSR에 좋다고…
  5. NativeWind

테스팅 도구

  1. Playwright
  2. Storybook
    • 이번 프로젝트 하면서 느낀 점… 초반에 디자인 시스템 없을 때는 Storybook이 거의 필수이겠다고 느꼈어요…
    • 처음부터 이걸 도입할걸 엄청 후회한… 런칭 후에 천천히 도입해 봐요!!!!
  3. Puppeteer
  4. Vitest
    • Vite 프로젝트에서 많이 쓰는 테스트 도구라고 하네요
  5. Cypress

(Jest가 9위라니…)

데스크탑

  1. Tauri
  2. Wails
  3. Electron
    • 예전에 일렉트론으로 데스크탑 매니저 개발해 보려다가 어려워서 포기했는데 2024년에 다시 한 번 해 보고 싶네요…
    • React를 사용할 줄 알면 이 도구가 편하다고 들었던 것 같아요
  4. Nativefier
  5. Gluon

상태 관리

  1. Zustand
  2. Jotai
    • !!!!
    • Jotai가 2위이긴 하지만 Zustand가 아직 압도적으로 사용도가 높긴 하네요ㄷㄷ
    • 근데 Zustand 만든 팀에서 Jotai를 만들었으니까 전 Jotai가 더 전망이 좋다고 생각함 ㅎㅎ
  3. XState
  4. Pinia
  5. Nano stores

GraphQL

  1. TanStack Query
    • 이것도 1차 런칭 후에 진짜…진짜 써야지
  2. Directus
  3. Amplication
  4. Nhost
  5. Hasura GraphQL Engine

⭐⭐ 결론

  • TypeScript를 쳐내는 Svelte 코드 베이스
  • React를 둔 논쟁(너무 오래 됐다… 복잡하다… 대체로 부정적인 내용인듯)
  • Angular 부상 (왜?????ㅠㅠ)
  • Bun release (올해 release인데 이정도 떡상이면 2024년에는 날아다니겠네요…)
  • Stylex 오픈소스 공개
Discuss on Twitter • View on GitHub