리액트 네이티브 1 - 환경 설정

설치 프로그램

vscode
https://code.visualstudio.com/

Nodejs
https://nodejs.org/ko

Andorid 스튜디오
https://developer.android.com/studio?hl=ko

---

환경 변수 설정

유튜브 참고 : 방구석코딩

보통 C드라이브 -> 사용자 -> user -> (숨긴 항목 보기) -> AppData -> Andorid -> Sdk
C:\Users\user\AppData\Local\Android\Sdk

%ANDORID_HOME%\platform-tool
%ANDORID_HOME%\emulator

이렇게 세줄을 추가하게 되면 모든 설정이 끝난것이다.

---

CMD 명령어

📌 1) 기본 EXPO 프로젝트 구조

✔ CMD 명령어

npx create-expo-app Exam --template blank

App.js 하나로 시작하는 기본 프로젝트.

📌 2) 최신 버전 / Expo Router 기본 구조

expo-router가 자동 포함된 최신 템플릿.

✔ CMD 명령어

npx create-expo-app Exam

이 구조는 “Next.js 스타일 라우팅(EXPO Router)”이 기본 포함 되어있고
즉, pages = /app 폴더에서 라우팅 자동 처리가 되어서 → App.js 자체가 없어도 됨.

---

실행어

npm start

expo start

실행 후 QR 코드가 나옴 → 휴대폰 Expo Go 앱으로 확인 가능
저 컴퓨터가 안드로이드 에뮬을 켜니까 느려서 웹으로만 실행시켰습니다.

2️⃣ 웹 브라우저에서 실행

npm run web

3️⃣ Android/iOS 에뮬레이터 실행

npm run android

npm run ios

Android → PC에 설치된 Android Emulator를 바로 띄움

---

확장 Extension

추후에 스터디하면서 필요한 styled-components나 Material Design 기반 라이브러리를 설치해 주려고 합니다.

---

마지막 ex

저는 기본 expo 파일 app.js에서 사이에서 먼저 작성을 해준 상태입니다.
진짜 게임이 하고 싶더라고요... 하하...

추가 수정 + 후에 작업하고 보니까 javascrip 문법때문에 아주 골치가 아파서 현재는 typescript로 파일을 전부 변경중.

npx create-expo-app Exam --template blank-typescript

이후에 파일 생성할때는 타입스크립트 쓰실분들 초기 템플렛을 이렇게 입력하십시오...