[스파르타코딩클럽] 앱개발 종합반 2주차 -1 (21.12.29)

[스파르타코딩클럽] 앱개발 종합반 2주차 -1 (21.12.29)

728x90

반응형

21.12.29 수요일

- 2주 차 강의 2-1 ~ 2-2 까지 들음

요즘 바빠서 이제야 2주차 시작

교육 내용

- 1주차 강의 내용 : 앱을 개발할때 필요한 자바스크립트 문법들 기초

- 2주차 강의 내용 : 위에 문법들을 바탕으로 앱을 만들어가는 강의

- 리액트 네이티브와 Expo 배울 예정

- 리액트 네이티브 = 리액트 (React) + 네이티브 (Native)

리액트 ? 페이스북에서 만든 웹 화면을 만드는 프론트엔드기술 중 하나

- Expo ? 자바스크립트만 알아도 앱을 개발할 수 있게 도와주는 툴

ㄴ 이걸 통해서 안드로이드 , IOS 로 배포 가능

- Expo 클라이언트 앱을 통해서 바로바로 개발중인 앱을 확인할 수 있음

- Node.js로 자바스크립트 개발 환경을 구축하고,

NPM으로 필요한 자바스크립트 앱 개발 도구들을 가져온다.

- Yarn : npm보다 더 효율적으로 가져오는...

- yarn 설치

cmd 창에 npm install -g yarn npm을 이용해 yarn을 전역적으로 설치 할것이다.

전역적 : 어디서든지 해당 패키지(도구)명으로 사용할 수 있게 하겠다.

npm install -g yarn

- Expo 도구들 설치

우린 앞으로 계속 yarn을 쓸 것이지만, expo도구만 NPM으로 설치할 것임

npm install -g expo-cli

- Expo를 설치하면 프로젝스 생성, 실행, 배포 할때도 쉽게쉽게 도움받을 수 있음

- Expo 가입

Expo서비스를 이용하려면 Expo에 가입해야함

https://expo.io/signup

- Expo 로그인

cmd창에서 아래의 방식으로 로그인

expo login --username "[가입할때 넣은 아이디]" ex) expo login --username "test"

- Expo 실행

Visual Studio Code를 실행해서 view > terminal 로 들어가면 명령어를 입력할 수 있는 터미널이 열림

expo init sparta-myhoneytip-gun

ㄴ 의미 : Expo라는 명령어로 sparta-myhoneytip-gun이라는 이름의 앱을 만들것이다.

ㄴ blank : 내용이 없는 도화지상태의 앱을 선택

생성된 결과화면

- expo start 하면 웹페이지가 뜸

QR 코드도 뜨며, 촬영하면 어플로 사용 가능

어플로 확인하려면 Expo어플 설치후 사용 가능

- assets 폴더 : 이미지 폴더

- node_modules 폴더 : 앱을 개발할때 사용할 도구들이 들어있는 폴더

- App.js : 실제 화면이 되는 파일이라고 보면 됌

ㄴ 화면을 나타내는 부분은 대부분 함수로 되어있음

- app.json : 간단하게 나중에 배포할 때 앱에 대한 설명서 같은 것

ㄴ 앱이름, 앱버전 등 작성되어있는 ..!

- 앱 개발 절차

1) Expo 명령어 설치

2) 로컬에 Expo 계정 세팅

3) expo init 명령어로 기본 앱 생성

4) expo start로 Expo 앱 실행

5) 휴대폰에 설치한 Expo 클라이언트 앱으로 Expo 앱 실행

728x90

반응형

from http://youten.tistory.com/100 by ccl(A) rewrite - 2021-12-29 20:27:02