블로그 글: React Native에서 “Failed to Load Bundle localhost:8081” 에러 해결하기
소개:
react-native run-ios 명령어를 사용하여 React Native 프로젝트를 실행하는 도중 “Failed to Load Bundle localhost:8081” 에러를 마주친다면, 혼자가 아닙니다. 이 에러는 주로 babel과 모듈 해결 문제와 관련이 있습니다. 이 블로그 글에서는 이 문제에 대한 일반적인 해결책을 살펴보겠습니다.
가능한 해결책:
해결책 1: @babel/runtime 패키지 설치
가능한 해결책 중 하나는 @babel/runtime 패키지를 설치하는 것입니다. 다음 단계를 따라 진행해주세요:
npm add @babel/runtime
npm install
패키지를 설치한 후 프로젝트를 다시 컴파일해보고 에러가 계속되는지 확인해보세요.
해결책 2: 기본 포트 변경
가끔씩 80, 8080 또는 8081과 같은 일반적인 포트를 사용하는 다른 프로그램과의 충돌로 인해 “Failed to Load Bundle” 에러가 발생할 수 있습니다. 이 문제를 해결하기 위해 기본 포트를 변경해보세요. 다음 단계를 따라 진행해주세요:
react-native run-ios --port=8088
포트를 변경해도 문제가 해결되지 않는다면, 작동하는 포트 번호를 찾을 때까지 다른 포트 번호를 사용해보세요.
해결책 3: Build 초기화 및 패키저 재시작
iOS build 디렉토리를 초기화하고 패키저를 재시작하는 방법을 시도해보세요. 다음 단계를 따라 진행해주세요:
rm -rf ios/build/
kill $(lsof -t -i:8081)
이 방법은 빌드와 패키저를 초기화하여 에러를 해결할 수 있습니다.
해결책 4: Package.json 스크립트 업데이트
위의 해결책들이 모두 작동하지 않는다면, “package.json” 파일을 수정하여 프로젝트를 iOS에 대한 빌드를 위한 새로운 스크립트를 추가할 수 있습니다:
"scripts": {
"build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'"
}
이 스크립트를 추가한 후, 다음 명령어를 실행해주세요:
npm run build:ios
이렇게 하면 iOS에 대한 번들 파일이 생성되며 “Failed to Load Bundle” 에러를 해결할 수 있을 수도 있습니다.
결론:
React Native 프로젝트에서 발생하는 “Failed to Load Bundle localhost:8081” 에러는 귀찮을 수 있지만, 다행히도 이 에러를 해결할 수 있는 여러 가지 해결책이 있습니다. 이 블로그 글에 나와 있는 단계를 따라가면 에러를 해결하고 React Native 애플리케이션을 원활히 개발할 수 있을 것입니다.
주어진 순서대로 해결책을 시도하고 각 해결책을 적용한 후 프로젝트를 테스트하여 에러가 해결되었는지 확인해보세요. 하나의 해결책이 작동하지 않는다면, 다음으로 넘어가면서 귀하의 상황에 맞는 해결책을 찾아보세요. 즐거운 코딩하시기 바랍니다!
