본문 바로가기
  • 경제적 자유를 누리기 위해, 디지털 노마드
코딩

어플만들기 맨땅에 헤딩1

by 메이비존과산체스 2020. 2. 29.
반응형

이번 시간부터 어플을 만들어 볼 겁니다.

페이스북에서 만든 React Native가 플랫폼이 안드로이드 애플 둘 다 된다 해서 깔려고 머리 오지게 박았습니다.

 

 

<닥치고 따라 하는 React Native 환경설정>(expo이용)

 

Step 1. npm이란 친구를 이용하기 위해 Node.js를 깝니다. (구글 검색하면 나옴) 

          노드 js공홈 ▶ https://nodejs.org/ko/download/

 

 

 

Step 2. 다 깔았으면 cmd를 켭니다.npm install expo-cli --global라고 칩니다.

 

 

 

 

Step 3. expo init projectname 해서 폴더를 생성한다 하면 템플릿 고르라고 합니다. 아무거나 ㄱㄱ

 

 

Step 4. 생성된 후 cd projectname 해서 해당디렉토리로 들어갑니다. 그리고 expo start 를 칩니다. 그럼 오지는 

홈페이지 하나 뜨고 오지는 QR코드가 뜰겁니다. 

 

Step 5. 자, 잠시 컴터에서 눈을 떼고 폰을 봅시다. 다음은 폰에다 연결해서 코드변경할때마다 바로 모니터링 해볼 수 있게 해보려 합니다. 들고있는 폰에다가 expo앱을 깔아줍니다. 스토어검색하면 나옵니다. 그리고 scan QR code 를 눌러서 컴터의 QR코드를 스캔해줍니다. 그러면 바로 어플이 실행되버리는 동시에 페이지에 임포트 됩니다.

이 외에 가상기기를 쓰려면 안드로이드 스튜디오나 expo에서 지원하는 스낵 써보시면 좋을거 같습니다.

 

Step 6. 설치가 너무 쉬워서 저도 놀랐습니다. 바로바로 띄워주는게 재밌기도 하고 그러네요 이제 그 폴더로 들어가셔서 코드를 수정하시면 바로바로 화면으로 나옵니다. 편집기는 저는 원래 Visual Studio Code가 깔려있어서 이거 쓰고있는데 편집기 중에 이게 1위입니다. 여태 써본거 중에 가장 유용하고 빠른거 같습니다. 편한걸로 쓰세요ㅋㅋ

껐다 켤때는 step4부터 하시면 됩니다. 저 같은 문과도 코딩 할 수 있습니다. 화이팅 하십쇼     

 

출처: https://hoony-gunputer.tistory.com/entry/react-native-개발-환경-설정하기expo [후니의 컴퓨터]

 

 

요즘 이 누나(?) 보고 많이 공부합니다.

노마드 코더라는 분인데 김치를 좋아하시는 분입니다. 궁금하시면 구독하세요

어쨌든 react native에 대해서 아주 찰지고 (말투가 동네형 같음) 쉽게 알려주셔서 많이 봅니다. 개꿀

 

반응형