Jun, Log

안녕하세요.

무료 SQL툴을 추천드리도록 하겠습니다. 더불어 AWS RDS(오라클)을 디비버와 연결하여 접속을 하도록 하겠습니다.

추천드리는 툴은 디비버(dbeaver)라는 SQL 툴입니다.

기존에는 sql developer 툴을 사용했었습니다. 조금 더 가벼운 툴을 사용해보고 싶어 설치를 하고 사용해봤는데, 앨리어스라던지 내비게이션이라던지 너무 편리했습니다. 또한 기존에 sql developer에서 사용하던 실행계획도 디비버에서 사용할 수 있습니다.

실제로 디비버는 오라클뿐만 아니라 MySQL, PostgrSql 등 수많은 디비를 지원합니다.

그럼 다운로드 및 설치를 진행하도록 하겠습니다.

1. 디비버(dbeaver)다운로드 및 설치

https://dbeaver.io/

사이트로 들어가셔서 다운로드 버튼을 눌러주세요.

다운로드 버튼을 눌러주시면 다음과 같은 화면이 보입니다.

OS에 맞게끔 Community Edition 버전으로 다운로드를 받아주세요.

다운로드 후 설치를 진행해주시면 되겠습니다 :)

설치를 하다 보면 언어 선택 화면이 2번 나오는 걸 봤는데 디폴트로 쭉 설치를 해주시면 됩니다.

2. AWS 오라클(RDS) 연결

디비버 툴을 열어주세요.

왼쪽에 콘센트를 누르신 다음에 오라클을 선택해주시면 되겠습니다.

다음으로 접속을 위한 접속창이 열립니다.

이제는 AWS로 접속을 하신 다음에 RDS 창으로 들어가 주세요.

(RDS까지 생성을 하셨다고 가정하겠습니다.)

HOST: 엔드포인트

Database: ORCL (SID 선택)(디폴트 값)

User name: RDS 만들 때의 마스터 사용자 이름

User name: RDS 만들 때의 마스터 암호

위의 정보대로 값을 제대로 입력해주세요. 확인을 눌러주시면 다음과 같은 창이 열립니다.

오라클 접속을 하기 위해서 필요로 하는 jar 파일입니다.

우리의 오라클 버전은 11이기에 Driver files를 Oracle files 버전을 11로 선택을 해주세요.

1. Open Download Page 버튼을 누르시면 오라클 홈페이지가 열립니다.

xdb6.jar / orai18n.jar /ojdbc6.jar를 모두 다운로드를 해주세요.

(다운로드는 무료이나 오라클 회원가입을 해주셔야 됩니다.)

2. Add JARs 버튼을 눌러주세요.

AddFile 버튼을 눌러 다운로드한 파일을 추가해주시면 되겠습니다.

그럼 디비버 sql 툴에서는 AWS RDS로 접속을 하실 준비가 되셨습니다.

혹시나 AWS에서 디비가 안 열린다면 크게는 2가지가 이유가 있습니다.

하나는 액세스 가능성 여부 문제입니다.

RDS 접속 후 인스턴스에 들어가 주세요. 그리고 왼쪽에 수정이라는 버튼이 보입니다.

수정 버튼을 눌러서 들어가셔서 아래 내려가시면 퍼블릭 액세스 가능성 여부를 예로 변경해주세요.

예로 변경을 해주시고 꼭 저장을 해주세요.

두 번째는 인바운드가 열리지 않아서 그렇습니다. 인바운드를 열어주셔야 됩니다.

데이터베이스(수정 버튼이 존재하는) 페이지 아래로 쭉 내려와 주세요.

위의 표시된 인바운드로 클릭해서 들어가 주세요.

페이지가 바뀌고 또 아래로 내려와 주시면 인바운드-편집 버튼이 보입니다.

편집창으로 들어오시면 규칙을 아래와 같이 추가를 해주세요.

아래 규칙은 오라클-RDS를 "위치와 무관하게 모든 접속을 허용하겠다"입니다.

(테스트 시에만 사용하지 상용에서는 이렇게 사용하지 않습니다. 사용에 주의해주세요.)

인바운드까지 열어주셨으면 이상없이 아마존 웹서버 RDS에 접속이 되시겠습니다.

디비버 툴을 사용하셔서 조금 더 나은 개발을 하셨으면 좋겠습니다.

감사합니다 ^^

리액트 네이티브에 대한 기초는 어느 정도 학습이 되어 갑니다.

이번 시간에는 화면을 쭉 내릴 수 있는 스크롤 뷰와 리스트 항목을 표현할 수 있는 리스트 뷰를 살펴보도록 하겠습니다.

ScrollView

이전에는 레이아웃을 스크린에 표현을 했었습니다. 스크린에 넘쳤을 때 스크롤이 안되었는데 ScrollView를 사용하면 화면 스크롤을 하실 수 있습니다.

import React, { Component } from 'react';
import { ScrollView, Image, Text } from 'react-native';

export default class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
  render() {
      return (
        <ScrollView>
          <Text style={{fontSize:90}}>Scroll me plz</Text>
          <Image source={{uri: "https://reactnative.dev/img/tiny_logo.png", width: 64, height: 64}} />
          <Image source={{uri: "https://reactnative.dev/img/tiny_logo.png", width: 64, height: 64}} />
          <Text style={{fontSize:90}}>If you like</Text>
          <Image source={{uri: "https://reactnative.dev/img/tiny_logo.png", width: 64, height: 64}} />
          <Image source={{uri: "https://reactnative.dev/img/tiny_logo.png", width: 64, height: 64}} />
          <Text style={{fontSize:90}}>Scrolling down</Text>
          <Image source={{uri: "https://reactnative.dev/img/tiny_logo.png", width: 64, height: 64}} />
          <Image source={{uri: "https://reactnative.dev/img/tiny_logo.png", width: 64, height: 64}} />
          <Text style={{fontSize:80}}>What's the best</Text>
          <Image source={{uri: "https://reactnative.dev/img/tiny_logo.png", width: 64, height: 64}} />
          <Image source={{uri: "https://reactnative.dev/img/tiny_logo.png", width: 64, height: 64}} />
        </ScrollView>
    );
  }
}

지금까지 봐 뒀던 View를 사용한 것이 아닌 ScrollView를 사용했습니다. 이제부터는 화면의 스크롤을 사용하실 수 있습니다.

하지만 주의하실 점은 스크롤 뷰 안에 너무 많은 데이터가 있으면 안 됩니다. 한 번에 렌더가 되기 때문에 자칫 속도가 느려질 가능성이 있습니다. 이점에 주의하셔서 사용해주시기 바랍니다.

스크롤뷰 관련한 prop은 문서 주소를 작성해 놓도록 하겠습니다.

http://reactnative.dev/docs/scrollview

조금 더 필요하신 내용은 문서를 읽고 prop를 이것저것 사용해보고 기능들을 활용하시면 되겠습니다.

ListView

리액트 네이티브에서는 리스트를 표현할 수 있는 코어 컴포넌트를 제공합니다.

FlatList와 SectionList인데요. 한번 살펴보도록 하겠습니다.

FlatList

FlatList는 2개의 컴포넌트를 필요로 합니다. data와 renderItem인데요. data에는 리스트 데이터가 담겨 있고 renderItem은 하나의 item을 갖고 와서 render 시켜줍니다. 어떻게 사용이 되는지 코드를 보도록 하겠습니다.

import React, { Component } from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';

export default class FlatListBasics extends Component {
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={[
            {key: 'Devin'},
            {key: 'Dan'},
            {key: 'Dominic'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 0.3,
   paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

FlatList가 사용되었습니다. data prop와 renderItem이 사용이 되었는데요. 위에서 설명드린 그대로입니다.

data에는 리스트에 렌더가 될 데이터가 담겨 있고 renderItem을 사용해서 아이템들을 화면에 뿌려줍니다.

SectionList

flatList는 리스트만 화면에 렌더가 되었는데 구분할 수 있는 섹션도 갖고 싶습니다.

그렇다면 SectionList를 사용하시면 됩니다.

import React, { Component } from 'react';
import { SectionList, StyleSheet, Text, View } from 'react-native';

export default class SectionListBasics extends Component {
  render() {
    return (
      <View style={styles.container}>
        <SectionList
          sections={[
            {title: 'D', data: ['Devin', 'Dan', 'Dominic']},
            {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
          renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
          keyExtractor={(item, index) => index}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  sectionHeader: {
    paddingTop: 2,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 2,
    fontSize: 14,
    fontWeight: 'bold',
    backgroundColor: 'rgba(247,247,247,1.0)',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

데이터를 담기 위해서 section prop가 사용되었고 renderItem은 동일합니다. 그리고 섹션을 구분할 수 있는 헤더는 renderSectionHeader prop가 사용되었습니다.

리액트 네이티브 강좌를 쭉 보신 분이라면 코드도 어느 정도 익숙해지시고 있고 위의 내용들도 문서를 보고 직접 시도를 해보실 수 있으시리라고 생각이 됩니다 :)

그렇지 않아도 괜찮습니다. 계속 연습을 해보시면 됩니다 ^^

위의 코드들을 보면서 코드에서 사용된 컴포넌트를 검색해보세요.

http://reactnative.dev/docs/sectionlist

이렇게 말이죠. 그럼 문서를 열어 보고 샘플 코드의 prop는 문서에 어떻게 설명이 되어 있는지 보는 겁니다.

그리고 다른 prop도 어떤 게 있나 살펴보고 우리의 코드에 적용을 해보시는 거예요. 그러다가 보면 왼쪽에 다른 컴포넌트들도 눈에 보이실 겁니다. 들어가서 한 번씩 사용해보고 컴포넌트들을 눈여겨보시면 됩니다.

우리는 이 많은걸 암기할 수 없습니다.

그렇기 때문에 눈여겨보셨던 걸 필요하실 때 떠올리고 문서를 보고 사용을 하시면 되겠습니다.

오늘은 이것으로 마치도록 하겠습니다.

감사합니다 ^^

이전 시간에는 레이아웃을 어떻게 만드는지에 대해서 학습했습니다.

이번 시간에는 사용자가 값을 입력했을 때 데이터를 어떻게 처리하는지에 대해서 살펴보도록 하겠습니다.

즉, 사용자 행동에 따른 이벤트 처리를 학습합니다.

Handling Text Input

흔히 유저가 입력을 위해서 많이 사용하는 것이 텍스트 화면입니다.

리액트 네이티브에서는 사용자가 텍스트를 입력하는 걸 TextInput 컴포넌트를 이용합니다.

이중에 onChangeText라는 prop가 있습니다. 이 prop는 입력된 텍스트가 변할 때마다 호출되는 prop입니다.

onChangeText를 어떻게 사용되는지 예제 코드를 보도록 하겠습니다.

import React, { Component } from 'react';
import { Text, TextInput, View } from 'react-native';

export default class PizzaTranslator extends Component {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

  render() {
    return (
      <View style={{top:30, padding: 10}}>
        <TextInput
          style={{height: 40}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
          value={this.state.text}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
        </Text>
      </View>
    );
  }
}

TextInput 컴포넌트를 사용해서 사용자가 텍스를 입력할 수 있도록 입력창을 만들었습니다.

onChangeText가 사용되었는데요. 입력값이 변경될 때마다 호출이 됩니다. text가 this.setState(text)를 통해서 state가 변경이 되는데요.

state 값이 변경되면 어떻게 된다고 했었죠? 앞, 앞 강의에서 설명드렸다시피 컴포넌트가 다시 렌더가 됩니다.

입력창 아래 보면 Text 컴포넌트가 있습니다. state 변경될 때(사용자가 글을 작성할 때)마다 띄어쓰기 구분에 따라서 피자 모양을 화면에 보여줍니다 :)

텍스트가 제출 되어질 때는 onSubmitEditing prop를 하시면 됩니다. 조금 더 상세한 예시는 다음 url을 첨부 하도록 하겠습니다.

https://reactjs.org/docs/forms.html#controlled-components

http://reactnative.dev/docs/textinput

Handling Touches

모바일 환경에서는 사용자와 주 상호작용 행동은 바로 터치입니다. 사용자는 버튼 터치, 리스트 스크롤, 확대 와 같은 다양한 제스쳐를 행동합니다. 가장 기본적이고 가장 많이 사용하는 터치에 대해서 학습을 하도록 하겠습니다.

import React, { Component } from 'react';
import { Button, StyleSheet, View } from 'react-native';

export default class ButtonBasics extends Component {
  _onPressButton() {
    alert('You tapped the button!')
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
          <Button
            onPress={this._onPressButton}
            title="Press Me"
          />
        </View>
        <View style={styles.buttonContainer}>
          <Button
            onPress={this._onPressButton}
            title="Press Me"
            color="#841584"
          />
        </View>
        <View style={styles.alternativeLayoutButtonContainer}>
          <Button
            onPress={this._onPressButton}
            title="This looks great!"
          />
          <Button
            onPress={this._onPressButton}
            title="OK!"
            color="#841584"
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 0.5,
   justifyContent: 'center',
  },
  buttonContainer: {
    margin: 20
  },
  alternativeLayoutButtonContainer: {
    margin: 20,
    flexDirection: 'row',
    justifyContent: 'space-between'
  }
});

Button을 4개 만들었습니다. Button에는 onPress가 있습니다. 버튼이 눌릴 때마다 onPress에 등록된 함수가 호출이 되어집니다. 등록된 함수는 alert() 창을 띄어줍니다.  크게 어려운게 없는 듯 합니다.

앞쪽에 학습한 내용들로인해서 코드를 계속 보실 수록 조금 더 리액트 네이티브와 익숙해지고 있습니다. StyledSheet.create()도 계속 봐오던 코드고 레이아웃 작성 코드도 이전 파트에서 학습했던 내용입니다. 조금씩 조금씩 성장하고 있습니다 :)

Touchable - 조금 더 다양한 Button 동작

위에서는 기본적인 버튼을 만들었습니다. 개발을 하실 때 위의 버튼으로도 충분하나 개발을 하시다 보면 욕심이 생기고 기능이 필요로 하게 됩니다. 버튼이 눌렸을 때 색이 변한다거나 조금 더 나은 모습을 보고 싶습니다.

그렇다면 다음과 같은 컴포넌트들이 있습니다.

TouchableHighlight / TouchableOpacity / TouchableNativeFeedback / TouchableWithoutFeedback

위의 컴포넌트들을 사용한 예제 코드를 보고 컴포넌트들에 대해서 간략히 설명을 드리겠습니다.

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, View } from 'react-native';

export default class Touchables extends Component {
  _onPressButton() {
    alert('You tapped the button!')
  }

  _onLongPressButton() {
    alert('You long-pressed the button!')
  }


  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight onPress={this._onPressButton} underlayColor="white">
          <View style={styles.button}>
            <Text style={styles.buttonText}>TouchableHighlight</Text>
          </View>
        </TouchableHighlight>
        <TouchableOpacity onPress={this._onPressButton}>
          <View style={styles.button}>
            <Text style={styles.buttonText}>TouchableOpacity</Text>
          </View>
        </TouchableOpacity>
        <TouchableNativeFeedback
            onPress={this._onPressButton}
            background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}>
          <View style={styles.button}>
            <Text style={styles.buttonText}>TouchableNativeFeedback {Platform.OS !== 'android' ? '(Android only)' : ''}</Text>
          </View>
        </TouchableNativeFeedback>
        <TouchableWithoutFeedback
            onPress={this._onPressButton}
            >ㅌ
          <View style={styles.button}>
            <Text style={styles.buttonText}>TouchableWithoutFeedback</Text>
          </View>
        </TouchableWithoutFeedback>
        <TouchableHighlight onPress={this._onPressButton} onLongPress={this._onLongPressButton} underlayColor="white">
          <View style={styles.button}>
            <Text style={styles.buttonText}>Touchable with Long Press</Text>
          </View>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 60,
    alignItems: 'center'
  },
  button: {
    marginBottom: 30,
    width: 260,
    alignItems: 'center',
    backgroundColor: '#2196F3'
  },
  buttonText: {
    textAlign: 'center',
    padding: 20,
    color: 'white'
  }
});

Button 컴포넌트 대신 4가지 컴포넌트들이 사용 됐습니다.

TouchableHighlight : 터치가 되었을 때 색을 어둡게 하거나 underlayColor prop를 활용하여 특정 색을 활성화 시킵니다.

TouchableOpacity : 사용자가 터치 했을 때 버튼을 불투명하게 합니다.

TouchableNativeFeedback : 터치 했을 때 잔물결이 일어납니다. 이런 잔물결을 사용자에게 피드백을 준다는 뜻으로 사용이됩니다.

TouchableWithoutFeedback : 터치 했을 때 잔물결이 일어나지 않습니다.

마지막 버튼에서는 "onLongPress" prop가 사용되었습니다. 짧게 눌리면 일반적인 "onPress" prop가 호출되고 길게 눌리면 "onLongPress"가 호출됩니다.

버튼보다 조금 더 고급화된 컴포넌트들을 설명 드렸습니다. 일단은 쓱 한번 봐주시고 개발하실 때 Button 컴포넌트들을 사용하시다가 필요로 할 때 사용해주셔도 되겠습니다.

감사합니다 :)

저번 시간에는 flexbox를 사용해보고 무엇인지 알아봤습니다. 모바일 스크린 크기가 달라도 일관성을 유지하기 위해서 flexbox를 사용하는데요. flexbox는 리액트 네이티브에서 레이아웃(UI)을 만드는데 너무나도 중요한 요소입니다. flexbox를 조금 더 잘 사용하기 위해서 조금 더 자세히 학습을 하도록 하겠습니다.

(리액트 네이티브에서 사용하는 flexbox는 web에 사용하는 flexbox와 개념은 동일합니다.)

다시 한번 flex 개념을 리마인드하고 가겠습니다.

flex는 메인 축을 기점으로 스크린에 어떻게 아이템들을 배열하고 채워 넣을지 설정합니다. flex 값의 따라서 공간이 나눠집니다.

각각의 설정은 이렇습니다 -> 노랑(flex: 1) / 하늘(flex: 2) / 초록(flex: 3)

비율이 1:2:3이 되는데요. 총합은 6이고 설정된 값만큼 면적의 크기가 1/6, 2/6, 3/6 이 됩니다.

비율을 더해보면 노랑과 하늘을 더하면 초록과 사이즈가 같은 걸 알 수 있습니다 ->노랑+하늘 = 초록

스크린 사이즈와 상관없이 면적이 상대적으로 결정이 돼요. flex에서 대해서 개념적인 부분은 이해가 되셨겠죠.

이제는 flex 기능들을 하나씩 하나씩 살펴보도록 하겠습니다.

flexDirection

위의 설명에서는 UI 방향이 열(세로) 방향으로 층층이 쌓여 있습니다.

flexDirection 값을 주시면 열(세로)(column) 방향, 행(가로)(row) 방향으로 설정하실 수 있어요. 본격적으로 학습하기 전 한 가지만 더 추가적으로 말씀드릴게요. flex 설정은 부모에 설정을 하시면 자식에 적용이 됩니다. 이점에 주의 해주세요.

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';

export default class FlexDirectionBasics extends Component {
  render() {
    return (
      <View>
        <View style={{height: 150, flexDirection: 'column', top: 10}}>
          <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
          <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
          <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
        </View>
        <View style={{height: 70, flexDirection: 'row', top: 20}}>
          <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
          <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
          <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
        </View>
        <View style={{height: 70, flexDirection: 'row-reverse', top: 10}}>
          <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
          <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
          <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
        </View>
      </View>
    );
  }
};

스타일 부분은 StyleSheet.create()을 사용하면 반복적인 부분과 코드를 더 깔끔하게 처리할 수 있습니다. 코드 길이가 길어져 편의상 스타일을 바로 적용했습니다. StyleSheet.create()은 이전 글을 참고해주세요 :)

첫 번째는 flexDirection이 column으로 설정했습니다. 세로 방향으로 설정이 되었는데요. flexDirection을 설정하지 않으면 디폴트 값이 column입니다.

두 번째는 row로 설정했습니다. 컴포넌트들이 가로방향으로 설정이 됩니다.

세 번째는 row-reverse가 있습니다. row-reverse는 가로 row(가로) 방향으로 뒤집어 놓은 모습입니다.

row-reverse가 있으니 column-reverse도 있겠죠? 한 번씩 실습을 하고 익혀주세요. 컴포넌트 방향은 flrex Direction으로 설정을 해주시면 되겠습니다 :)

Layout Direction

자식 컴포넌트의 방향을 명시했습니다. 이 방향을 기반으로 레이아웃이 어떤 위치에 어떤 간격으로 배치가 되는지 살펴보겠습니다.

리액트 네이티브의 레이아웃의 시작점과 끝점이 있을 때 LRT이 기본입니다. 즉, 시작점이 왼쪽에서 끝점이 오른쪽으로 가는 방향입니다.

- Justify Content

Justify Content는 컨테이너의 메인 축을 기준으로 자식 컴포넌트들이 어떻게 정렬이 될지 결정합니다.

메인 축에 대해서 설명을 드리자면 종이접기를 떠올려 봅니다.

flexDirection이 디폴트로 row(가로) 방향으로 설정이 되어 있을 때, 가로를 반으로 접는다고 생각해주세요.

가로의 중심이 메인 축이 됩니다.

flexDirection이 디폴트로 column(세로) 방향으로 설정이 되어 있을 때, 세로를 반으로 접는다고 생각해주세요.

세로의 중심이 메인 축입니다.

메인 축을 기점으로 자식 컴포넌트들이 flexDirection 방향으로 어디서 시작되고 끝나는 위치를 동적으로 결정해준답니다 :)

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';

export default class JustifyContentBasics extends Component {
  render() {
    return (
      <View style={{
        height: 200,
        top: 30,
        flexDirection: 'row',
        justifyContent: 'space-between',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

justifyContent 옵션은 위의 코드와 같이 주시면 됩니다. 

자주 사용하는 옵션 종류는 다음과 같습니다 => flex-start / flex-end / center / space-between / space-around

flexDirection은 row(가로) 방향, 그럼 메인 축을 기점으로 가로(flexDirection) 방향으로 자식 컴포넌트들이 어떻게 배치되는지 봐주세요.

flex-start: 디폴트 값입니다. 메인 축 기준으로 시작점에 위치합니다.

center: 메인축 기준으로 중심에 위치합니다.

space-between: 자식 컴포넌트를 균등하게 배치합니다. 시작점과 끝 양쪽에 공간이 없는 모습입니다.

space-around: 자식 컴포넌트를 균등하게 배치합니다. 시작점과 끝 양쪽 공간에도 공간이 포함되어 있습니다.

flexDirection 옵션을 column방향 예시는 하나만 보여드렸습니다.

flexDirection 옵션을 column방향으로도 변경하셔서 변경되는 위치들을 봐주세요 :)

아래는 justifyContent값을 'space-between' 값으로 부여했습니다.

- Align Items

Align Items은 Justify Content와 반대  개념입니다. 이때 축을 메인 축이라 하지 않고 교차(Cross) 축이라 불립니다.

교차(Cross) 축을 기점으로 자식 컴포넌트들이 flexDirection 반대방향으로 어디서 시작되고 끝나는 위치를 동적으로 결정해준답니다 :)

코드와 옵션의 따른 예시들을 보도록 하겠습니다.

옵션들은 다음과 같이 있습니다. stretch(디폴트) / flex-start / flex-end / center / basline

import React, { Component } from 'react';
import { View } from 'react-native';

export default class AlignItemsBasics extends Component {
  render() {
    return (
      <View style={{
        flex: 0.5,
        top: 30,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'stretch',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

justifyContent 값을 center로 부여했습니다. 메인 축 기준으로 자식 view 컴포넌트들이 중앙에 모여있겠죠?

그럼 alignItems 옵션에 따라서 어떻게 레이아웃이 변경되는지 확인하겠습니다.

stretch: 컨테이너의 교차 축의 높이부터 교차축 길이만큼 차지합니다. (아래에서 다시 설명드립니다)

flex-start:  컨테이너의 교차축 시작점에서부터 위치합니다.

flex-end: 컨테이너의 교차축 마지막에서부터 위치합니다.

center: 컨테이너의 교차축 중심에 위치합니다.

stretch와 flex-start 부분이 비슷해 보입니다. 다음 예시를 보고 차이점을 확인하겠습니다.

import React, { Component } from 'react';
import { View } from 'react-native';

export default class AlignItemsBasics extends Component {
  render() {
    return (
      <View style={{
        flex: 1,
        top: 30,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'stretch',
      }}>
        <View style={{height: 70, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

첫 번째 자식 view의 width를 제거했습니다. 그리고 flexDirection 방향을 column으로 줬기 때문에 박스들이 세로로 줄을습니다.

첫 번째 자식 view에는 widht 값이 없음에도 불구하고 stretch 상태를 주게 되면 너비는 교차축 길이만큼(현재 가로) 만큼 갖게 됩니다. 하지만 flex-start 상태는 너비가 없기 때문에 아예 박스가 보이지 않습니다.

이렇게 stretch는 widht나 height 값이 없어도 교차축 길이만큼 전체를 할당받게 됩니다.

Align Self

지금까지는 부모 컨테이너에 flexBox옵션을 주어서 자식 컨테이너를 컨트롤했습니다. 자식 컨테이너에 alignSelf 옵션을 사용하면 자식 컨테이너만 별도로 컨트롤을 할 수 있습니다. alignSelf는 alignItems과 동일하나 부모에 부여하나 자식에 부여하는지에 대한 차이점이 있습니다. 그렇기에 값도 alignItems와 동일합니다.

import React, { Component } from 'react';
import { View } from 'react-native';

export default class AlignItemsBasics extends Component {
  render() {
    return (
      <View style={{
        flex: 0.2,
        top: 30,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'stretch',
      }}>
        <View style={{width: 50, height: 50, alignSelf:'flex-end', backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

첫 번째 자식 view에 alignSelf 옵션으로 flex-end 값을 부여했습니다. 그렇다면 첫번째 자식만 flex-end의 따라서 아래쪽에 위치하겠습니다.

Flex Wrap

마지막으로 옵션을 하나 더 말씀드립니다. flex wrap 옵션이 있습니다. flexWrap옵션은 담을 수 있는 컨테이너를 보장해주는데요. flexWrap 옵션이 nowrap인 경우에는 넘쳐도 넘치는 데로 놔둡니다. 하지만 wrap 옵션을 주면 컨테이너 크기 내에서 자동으로 정렬을 해줍니다. 이후에 레이아웃을 만드시면서, 컨테이너 내에서 자식 컨테이너가 넘치는 경우에 넘치지 않도록 옵션을 주시면 되겠습니다.

이 정도 개념을 익히셨으면 스스로 레이아웃을 직접 만들어 보실 수 있겠습니다!!

처음에는 조금 어색하고 느리겠지만 연습을 하신다면 레이아웃을 금방금방 만드실 수 있으리라 생각이 됩니다.

조금 더 필요로 하는 내용은 공식 문서들에 제공되는 옵션들을 보고 참고하도록 하겠습니다.

감사합니다 :)

Mercurial merge 방법에 대해서 알아보겠습니다.

로컬에서 제 작업을 하고 있는 상태입니다. 그리고 hg pull 명령어를 통해서 상용으로부터 최신 코드를 받았습니다.

로컬 커밋은 changeset 5:3ee4804이고 상용으로부터 최신 코드는 tip이라 상황을 가정하겠습니다.

로컬 커밋(5:3ee4804)을 최신 코드(7:7ca57c)로 머지를 시키고 싶은 상황입니다.

현재 위치를 5번을 이동시켜주세요.

그리고 7번으로 병합을 시켜주시면 됩니다.

hg up 5
hg merge -r 7:7ca57c169925

머지를 시켜주시고 나면 각종 충돌이 일어날겁니다. hg diff 명령어를 통해서 소스를 확인하고 소스들을 정리해주세요.

소스들을 정리하고 commit을 하면 다음과 같은 에러가 발생합니다.

abort: unresolved merge conflicts (see 'hg help resolve')

머큐리얼에서는 머지 이후 커밋을 하기 전에 resolve라는 명령어를 사용해서 병합을 잘 해결했다고 알려줍니다.

hg resolve -l 명령어를 통해서 머지 이후 변경된 파일 리스트를 보여줍니다.

리스트 앞에 U는 아직 해결이 안되었고 R은 해결된 파일을 표시해줍니다.

파일을 수정했다면 hg reolve -m [파일명] 명령어로 해결했다고 알려줍니다. (m옵션은 해결이 되었다는 옵션입니다)

마지막으로 커밋을 해주시면 완료 됩니다.

hg resolve -l
hg resolve -m hello.txt
hg commit -m "hello :)"

완료가 되었으니 병합된 모습을 보도록 하겠습니다.

git과 달리 브랜치라는 개념이 달라 조금 헷갈릴 수 있습니다.

연습을 한번 진행하고 병합을 진행해주세요.

감사합니다 :)