본문 바로가기

FE개발 공부

RN 개발해보기!

flutter를 사용하면 개발 속도가 낮아진다고 하셔서 RN cli를 활용하기로 했다.

 

 

  • React-Native cli 세팅하기

https://twentytwentyone.tistory.com/776

 

갓난애기도 배울 수 있는 React Native 가이드 ① – React Native CLI 설치부터 첫 실행까지 (실무용 환

갓난애기도 배울 수 있는 React Native 가이드 ① – React Native CLI 설치부터 첫 실행까지 (실무용 환경 구축)React Native를 실제로 앱스토어에 출시하거나, Bluetooth, 백그라운드 작업 등 네이티브 기능을

twentytwentyone.tistory.com

팀원분이 알려주신 cli 설치 가이드를 따라했다. 백그라운드로 만보기를 구현할거라 cli로 해야한다고 하셨다.

그치만 설치에만 이틀이 걸려...

 

우선

  1. 자바 JDK 버전 문제
  2. 에뮬레이터 작동 문제

처음에 막혔던 문제는 크게 이 2가지였다. 실전 개발은 항상 세팅을 따라배우고 접했던 거 같은데

맨땅에 헤딩하려니까 막막했다.

 

자바 버전은 react가 안정적으로 호환이 되는 버전이 있었다. 나같은 경우엔 JDK 17버전으로 설치했다.

원래는 20이 넘어가는 최신이였는데 초기 빌드 중에 자꾸 에러 메시지가 떴다. 그래서 변경!

 

에뮬레이터 오류는 쉽게 활용할 수 있는 제미나이를 활용했는데 이 역시 해결이 안되어서 블로그를 찾아보며 해결했다.

내가 사용하고자 했던 방법은 vsCode에서 에뮬레이터를 작동시키는 것인데 계속 실패했다.

 

파일을 자세히 보니 react native프로젝트 설치가 제대로 안되어있었다.

android파일과 ios파일이 없다..

이런 문제를 겪은 사람들은 보통 캐시 초기화를 하고 패키지를 재설치하면 해결이 되는데 난 아무리 해도 안되었다.

그래서 계속 찾다가 cmd창을 활용하여 프로젝트를 생성하는 방법을 알아냈다.

 

https://youtu.be/sdrqDQAC3Gw?si=5MI8sOy-O3m3UeAp

저와 같은 분들은 이걸로 설치하세요..

 

외국 유튜브가 은근 정보가 많다.

에뮬레이터 설치는 flutter개발 덕분에 미리 되어있던 참이라 나머지만 cmd에 따라서 작성했다.

 

개발을 도와주는 metro bundler가 나오면 세팅 성공이다!

 

초기 파일들이 정말 많은데 이 중에서 app.tsx를 app.js로 바꿔서 렌더링하니까 내가 작성한 코드로 잘 나오는 것을 확인했다.

 

세팅 문제점 찾느라 꼬박 이틀이나 걸렸다...

'FE개발 공부' 카테고리의 다른 글

6. Flutter 소개  (0) 2025.10.02
5. Dart의 클래스  (0) 2025.09.27
4. Dart의 함수  (0) 2025.09.26
3. Dart의 데이터  (0) 2025.09.25
2. Dart의 다양한 변수들  (0) 2025.09.24