확장프로그램 설치

주소창에 chrome://extensions 로 이동해서 '압축해제된 확장 프로그램을 로드합니다.' 클릭후 프로그램 제작 폴더를 선택하면 아래 이미지와 같이 설치가 된다.

그후 상단에 아이콘이 노출된다

오른쪽 마우스를 클릭하면 '팝업검사'를 눌러 디버깅을 할 수 있다.

webstorm 셋팅

Prefercences > Languages & Frameworks > Javascript > Libraries

Download > chrome 선택해서 다운받은 다음 '@types/chrome' 를 선택하면 자동완성기능을 사용할 수 있다.

로그인이 되어 있어야 브라우저에서 'Publish or republish project' 가 실행될때 문제가 없다

renderItem({item, index, separators})

data 데이터를 출력할 함수

data

<Array> 출력할 리스트 배열

ItemSeparatorComponent

renderItem 아이템 중간에 들어갈 수 있는 컴포넌트

ItemSeparatorComponent

아이템 사이에 들어가면 최상위 하위는 들어가지 않는다. renderItem 과 함께 연동해서 사용이 가능하다.

• separators.highlight
• separators.unhighlight
• separators.highlighted
• separators.updateProps

ListEmptyComponent

목록이 비었을때 랜더링 (컴포넌트)

ListFooterComponent ListFooterComponentStyle

리스트 맨아래 랜더링 (컴포넌트)

ListHeaderComponent ListHeaderComponentStyle

리스트 맨위에 랜더링 (컴포넌트)

columnWrapperStyle

리스트가 가로인 경우horizontal=true 에 사용 가능하다는데아무리 해봐도 무슨 기능인지 모름

extraData

목록을 다시 랜더링 하도록 알리기위한 마커

getItemLayout = {(data, index) => {length: 0, offset: 0, index: 0}}

 getItemLayout={(data, index) => (
    {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
  )}

높이 최적화

horizontal

가로로 랜더링함

initialNumToRender

초기 배치에서 랜더링할 항목 수

initialScrollIndex

첫번째가 아닌 시작 번호를 부터 랜더링을 한다.

inverted

출력방향 설정 기본(false) 위->아래, (true) 아래 -> 위

keyExtractor={(item, index) => string}

리액트 key 로 사용될 값

nymColumns

값(숫자) 만큼 가로로 출력하고 다음열로 넘어간다.

onEndReached

스크롤 위치가 onEndReachedThreshold 에 도착하면 한번 호출한다.

onEndReachedThreshold

onEndReached 콜백을 트리거 하기위한 값 목록의 중간은 0.5

onRefresh refreshing

사용하려면'refreshing' 값이 셋팅이 되야하며 refreshing={false} 로 셋팅하면 "Pull to Refresh" 가 작동된다.

onViewableItemsChanged viewabilityConfig viewabilityConfigCallbackPairs

viewabilityConfig 에따라 아이템의 가시성이 변경될때 호출

progressViewOffset

legacyImplementation

디버깅및 성능 비교

removeClippedSubviews

큰목록 성늘 향상 (컨텐츠 누락) 버그가 있을수 있음 위험 감수

• scrollToEnd([param]) : 컨텐츠 스크롤 끝으로 이동
• scrollToIndex(param) : 컨텐츠 스크롤 이동 (0: 앞, 0.5: 가운데, 1: 끝)
• scrollToItem(param) : 아이템으로 스크롤 이동
• scrollToOffset(param) : 스크롤할 오프셋
• recordInteraction() : 상호 작용 발생한 목록
• flashScrollIndicators() : 스크롤 표시기를 잠깐 표시함
• () : 기본 스크롤 응답기 핸들 제공
• getScrollableNode() :

param = {
  animated: true,
  index: 3,
  viewOffset: 2,
  viewPosition: 0.5
}

전체 해더 셋팅

Stack.Navigator 의 screenOptions 셋팅을 한다

<Stack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: '#f4511e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}
    > ...

부분 해더 셋팅

Stack.Screen 의 options 값을 셋팅한다.

<Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          title: 'My home',
          headerStyle: {
            backgroundColor: '#f4511e',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}
      />...

createAppContainer()

createAppContainer 은 네이티브의 back 액션을 당담한다.

onNavigationStateChange(prevState, newState, action)

네비게이션 (navigate) 상태가 변경될때마다 호출되는 함수

navigationOptions : Header

class Home extends React.component {
//static navigationOptios = ({navigation, navigationOptions, sceenProps}) => {
// 함수로 처리하면 navigation 을 이용해서 버튼에 커스텀 기능과 네비게이션 구현 가능
  static navigationOptios = {
    title: "dddd",
    headerStyle: {    // 스타일 적용
      backgroundColor: '#ff00ff',
    },
    headerTintColor: '#00ff00',
    headerTitleStyle: {
      backgroundColor: '#ff00ff',
    },
    header: ()=> <HeaderComponent/>, // 해더 전체 적용
    headerTitle: ()=> <HeaderTitle/>, // 해더 타이틀만 적용
    headerLeft: ()=> <HeaderLeft/>, // 해더 left만 적용
    headerRight: ()=> <HeaderRight/>, // 해더 right 만 적용
  }
}

Default navigationOptions setting

기본셋팅은 상위 stack 에서 관리한다.

const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      }
    }
  }
);

navigationOptions

• 네비게이션 바의 타이틀이나 색상을 변경한다.
• 네비게이션은 static 정적 데이터나 함수를 사용가능하고
• 함수의 경우 리턴값으로 {navigation, navigationOptions} 를 전달한다.

정적 데이터

// 클래스 형태라면 내부에
class HomeScreen extends React.Component { 
  static navigationOptions = {
    title: 'Details',
    navigationOptions: {
    }
  }
...
}
// 함수 형태라면
const HomeScreen = () => { ... }
HomeScreen.navigationOptions = {
  title: 'Details'
}

함수

// 클래스 형태라면 내부에
class HomeScreen extends React.Component { 
  static navigationOptions = ({navigation, navigationOptions, screenProps}) => {
    const { params } = navigation.state;
    return {
      title: 'Details',
      title: navigation.getParam('type') // 함수를 사용해서 가져올수도 있음
    }
}
// 함수 형태라면
const HomeScreen = () => { ... }
HomeScreen.navigationOptions = ({navigation, navigationOptions}) => {
  const { params } = navigation.state;
  return{
    title: 'Details'
  }
}

타이틀 스타일

class HomeScreen extends React.Component { 
static navigationOptions = {
    title: 'Detail',
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  };
...

// 전체에 default style 가능
const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    },
  }
);

커스텀 컴포넌트를 제목에 사용

const LogoTitle = () => {
  return (
    <View style={{ flex: 1, height: 30 }}>
      <Text>Logo</Text>
    </View>
  );
}

class HomeScreen extends React.Component {
  static navigationOptions = {
    // headerTitle instead of title
    headerTitle: () => <LogoTitle />,
  };

  /* render function, etc */
}

react-navigation

아래와 같이 세가지를 설치한다.

> npm install react-navigation
> expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-
safe-area-context @react-native-community/masked-view
> npm install react-navigation-stack @react-native-community/masked-view

기본 함수

기본적인 내비게이션 함수 props.navigation.push('화면이름') props.navigation.navigate('화면이름') props.navigation.goBack() props.navigation.popToTop()

props.navigation.dismiss() props.navigation.pop() props.navigation.replace() props.navigation.reset() props.navigation.setParams() props.navigation.getParams()

매개변수 전달

push, navigate('indexName', {params}) 두번째 인자로 변수를 전달한다.

매개변수 읽기

props.navigation.state.params
props.navigation.getParam('keyName', 'initValue')

만약 키에 해당하는 값이 없다면 initValue 값을 반환한다.

매개변수 셋팅

props.navigation.setParams({'key': 'value'})

setParams 는 setState 와 같은 재랜더링을 실행한다.

스택 셋팅

import { createAppContainer } from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack'

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);
const AppContainer = createAppContainer(RootStack);

유투브 동영상이 모바일 앱에서 문제가 되는 경우가 있다.

공유하기(share) 와 나중에보기(whatch-later)

해결방안 1

하나의 공유 주소를 사용하는 경우 https://www.youtube.com 주소를 youtube-nocookie 로 변경하는 방법

<iframe width="854" height="480" src="https://www.youtube-nocookie.com/embed/cPVgwz5aN1o" frameBorder="0" allowFullScreen />

해결방안 2

Iframe Player API 바로가기

https://www.youtube.com/iframe_api api 를 사용하는 경우 Player 함수의 'play' 셋팅에서 'host'를 변경하는 방법

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'M7lc1UVf-VE',
        wmode: 'transparent',
        host: 'https://www.youtube-nocookie.com', // 기본적으로는 값을 넣지 않는다.
        events: {
            'onReady': onPlayerReady
        }
    });
}

function onPlayerReady(event) {
    player.setPlaybackRate(2);
    event.target.playVideo();
}

해결방안 3

iframe embed 를 제어 하기 위해 css 를 이용 제어를 하고 오토플레이를 이용 제어 버튼을 만든다.

<div className="video-container">
  <div className="video-foreground">
    <div className="btn-stop-play">play</div>
    <iframe width="854" height="480" src="https://www.youtube.com/embed/cPVgwz5aN1o?autoplay=1" frameBorder="0" allowFullScreen />
  </div>
</div>

.video-container{
  position: absolute;
}
.video-container iframe {
  pointer-events: none;
}
.video-foreground{
  pointer-events:none;
}

style 외부 파일을 만들어서 사용하기

import { styleSheet } from 'react-native'
const styles = styleSheet.create({
  container: {
    backgroundColor: '#dddddd'
    ...
  }
})
const button = styleSheet.create({
  container: {
    backgroundColor: '#dddddd'
    ...
  }
})
export {styles, button}

기본 스타일을 정의해두고 병합해서 사용하기

import { styleSheet } from 'react-native'

const colors = {
  dark: 'black',
  light: 'white'
}
const baseContainerStyle = {
  flex: 1
}
const baseButtonsStyle = {
  width: 150
}

const lightStyle = styleSheet.create({
  container: {
    ...baseContainerStyle,
    color: colors.light
  },
  button: {
    ...baseButtonsStyle,
    color: colors.light
  }
})

const darkStyle = styleSheet.create({
  container: {
    ...baseContainerStyle,
    color: colors.dark
  },
  button: {
    ...baseButtonsStyle,
    color: colors.light
  }
})

default export getStyles = (theme) => {
  return theme === 'dark'? darkStyle : lightStyle
}

스타일은 중복에서 사용할수 있다

중복된 스타일의 경우 인라인코드가 우선이 된다.

...
<View style={[styles.box, {backgroundColor:'#ddd'}]}>...
...

Color Reference

페이스북 컬러 바로가기

View Style Props Reference

스타일 바로가기

메모제이션한 함수를 반환한다.

facebook: useCallback link

const [list, setlist] = useState([])
const count = useCallback(() => { setCount(list)}, list)

메모제이션한 값을 반환한다.

facebook: useMemo link 함수는 특정값이 변경된게 아니라면 다시 계산하지 않기 위한 hook 함수다 즉 이 함수를 통해 들어온 값들은 저장되었다가 랜더가 돌때 다시 비교해서 필요한 경우만 실행한다. 다시 한번 계산이 필요한지를 검증한 후 필요한 경우에만 함수를 실행 시킨다. shouldComponentUpdate() 함수와 비숫하지만 특정 값만을 지정한다.

const [list, setlist] = useState([])
const count = useMemo(() => { setCount(list)}, list)

useEffect()

const app = () => {
  useEffect(() => {
    console.log("update")
    return () => {
      console.log("clearUp")
    }
  }, [limitValue])
}

mount> "update" render > "cleanUp" > "update" unMount > "cleanUp" limitValue를 없으면 매번 실행 limitValue를 설정하면 해당값이 변경될때만 실행 limitValue를 [] 빈값으로 설정하면 한번만 실행

• ios에서는 네이티브 코드 뒤에서 위치하며 작은 크기는 연속적으로 저장하며 큰 데이터는 분산하여 저장합니다.
• 안드로이드에서는 락스디비 혹은 sqllite를 기반으로 하여 사용할 수 있습니다.
• error가 있으면 error를 반환하고 또는 Promise를 반환하기도 합니다.

바로가기 : facebook AsyncStore

특정 플랫폼별 규칙

• 하나만 사용한다면 이런식으로 운영체제 명을 뒤에 붙인다

  ---

파일 확장자로 플랫폼 선택하기 (naming convention)

• 플랫폼별로 구현한 파일을 두개를 만들고 동일한 폴더에 넣는다

Name.ios.js Name.android.js 파일

  import Name from './Name'

Platform 모듈 사용

• 플랫폼 구분을 위한 모듈 사용

  import {Platform, StyleSheet} from 'react-native'
  console.log(Platform.OS === 'ios')
  console.log(Platform.Version)
  ...
  const styles = StyleSheet.create({
  color: Platform.OS === 'ios'? '#ddd' : '#ccc'
  })

• width, height, margin, border, padding

flex

• 레이아웃 구성의 가중치를 말한다.
• 엘리먼트가 한개면 1 은 100%를 말하고 두개면 1은 50%를 말한다

flexDirection

-colum 세로 레이아웃을 말한다 -row 가로 레이아웃을 말한다

alignItems

-flex-start 상단으로 정렬이 된다. -center중간에 정렬이 된다. -flex-end 하단으로 정렬이 된다.

절대위치 지정

-position:'absolute' 일반적인 css 와 같다 -부모의 zIndex 가 우선이 된다 -position 이 없어도 zIndex 를 사용할 수 있다

일반적인 구조

• import 하여 사용하거나
• 부모가 props 로 넘겨줘서 사용한다.
• 공유 스타일은 외부에 폴더를 만들어 준다.

-js
 |- Component
    |- Button
       |- index.js
       |- styles.js
 |- Styles
    |- styles.js
    |- color.js
    |- font.js

inline으로 사용하기

<Text>
  dog is <Text style={{fontStyle:'italic'}}>Good</Text>
</Text>

오브젝트로 사용하기

const italic = {fontStyle: 'intalic'}
...
<Text>
  dog is <Text style={italic}>Good</Text>
</Text>

StyleSheet.create() 사용하기

const styles = StlyeSheet.create({
  italic: {fontStyle: 'intalic'}
})
...
<Text>
  dog is <Text style={styles.italic}>Good</Text>
</Text>

스타일 병합하기

-배열로 병합내용을 넣으며 인라인으로도 넣을 수 있다. -오른쪽의 객체의 스타일이 우선. -부적값이 있다면 (false, undefined, null) 무시된다.

const styles = StlyeSheet.create({
  button: {
    backgroundRadius: '8px',
    backgroundColor: '#99CCFF'
  },
  accentText: {
    fontSize: 18,
    fontWeight: 'bold'
  }
})
...
<Text>
  dog is <Text style={[styles.button, styles.accentText, {color: '#FFFFFF'}]}>Good</Text>
</Text>

조건적인 스타일일 사용하기

<Text>
  dog is <Text style={[styles.button, this.state.isMove && styles.accentText]}>Good</Text>
</Text>