3. • JavaScript Engine
§ Web Browser
Ø V8 (Google Chrome)
Ø JavScriptCore (WebKit)
§ Server Side
Ø Node.js (V8 엔진)
• JSON (JavaScript Object Notation)
§ Number, String, Array, Object
§ 메타 정보 및 데이터 송수신 규약 포맷으로 주로 사용
• ES (ECMAScript)
§ ES6 (ECMAScript 2015)
JavaScript
4. • 기반 기술
§ Node.js
§ Npm
Ø 패키지 매니저
Ø node_modules/
§ Yarn
Ø Facebook 제작
Ø 프로젝트 규모가 커지면서 겪은 문제를 스스로 해결
§ Babel
Ø JavaScript 언어 호환성 해결
§ Polyfill
• React 의 새로운 개념
§ JSX
§ .
React
5. • 기반 기술
§ React
• Native Mobile 개발
§ iOS
Ø Xcode 프로젝트
Ø Objective-C
Ø Swift
Ø cocoapods
§ Android
Ø Android Studio
Ø Java 또는 Kotlin
React Native
Objective-C Java Language
7. • Hello World
§ console.log(”Hello, JavaScript”)
• 동적 타입
§ var a = 1;
§ a = new Date();
§ a = “Hello”;
• 멀티-패러다임 언어
§ 명령형 / 함수형 / 객체지향형
JavaScript
8. • Function 선언
§ function foo () { console.log(‘Foo’); }
• Class 선언 및 instancing
§ function Person(name) { this.name = name; }
§ new Person(‘Peter’);
§ class Person { constructor(name) { this.name = name; } } // ES6
Ø 클래스 타입이 function: typeof Person -> 'function'
• Prototype
§ function Person() {}
§ const person = Person();
§ person.hello(); // TypeError: person.hello is not a function
§ Person.prototype.hello = function () { console.log(‘Hello!’); }
§ person.hello(); // Hello
Function
9. • call
§ function foo() { console.log(‘foo’); }
§ foo.call(); // foo
§ function hello() { console.log(`Hello, ${this.name}`); }
§ function Person(name) { this.name = name; }
§ const person = new Person(‘TJ’);
§ hello(); // Hello, undefined
§ hello.call(person); // Hello, TJ
• apply
§ function hello(name) { console.log(`Hello, ${name}`); }
§ hello.apply(null, [‘TJ’]); // Hello, TJ
• bind
§ function hello() { console.log(`Hello, ${this.name}`); }
§ function Person(name) { this.name = name; }
§ const person = new Person(‘TJ’);
§ const helloPerson = hello.bind(person);
§ helloPerson(); // Hello, TJ
Dynamic scope - call & apply & bind
10. • Closure
§ function 을 리턴하는 function
§ Variable capturing 을 활용한 고정 scope 응용
Closure 활용예
function incr (startNum) {
... return function () {
..... startNum += 1;
..... return startNum;
..... }
... }
> const inc1 = incr(1);
> inc1()
2
> inc1()
3
> var num = 10;
> const inc2 = incr(num);
> inc2();
11
> inc2();
12
> num
10
11. • Module
§ 함수, 변수 따위의 집합
• Export
§ Object 또는 function, class 를 export 할 수 있음
Ø export { myFunction }
Ø export const foo = Math.sqrt(2);
Ø export default function() {}
Ø export default class {}
• Require
§ 외부 모듈 가져오기
Ø var calc = require(‘./Calc’) // Calc.js
Ø var utils = require(‘./utils’) // utils 폴더 내 index.js
§ 로컬 모듈과 코어 모듈
Ø 로컬 모듈은 경로 지정 (예: require(‘./Calc’))
Ø 코어 모듈은 이름만 지정 (예: require(‘react’))
v 패키지 매니저 등을 통해 설치된 모듈 (node_modules 에 설치된 모듈)
Module
App.js Calc.js
index.js
utils/
Root
other.js
12. • Import (ES6)
§ 외부 모듈 가져오기
Ø import calc from ‘./Calc’;
Ø let k; export default k = 12;
Ø import m from ‘./test’;
Ø console.log(m); // 12
Ø import React, { Component } from ‘react’;
v 아래와 동일
v var React = require(‘react’);
v var Component = React.Component;
Module
13. • 상수 타입
§ const
• Destructuring assignment
• Function shorthand (멤버 method)
JavaScript (ES6/7)
var { a } = myObj;
var { b, a } = myObj;
14. • Fat-arrow function
• Default parameters
• String interpolation
§ .
JavaScript (ES6/ES7)
!) 자동 binding (선언 시점의 scope)
!) ` (backquote) 사용
!) ${코드}
15. • Promise
§ 비동기 처리
Ø resolve
v 성공시 호출하며 then 에서 처리
Ø reject
v 실패시 호출하며 catch 에서 처리
§ 특징
Ø then 함수에서 Promise 를 리턴하면
Ø 연쇄 Promise 처리
JavaScript (ES6/ES7)
시간이 걸리는 작업
작업 완료 시 처리 코드
16. • 연쇄 Promise 예제
§ fetch API 를 이용한 HTTP Request 의 결과를 처리하는 코드
JavaScript (ES6/ES7)
json() 은 promise 를 리턴
json() 수행 성공시 호출
18. • React Native 환경 설치
§ brew install node
§ brew install watchman
§ npm install –g react-native-cli
• 프로젝트 만들기
§ react-native init HelloRN
• Metro 서버 실행
§ react-native start
• App 구동
§ react-native run-android
§ react-native run-ios
• Live Reload 기능
§ 개발자 메뉴
Ø 모바일 기기: 폰 흔들기
Ø iOS 에뮬레이터: Command + d
Ø Android 에뮬레이터: menu button (Command + m, Ctrl + m)
첫 프로젝트
27. • 패키지 추가
§ yarn add <패키지명>
§ react-native link <패키지명> 또는 수동 설정 (RN<0.60)
• Android 프로젝트 설정 (RN<0.60)
§ 프로젝트 의존성 추가
§ MainApplication.java 에 코드 추가
• Xcode 프로젝트 설정 (RN<0.60)
§ 프로젝트 의존 라이브러리 추가
§ 초기 코드 추가 필요할 수도 있음
3rd party 모듈
28. • AndroidX
§ AndroidX 라는 패키지로 renaming (Android SDK>=28)
Ø 예) com.android.* -> androix.*
§ Jetifier (RN < 0.60)
Ø AndroidX 이전 버전의 라이브러리들과 호환성 문제 해결
Ø 설치 및 구동
v npm install --dev jetifier
v npx jetify
3rd party 모듈
29. • Autolinking (RN>=0.60)
§ 자동 의존성 연결
Ø yarn add react-native-gesture-handler
Ø cd ios && pod install && cd ..
Ø cd react-native run-ios
Ø cd react-native run-android
3rd party 모듈
30. • react-navigation
§ 예제 코드
Ø https://github.com/bjtj/study-react-native/tree/master/NavigationExample
§ 설치
Ø yarn add react-navigation
Ø yarn add react-native-gesture-handler
Ø cd ios
Ø pod install
Ø cd ..
§ 실행
Ø react-native run-android
Ø react-native run-ios
Navigation
Home PlaceInfo
Search
Result
44. • 릴리즈 빌드
§ Edit scheme
§ Release 선택
§ 빌드
§ Archive
§ Organizer
iOS 프로젝트
45. • 배포 시 필요한 자원
§ 앱 아이콘
Ø 해상도별 아이콘 이미지
v 예) 안드로이드
v 예) iOS
§ 스크린샷
Ø 폰 및 태블릿
§ 설명
Ø 앱에 대한 설명
§ 기타 미디어 자료
Ø 마켓에 보여질 배경 이미지 및 동영상 등
§ 가격 정책
Ø 무료앱, 유료앱, 인앱결제, 광고
§ 개인정보처리방침
Ø 예) https://expo.io/privacy
앱 배포
