# JavaScript 환경

React, React Native는 기본적으로 최신 ECMAScript(JavaScript 표준)를 사용합니다. React 개발에 앞서 최신 ECMAScript를 학습해야 합니다. React Native의 JavaScript 환경 문서를 참고하면 앱 개발에 사용되는 최신 JavaScript(ES) 기능을 확인할 수 있습니다.

# JavaScript 런타임

React Native를 사용할 때 2가지 환경에서 JavaScript 코드가 실행됩니다.

• 대부분은 Safari에서 구동하는 JavaScript 엔진인 JavaScriptCore를 사용합니다. iOS에서 JavaScriptCore는 iOS 앱에 쓰기 가능한 실행 가능 메모리가 없어 JIT를 사용하지 않습니다.
• Chrome 디버깅을 사용하면 모든 JavaScript 코드가 Chrome 내에서 실행되어 웹 소켓을 통해 기본 코드와 통신합니다. Chrome은 V8을 JavaScript 엔진으로 사용합니다.

# JavaScript 트랜스포머

React Native는 최신 JavaScript 문법을 바로 사용할 수 있도록 내부적으로 Babel 컴파일러를 사용합니다. Babel을 사용해 변환 가능한 목록은 Transform Plugins 문서를 참고해보세요.

# ECMAScript 강의

React Native 개발에 앞서 모던 JavaScript 가이드북을 통해 최신 JavaScript에 대해 학습합니다. 오늘 날 JavaScript 프레임 워크는 최신 버전의 JavaScript 프로그래밍을 사용하므로 ES6는 꼭 필요한 선수 학습입니다.

← ES6를 잘 몰라 전체적으로 이해하기 어려웠다는 의견

# ES6

• 블록 영역 (let, const)
• 템플릿 리터럴(또는 스트링) (let tech = 'React Native'; `안녕! ${ tech }`)
• 화살표 함수와 this (() => { —— })
• 전개(spread) 문법 (todos = [newTodo, ...this.todos])
• 기본 매개변수 ((state={}) => { —— })
• 나머지 매개변수 ((style, ...args) => { —— })
• 클래스 문법 (class Calendar extends React.Component { —— }) | class, class 식
• 구조 분해 할당 (const { isActive, style } = this.props)
• for...of (이터레이터) (for(let item of iterator) { —— })
• 모듈 (import { View, Text } from 'react-native') | import, export
• 계산된 속성 (let key = 'unigue'; const o = {[key]: 90123})
• 향상된 객체 표기법 (cont o = { props, method() { —— } })

# ES8

• 후행 쉼표 ((a, b, c, ) => { —— })
• 비동기 함수 (async () => { await doAsync() })

# Stage 3

- 객체 전개 연산자 (const extended_o = { ...o, visible: true })

# Stage 1

• 체이닝 옵션 (let name = o.user?.name)

# React 전용

• JSX (<View style={styles.container}> </View>)
• Flow (const square = (n: number): number => n * n) → TypeScript로 대체할 수 있음.

# JavaScript 폴리필

지원되는 모든 JavaScript 런타임에서 많은 표준 기능을 사용할 수 있습니다.

# Browser

• Console API
• CommonJS Require
• Fetch API
• Timers API
• Geolocation API

# ES6

• Object.assign
• String.prototype. { startsWith, endsWith, repeat, includes }
• Array.from
• Array.prototype. { find, findIndex }

# ES7

• Array.prototype. { includes }

# ES8

• Object. { entries, values }

# 특수(Specific)

• __DEV__