순수 JavaScript로 하는 기본 ReactNative-Expo 설정

Source: Dev.to

프리셋

• 패키지 매니저: Bun
• SDK: 54.0.25
• 언어: JavaScript
• 명령 인터페이스: 터미널에 통합된 Bash
• OS: Windows

이 가이드에서는 bun을 패키지 매니저로 사용합니다.

스타터 템플릿으로 프로젝트 만들기

degit https://github.com/Franklivania/expo-js-starter.git 

최소 구성의 Expo 프로젝트 초기화

bun create expo --template blank 

프로젝트 디렉터리로 이동하고 에디터에서 엽니다(예시에서는 Cursor 사용):

cd  && cursor .

필요한 의존성 설치

bun install \
  react-native-reanimated \
  react-native-screens \
  lucide-react-native \
  expo-haptics \
  expo-router \
  expo-image \
  expo-linking \
  expo-font \
  expo-constants \
  expo-blur \
  expo-system-ui \
  react-native-web \
  react-native-worklets \
  react-native-safe-area-context \
  @react-native-community/netinfo \
  @react-native-async-storage/async-storage@next \
  @react-navigation/bottom-tabs \
  @react-navigation/elements \
  @react-navigation/native \
  expo-splash-screen \
  react-dom \
  react-native-svg

이 패키지들은 순수 JavaScript Expo 앱에 필요한 핵심 기능을 제공합니다.

설정

jsconfig.json (선택 사항)

jsconfig.json을 생성하거나 업데이트하여 import 경로를 간소화합니다:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "~/*": ["./assets/*"]
    }
  }
}

Babel (babel.config.js)

Expo 프리셋과 worklets 플러그인을 사용하도록 Babel을 설정합니다:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["react-native-worklets/plugin"]
  };
};

app.json

필요한 플러그인(Expo Router와 Splash Screen)을 app.json에 추가합니다:

{
  "plugins": [
    "expo-router",
    [
      "expo-splash-screen",
      {
        "image": "./assets/images/splash-icon.png",
        "imageWidth": 200,
        "resizeMode": "contain",
        "backgroundColor": "#ffffff",
        "dark": {
          "backgroundColor": "#000000"
        }
      }
    ]
  ]
}

진입점

package.json의 main 필드를 Expo Router 진입점으로 업데이트합니다:

{
  "main": "expo-router/entry"
}

Expo는 자동으로 레이아웃 파일(예: /app/_layout.jsx 또는 /src/app/_layout.jsx)을 찾아 사용합니다.

의존성 호환성 확인

Expo doctor를 실행하여 버전 불일치를 확인합니다:

bunx expo-doctor

문제가 보고되면 다음 명령으로 해결합니다:

bunx expo install --check

모든 것이 호환된 것을 확인한 후에는 기본 index.js와 App.js 파일을 안전하게 삭제할 수 있습니다.

최종 메모

이것으로 끝입니다! 이제 기본 TypeScript 설정 없이 순수 JavaScript Expo 프로젝트가 준비되었습니다. 즐거운 코딩 되세요! 🍻💻