1일차 - React Native 시작하기

이번 프로젝트는 전작보다 더 나은 결과물을 만들기 위해

계획수립 및 배경지식 습득에 더 많이 신경 쓰기로 했다. 

단기간에 이것저것 배우다 보니 자꾸 이전에 배웠던 건 잊어버리는데다, 이번 프로젝트는 기간이 너무 짧아

뭘 생각하며 진득하게 만들 여유가 없기 때문에 이 것 역시도 나중 되면 다 잊어버리겠구나 싶어서..

조금이라도 시간나면 그 때 그 때 간단히, 그냥 알아볼 수 있게끔만이라도 써 두도록 하자.

 

프론트는 React Native를 쓰는 걸로 결정이 나서, 

또 모르는 걸 배워서 만들어야 한다 ㅠㅠ

React는 잠깐 써 본 적은 있지만 아직까지 기억하고 있을 리가 없지

암튼 다시 처음부터 시작한다는 느낌으로............................

 

스토리보드는 완벽하지 않지만 대충 어떤 느낌으로 할 지는 결정했기 때문에

목표기간은 2주 안으로 하기로 함. 중간중간 시간 많이 걸릴 것 같은 부분이 많지만 

밤새서라도 해야지 뭐.

오늘이 23일이니 7월 7일까지 하는 걸로. 

 

---

0. JDK 설치

생각해보니 최근에 윈도우 업그레이드를 하는 바람에 다 날아가서 다시 설치함

일단 21로 설치 (JDK Development Kit 21.0.3)

 

1. Android Studio 설치

내 너를 다시 보게 될 날이 올 지는 몰랐는데..

run-android 할 때 오류가 나서 (복붙하는 거 까먹음) 보니까 에뮬레이터가 없어서 그렇다는데,

 

- 일단 안드로이드 스튜디오 path를 다시 설정

  (환경변수 → 시스템변수 ANDROID_HOME을 만들고 경로는 SDK경로 복붙 →

  사용자변수 Path에서 %ANDROID_HOME%\platform-tools 추가)

  (시스템변수에도 설정해 줘야함!)

  하는 김에 시스템 변수쪽에 emulator경로도 추가해주기

기본경로는 sdk디렉토리 아래에 있다

 

- 에뮬레이터 설정

  안드로이드스튜디오 실행 → tools → Device Manager → phone카테고리에서 적당한 모델 선택 → Next → 사용가능한 이미지 선택(될 수 있으면 최신버전으로) → finish

 

다음 play버튼을 눌러서 에뮬레이터 실행

vscode로 작업할 거라면 굳이 실행안해도 됨. Device생성만 해두기-

 

2. React-Native 설치

npm install -g react-native-cli

npm install -g react-native

 

3. 프로젝트 폴더 만들기

npx react-native init 프로젝트명

 

그리고나서 폴더 구성을 봤을 때 

 

정상적으로 초기화가 됐다면 이런 식으로 뭔가 많이(!) 있어야 한다.

 

것도 모르고 그냥 run-android 했다가 

 

error Android project not found. Are you sure this is a React Native project? If your Android files are located in a non-standard location (e.g. not inside 'android' folder), consider setting `project.android.sourceDir` option to point to a new location.

 

라고 에러가 뜨길래 뭐지 하고 폴더를 열었는데

package-lock.json이랑 package.json 이렇게 달랑 두 개만 있어서 당황

이럴 때는 그냥 다시 언인스톨 하고 재설치-

 

npm uninstall -g react-native-cli

npm install -g react-native-cli

npm install -g react-native

 

한 다음에 다시 프로젝트 생성

 

npx react-native init <프로젝트명>

 

이제 준비는 다 되었고 

npx react-native run-android

를 터미널에서 실행하면 됨! 

그래서 안드로이드 스튜디오에서 작업하면 되나본데

아 이건 쓰기 싫었는데 어쩔 수 없나.. 

이거 켜 놓은 채로 vscode를 따로 열어 수정해도 에뮬레이터가 실시간 렌더링 되긴하는데

프로그램을 두 개나 돌리는 건 웃기고..

좀 더 고민해 봐야겠다.

---

알아냄😘

vscode에서도 에뮬레이터 연동이 된다.

 

1. 시스템 변수 → Path → 편집 → emulator 경로 설정 해주기

기본경로는 sdk디렉토리 아래에 있다

 

2. 아까 platform-tools 경로도 추가해 준다. 여기에도 해야 했었는데 검색했던 블로그 주인분 누락하셨던 걸로.. 

3. vscode extension에서 React Native Tools 설치

 

4. 윈도우 재시작 후 cmd에서 입력

emulator -list-avds

아래에 내 에뮬레이터 목록이 나온다.

확인했다면 내 프로젝트 폴더로 이동한 다음,

emulator -avd <에뮬레이터명>

 

하면! 오른쪽에 에뮬레이터 창이 뜬다.

 

5. 그리고 vscode로 돌아와 터미널 창에서

npx react-native run-android

 

 

뭐 작업하려면 명령어를 이것저것 많이 쳐야하는 게 좀 아쉽지만

어쩔 수 없지. 하다보면 익숙해 질거야.......아마도