리액트 네이티브 2/E 4주차 강의자료

리액트 네이티브 2/E
#1

로고

리액트 네이티트 2/E 4주차

코드종의 클래스

bg

지난 주 내용 다시 보기

:clock10: Just 10 min 지난 내용 질문

:telescope: 오늘 다룰 내용은?

  • 9장 디버깅과 개발자 도구
    • 디버깅 : JS, Native
    • 테스트 : Jest, Flow
  • 10장 대규모 애플리케이션의 내비게이션과 구조
    • react에서의 navigation

9장 디버깅과 개발자 도구

bg

:hugs: 잠깐 Tip

iOS 시뮬레이터와 안드로이드 에뮬레이터에서 유용한 단축키

내용 iOS 시뮬레이터 안드로이드 에뮬레이터
홈 버튼 cmd + h 동일
개발자 메뉴 cmd+d cmd + m
새로 고침 cmd + r r 두번 누르기

JS 디버깅 - Debug JS Remotly

  • 개발자 메뉴의 Debug JS Remotly 이용하여 크롬 개발자 도구에서 디버깅

  • Android 에뮬레이터의 경우 localhost는 컴퓨터(MacOS나 Windows)가 아닌 안드로이드 자신을 가리키므로 adb reverse 명령어를 이용하여 port를 연결해줘야 한다.

    adb reverse tcp:8081 tcp:8081

  • 크롬 개발자도구 유용한 단축키

    • cmd + o : 특정 파일 열기

:thinking: 어떻게 브라우저에서 폰의 코드를 디버깅 할 수 있을까?

  • JS실행은 크롬에서 <script>
  • 네이티브로 가야할 내용은 디버깅 세션(socket)으로 앱에 전달

로그의 종류 및 확인 방법

  • JS 로그
    • console.log / console.warn / console.error
    • Debug JS Remotly에서 확인
  • 네이티브 로그
    • react-native log-ios
    • react-native log-android

테스트 1. Flow (1/3)

FLOW IS A STATIC TYPE CHECKER FOR JAVASCRIPT.

테스트 1. Flow (2/3)

VS Code에서 Flow 설정법

  • Flow extension 설치
    • 이 익스텐션의 문서에 따라 @builtin Javascript Validation을 off
  • flow 경로 설정을 로컬의 ./bin/flow를 사용하도록 함: rn마다 호환되는 flow 버전이 다르기 때문
  • package.json에 정의된 flow 명령어를 사용하도록 옵션 설정
  • 해당 프로젝트에 호환되는 버전을 .flowconfig에서 확인 후 설치
    • yarn add flow-bin@0.78.0 --dev
  • VS Code 재실행

테스트 1. Flow (3/3)

동작 확인

  • 파일 맨 위에 //@flow주석이 있으면 동작

  • 기본 코드를 입력하여 오류가 발생하는지 확인

    function add(x:number, y:number):number{
  return x + y;
}

add(1, 'sss');

테스트 2. Jest (1/2)

테스트 2. Jest (2/2)

import React from 'react';
import App from './App';

import renderer from 'react-test-renderer';

test('renders correctly', () => {
  const tree = renderer.create(<App />).toJSON();
  expect(tree).toMatchSnapshot();
});

커뮤니티와 함께하시기를…

  • jsdev.kr
  • 리액트 코리아
  • 리액트 네이티브 한국 사용자 그룹

10장 대규모 애플리케이션의 내비게이션과 구조

bg

react-navigation

:martial_arts_uniform: react-native-navigation vs. react-navigation (1/2)

:gun: 한방에 모든게 해결되는 것은 없다.

  • 쉽게 세팅할 수 있는 것 : RN
  • 다른 네이티브 모듈과 충돌이 적은 것 : RN (Native를 사용하지 않기 때문에)
  • Expo로만 만들꺼라면 : RN
  • 기존 Native Nativation에 익숙하다면 : RNN
  • 진짜 네이티브를 UX를 제공하려면 : RNN
  • :thinking:… 그렇다면 무엇을 ???

:martial_arts_uniform: react-native-navigation vs. react-navigation (2/2)

:pray: 오늘은 여기까지 입니다.

무엇이든 물어보세요.
감사합니다.

좋아요 1