Expo로 만든 앱 npm으로 실행 후 모바일과 웹에서 열기 Hello, World!

프로그래밍의 시작 하면 역시

Hello, World!

가장 간단한 text print 기능을

구현해보는 것이죠, Hello Python 하듯이 

근데 우선 뭔갈 하려면 일단 열어봐야겠죠?

이전 시간에 앱을 만들고 접속도 해봤지만

복습겸 모바일에서만이 아니라 웹에서도

일단 open하는 것을 정리해보겠습니다.

 

 

1. 앱 활성화, 갑자기 접속이 안된다??

모바일 꺼내서 Expo go 앱 접속

내가 만든 Sdobby App을 들어가보면

 

 

처음 만들었을땐, 1번째 그럼처럼 잘 떴는데

갑자기 무한 로딩 걸리더니 3번째 그림처럼

Something went Wrong.. ??

 

Expo 설치 프로젝트 생성 후 npm 실행해 QR 코드로 나의 첫 앱 접속

 

뭐가 문제지 싶어 이전 시간에 했던대로

cmd 띄우고 cd Sdobby_App 경로 찾아간 뒤

npm start

QR 코드 다시 띄우고 scan해봐도

마찬가지입니다.. 나중에 알고보니

모바일과 랩탑(웹) 둘 다 같은 와이파이로

연결이 되어있어야 접속이 됩니다..

요즘 인터넷 그냥이랑 5G 두 가지로 공급되죠?

이게 서로 달랐더라구요...

 

** Node Package Manager

JavaScript/Node.js에서 쓰는 패키지 관리자

 

정리해보자면, 내가 만들었던 Sdobby_App

폴더 자체가 앱(App) 그 자체이며

이걸 cmd-> 경로 접속 -> npm start로

앱을 활성화하는 겁니다.

모바일로 접속이야 위 cmd에서 나오는

QR을 Expo go로 scan해 들어가면 되고 

 

 

2. 웹으로 접속 및 Reload(동기화)

 

웹 접속도 간단합니다. cmd 뜨는 텍스트에

잘 설명되어있죠, 키보드로 w 누르니

쓰고 있는 Edge 인터넷 창에 새 탭으로

잘 떴습니다. 이제 이 창을 VScode를 이용해

편집할껀데, 웹은 즉각즉각 반영됐습니다만,

VScode 편집 후, cmd창에서 키보드 r 눌러

reload 시켜주면 모바일도 동기화되서

편집이 반영됩니다.

아직 이것까지밖에 안해봤네요 ㅎㅎ

 

 

2. JavaScript로 Hello, world! 처음으로 앱 편집

이제 진짜 앱 편집해보기!!

VScode로 app/(tabs)에 index.tsx를 open

일단 폴더탐색기로 위 파일 복사 붙여넣기

해서 backup파일 만들어주고

 

굉장히 길고 복잡한데, 싹다 날려주고

 

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, world! S-dobby가 만든 첫 앱 🎉</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fef6e4',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 24,
  },
});

 

위 코드를 VScode에 복붙 후,

<Text ~> 쪽만 자기한테 맞게 수정한 뒤

Ctrl+S로 파일 저장하고

웹으로 열린 앱 새로고침하면~

 

 

Hellow, world! 잘 떳군요~

cmd에서 r 누르고 모바일로 들어가보면

마찬가지 잘 편집 되었습니다 ㅎㅎ