posts

๐Ÿ“ฆ ๋Ÿฐํƒ€์ž„ dependencies

Oct 1, 2025 updated Oct 1, 2025 cssexporeact-nativetypescript

ํŒจํ‚ค์ง€ RN/Expo ์‚ฌ์šฉ ์ด์œ /์ด์Šˆ ๋Œ€์ฒด(Expo ํ˜ธํ™˜) ๋ฉ”๋ชจ/์ด๊ด€ ํŒ
@ebay/nice-modal-react โŒ React DOM ์˜์กด(์›น ๋ชจ๋‹ฌ) react-native-modal / react-native-paper(Dialog) ๋„ค์ดํ‹ฐ๋ธŒ ๋ชจ๋‹ฌ API/ํฌํ„ธ ๋ถ€์žฌ ์ „์ œ ์žฌ์„ค๊ณ„
@faker-js/faker โœ… ์ˆœ์ˆ˜ JS ๋™์ผ ์‹œ๋“œ/๋กœ์ผ€์ผ๋งŒ ์ฃผ์˜
@gsap/react / gsap โŒ DOM/์Šคํƒ€์ผ ์†์„ฑ ๊ธฐ๋ฐ˜ react-native-reanimated / moti / react-native-skia ์• ๋‹ˆ๋ฉ”์ด์…˜ DSL ์ „๋ฉด ์น˜ํ™˜ ํ•„์š”
@react-spring/web โŒ ์›น ๋ Œ๋”๋Ÿฌ @react-spring/native / reanimated API ์œ ์‚ฌํ•˜์ง€๋งŒ props ์ฐจ์ด ํผ
@stackflow/* โŒ ์›น SPA ์ „์šฉ ๋‚ด๋น„ @react-navigation/native URL ๋™๊ธฐํ™” ์ œ๊ฑฐ ํ•„์š”
@tanstack/react-query โœ… ํ™˜๊ฒฝ ๋ฌด๊ด€ ๋™์ผ ๋„คํŠธ์›Œํฌ/ํฌ์ปค์Šค ์ด๋ฒคํŠธ ๋ธŒ๋ฆฌ์ง€ ๊ณ ๋ ค
@tanstack/react-query-devtools โš ๏ธ ์›น Devtools UI Flipper ํ”Œ๋Ÿฌ๊ทธ์ธ / react-query-native-devtools ์›น ์ „์šฉ UI๋Š” ๋ถˆ๊ฐ€
@tanstack/react-virtual โŒ DOM ์ธก์ • ์˜์กด FlashList / RecyclerListView / FlatList ๊ฐ€์ƒ์Šคํฌ๋กค ๋Œ€์ฒด
@types/node โŒ Node ์ „์šฉ ํƒ€์ž… ๋ถˆํ•„์š” RN ๋Ÿฐํƒ€์ž„์— Node ์ „์—ญ ์—†์Œ
@use-gesture/react โŒ ํฌ์ธํ„ฐ/DOM ์ œ์Šค์ฒ˜ react-native-gesture-handler + reanimated ์ œ์Šค์ฒ˜ ๋ชจ๋ธ ์ „ํ™˜
axios โœ… ํ™˜๊ฒฝ ๋ฌด๊ด€ ๋™์ผ(fetch ๋Œ€์•ˆ) ํŒŒ์ผ ์—…/๋‹ค์šด์€ expo-file-system ๋ณ‘ํ–‰
clsx โœ… ์ˆœ์ˆ˜ JS ๋™์ผ RN์— class ๊ฐœ๋… ์—†์Œ
dayjs โœ… ์ˆœ์ˆ˜ JS ๋™์ผ ํƒ€์ž„์กด ํ”Œ๋Ÿฌ๊ทธ์ธ ๊ณ ๋ ค
env-cmd โŒ ๋นŒ๋“œ/๋…ธ๋“œ ์Šคํฌ๋ฆฝํŠธ Expo env plugin / app.config.js ๋Ÿฐํƒ€์ž„ ์ฃผ์ž… ๋ฐฉ์‹ ๋ณ€๊ฒฝ
es-toolkit โœ… ์ˆœ์ˆ˜ JS ๋™์ผ ๋ฒˆ๋“ค ํฌ๊ธฐ ํ™•์ธ
glob โŒ Node FS ์˜์กด ๊ฐœ๋ฐœ ๋‹จ๊ณ„์—์„œ๋งŒ ์•ฑ ์ฝ”๋“œ์—์„œ ์‚ฌ์šฉ ๋ถˆ๊ฐ€
he โœ… ์ˆœ์ˆ˜ JS ๋™์ผ ๋ฌธ์ œ ์—†์Œ
hostile โŒ hosts ํŒŒ์ผ ์ˆ˜์ •(Node) ๋ถˆ๊ฐ€ RN ํ™˜๊ฒฝ ๋ฌด์˜๋ฏธ
immer โœ… ์ˆœ์ˆ˜ JS ๋™์ผ ์„ฑ๋Šฅ ๋ฌธ์ œ ๊ฑฐ์˜ ์—†์Œ
jwt-decode โœ… ์ˆœ์ˆ˜ JS ๋™์ผ ํ† ํฐ ์ €์žฅ์†Œ๋Š” expo-secure-store ๊ถŒ์žฅ
lottie-web โŒ DOM/Canvas lottie-react-native JSON ์• ๋‹ˆ๋ฉ”์ด์…˜ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅ
oidc-client-ts โŒ ๋ธŒ๋ผ์šฐ์ € OIDC ํ๋ฆ„/์Šคํ† ๋ฆฌ์ง€ expo-auth-session / react-native-app-auth ๋ฆฌ๋‹ค์ด๋ ‰ํŠธ/PKCE ์žฌ๊ตฌ์„ฑ ํ•„์š”
qs โœ… ์ˆœ์ˆ˜ JS ๋™์ผ URLSearchParams ๋Œ€์•ˆ ๊ฒ€ํ† 
react (19.1.0) โš ๏ธ RN์€ Expo SDK ๋Œ€์‘ ๋ฒ„์ „ ํ•„์š” Expo ์ง€์ • ๋ฒ„์ „ React 18 ๊ณ„์—ด๋กœ ๋‹ค์šด ๊ฐ€๋Šฅ์„ฑ ์žˆ์Œ
react-dom โŒ RN ๋น„์‚ฌ์šฉ ๋ถˆํ•„์š” ์ œ๊ฑฐ
react-hook-form โœ… RN ์ง€์› ๋™์ผ UI ์ปดํฌ๋„ŒํŠธ ์˜ˆ์ œ ์น˜ํ™˜ ํ•„์š”
react-loading-skeleton โŒ DOM/CSS ์Šค์ผˆ๋ ˆํ†ค moti/skeleton / react-native-skeleton-content ์Šคํƒ€์ผ ์ „ํ™˜ ํ•„์š”
react-multi-date-picker โŒ ์›น ์ „์šฉ @react-native-community/datetimepicker / react-native-calendars UX ๋‹จ์ˆœํ™” ๊ถŒ์žฅ
swiper โŒ ์›น Swiper DOM ๊ธฐ๋ฐ˜ react-native-swiper / react-native-swiper-flatlist ์ œ์Šค์ฒ˜ ์ถฉ๋Œ ์ฃผ์˜
type-fest โœ… TS ํƒ€์ž… ๋™์ผ ๋ฌธ์ œ ์—†์Œ
uuid โœ… ์ˆœ์ˆ˜ JS ๋™์ผ RN ํ™˜๊ฒฝ์—์„œ ์ •์ƒ ๋™์ž‘
zustand โœ… ํ™˜๊ฒฝ ๋ฌด๊ด€ ๋™์ผ persist๋Š” mmkv/AsyncStorage ์–ด๋Œ‘ํ„ฐ ์‚ฌ์šฉ

๐Ÿ”ง devDependencies

ํŒจํ‚ค์ง€ RN/Expo ์‚ฌ์šฉ ์ด์œ /์ด์Šˆ ๋Œ€์ฒด(Expo ํ˜ธํ™˜) ๋ฉ”๋ชจ/์ด๊ด€ ํŒ
@biomejs/biome โœ… ๋„๊ตฌ ์ฒด์ธ ๋™์ผ RN์—๋„ ์œ ํšจ
@types/he / @types/qs โœ… ํƒ€์ž… ์ •์˜ ๋™์ผ ๋ฌธ์ œ ์—†์Œ
@types/navermaps โŒ ์›น ๋„ค์ด๋ฒ„๋งต react-native-nmap ํƒ€์ž…(์ปค๋ฎค๋‹ˆํ‹ฐ) / ์ž์ฒด d.ts Dev Client ํ•„์š” ๊ฐ€๋Šฅ
@types/react / @types/react-dom โš ๏ธ RN์€ react-dom ๋ถˆํ•„์š” RN ๋Œ€์‘ ํƒ€์ž…๋งŒ ์œ ์ง€ react-dom ํƒ€์ž… ์ œ๊ฑฐ ๊ถŒ์žฅ
@vitejs/*, vite, vite-plugin-html, vite-tsconfig-paths โŒ ์›น ๋ฒˆ๋“ค๋Ÿฌ Expo Metro ์ „๋ฉด ์ œ๊ฑฐ
@vitejs/plugin-basic-ssl โŒ ๊ฐœ๋ฐœ ์„œ๋ฒ„ SSL Expo Dev Client / LAN ๋ชจ๋“œ ๋ถˆํ•„์š”
@vitejs/plugin-react โŒ Vite ์ „์šฉ ๋ถˆํ•„์š” ์ œ๊ฑฐ
globals โœ… ๋ฆฐํŒ… ๋ณด์กฐ ๋™์ผ ์œ ์ง€ ๊ฐ€๋Šฅ
husky / lint-staged โœ… Git ํ›… ๋™์ผ ์œ ์ง€ ๊ฐ€๋Šฅ
sass โŒ CSS/Sass ํŒŒ์ดํ”„๋ผ์ธ styled-components/native / nativewind RN์€ CSS ๋ฏธ์ง€์›
stylelint โš ๏ธ CSS ๋ฆฐํŠธ RN ์˜๋ฏธ ์ ์Œ ์ œ๊ฑฐ ๊ฐ€๋Šฅ
swagger-typescript-api โœ… ์ฝ”๋“œ์  (Node) ๋™์ผ API ํƒ€์ž… ์ƒ์„ฑ ํŒŒ์ดํ”„๋ผ์ธ ์œ ์ง€
typescript (~5.8.3) โœ… ์–ธ์–ด Expo ๊ถŒ์žฅ ๋ฒ„์ „ RN ํ…œํ”Œ๋ฆฟ์— ๋งž์ถฐ ์ •๋ ฌ ํ•„์š”

๐Ÿš€ ์ด๊ด€ ํ•ต์‹ฌ ์ฒดํฌ๋ฆฌ์ŠคํŠธ

  • ๋„ค๋น„๊ฒŒ์ด์…˜: @stackflow/* โ†’ React Navigation
  • ์ œ์Šค์ฒ˜/์• ๋‹ˆ๋ฉ”์ด์…˜: gsap, react-spring/web, @use-gesture/react โ†’ reanimated + gesture-handler + moti
  • ๋ฆฌ์ŠคํŠธ ๊ฐ€์ƒํ™”: react-virtual โ†’ FlashList / RecyclerListView
  • UI/์Šคํƒ€์ผ: Sass/CSS ๊ธฐ๋ฐ˜ ์ œ๊ฑฐ โ†’ StyleSheet / styled-components/native / nativewind
  • Lottie: lottie-web โ†’ lottie-react-native
  • ์ธ์ฆ(OIDC): oidc-client-ts โ†’ expo-auth-session / react-native-app-auth
  • ์ง€๋„: ์›น SDK ์ œ๊ฑฐ โ†’ react-native-nmap / react-native-maps
  • ๋ฒˆ๋“ค๋ง: Vite โ†’ Metro (Expo ๊ธฐ๋ณธ)
  • React ๋ฒ„์ „: Expo SDK์— ๋งž์ถฐ React 18 ๊ณ„์—ด ์‚ฌ์šฉ