강의21 - kyagrd/htmlcss2018spring GitHub Wiki

실습 준비

  1. https://expo.io 가입
  2. Expo 앱을 자기 스마트폰(Andriod 또는 iOS) 에 설치
  3. NodeJS "현재 버전", "최신 기능"으로 다시 설치
    • Expo에서 LTS보다는 현재버전/최신기능 설치를 권장하고 있기 때문
  4. https://expo.io/learn 내용을 따라 명령줄 도구(exp)와 그래픽 환경(XDE)을 설치

실습 계획

이미 모바일 개발에 익숙한 개발자들은 에뮬레이터를 설치하여 명령줄 도구나 그래픽 환경에서 에뮬레이터를 호출하여 사용한다. 개발 컴퓨터가 에뮬레이텨와 node를 동시에 돌릴 수 있을만한 성능이 충분히 될 경우 네트워크 전송 딜레이가 없어 코드 변경시 더욱 신속하게 테스트하는 앱 화면에 반영된다. 하지만 우리는 지금 모바일 개발에 익숙하지 않으니 에뮬레이터가 아닌 그냥 스마트폰 Expo 앱을 통해 테스트하기로 하자.

강의자도 지금 강의 준비를 하면서 거의 처음 이 Expo 툴을 사용해 보고 있어 초보자의 입장에서 시행착오를 겪으면서 웹에서 제공하는 Snack이라고 이름이 붙은 기능을 활용하는 방법으로 접근하고자 한다. 지난 강의시간에 보여준 웹상에서 코드를 드래그 앤 드롭 등으로 수정하면 테스트 화면이 바로 변하는 것을 살펴본 것이 Snack 이다.

exp init <프로젝트이름> 으로 초기화할 때 크게 두 가지 옵션이 있다. 첫째는 가장 기본적인 blank이고 둘째는 tab이 여러 개 있는 프로젝트를 시작한다. 보통은 아무리 작은 앱이라도 앱/개발자 정보라도 나오는 탭이 있기 때문에 tab을 많이 쓸 것이다. 로컬에서 개발할 때는 웹에서 Snack처럼 드래그 앤 드롭을 지원하진 않으므로 하나의 탭 즉 하나의 스크린 화면을 Snack으로 끄적끄적 디자인해서 탭이 있는 프로젝트에 옮겨넣고 또 다음 탭의 화면 스크린을 Snack으로 끄적끄적해서 프로젝트에 옮겨넣고 하는 방식으로 하는 것도 괜찮은 방법인 것 같다.

과제

이 과제를 하기 전에 React에 대해 실습한 내용을 복습해보는 것도 좋다.

여기서부터 시작해서 네모칸을 클릭하면 O와 X를 번갈아 놓는 앱으로 완성하라. 누가 이기는지 검사는 할 필요 없고, 빈칸에만 놓을 수 있도록.

요 snack에서부터 시작해서 변경. https://snack.expo.io/@kyagrd/hello2

  • 제출기한 6월12일 밤9시까지 조교 이메일로 Snack 주소 제출
⚠️ **GitHub.com Fallback** ⚠️