정윤상이다.

TCPDUMP로 웹 서비스 패킷을 이쁘게 찍어보자

담배맛구마 — Sun, 5 Sep 2021 15:32:26 +0900

TCPDUMP를 사용해야되는 시점은 결국 뭔가 안 되니까. 네트워크 이슈 등을 점검하기 위해 쓰는 것 같다.

특히나 웹 서비스를 많이 쓰고 있으니, TCPDUMP로 웹 서비스에 대한 패킷을 찍어보자.

일단 기본적으로 TCPDUMP로 웹 서비스만 파싱하는 코드이다. 물론 HTTP Body는 생략한다.

stdbuf -oL -eL /usr/sbin/tcpdump -A -s 10240 -nn "tcp port 80 and (((ip[2:2] - ((ip[0]&0xf)<<2)) - ((tcp[12]&0xf0)>>2)) != 0)"

여기다가 이것 저것 붙이고 색깔도 넣어보자

stdbuf -oL -eL /usr/sbin/tcpdump -A -s 10240 -nn "(tcp port 80) and (((ip[2:2] - ((ip[0]&0xf)<<2)) - ((tcp[12]&0xf0)>>2)) != 0)" | egrep -a --line-buffered ".+(GET |HTTP\/|POST )|^[A-Za-z0-9-]+: " | perl -nle 'BEGIN{$|=1} { s/^(\d{2}:\d{2}:\d{2}.\d+) IP (\d+.\d+.\d+.\d+).(\d+) > (\d+.\d+.\d+.\d+).(\d+):.+/\n[\e[1;31m$1\e[0m] \e[1;32m$2:$3 -> $4:$5\e[0m/g; s/^.+?(GET |POST |HTTP\/[0-9.]*)/$1/g; print }'

[Python] 네이버 웹툰과 별점 그리고 언론보도

담배맛구마 — Sun, 14 Mar 2021 18:56:05 +0900

파이썬 스터디 그룹을 진행하면서 웹 파싱해서 Pandas로 데이터를 확인하는 코드를 짤 일이 있었는데 나중에 쓸일이 있을 것 같아 기록해둔다.

Naver webtoon

간단한 네이버 웹툰에 대한 파싱 코드를 작성했었다. 특정 웹툰에 대한 정보를 Dictionary List로 출력하는 내용이다.

import bs4
import requests
from urllib.parse import urlparse

BASE_URL_WEBTOON = 'https://comic.naver.com'


def get_webtoon_list(base, page, result=[]):
    resp = requests.get(base + page)
    soup = bs4.BeautifulSoup(resp.text, 'html.parser')
    soup = soup.find('div', {'id': 'content', 'class': 'webtoon'})

    result += [ {
        'no': [q.split('=')[1] for q in urlparse(tr.a['href']).query.split('&') if q.startswith('no=')][0],
        'title': tr.find('td', {'class': 'title'}).text.strip(),
        'rank': tr.div.strong.text.strip(),
        'date': tr.find('td', {'class': 'num'}).text.strip(),
        'link': base + tr.a['href']
    } for tr in soup.table.find_all('tr', {'class': ''})[2:] ]

    # If next tag exists, Go to next page.
    _soup = soup.find('div', {'class': 'paginate'})
    if (page := _soup.find('a', {'class': 'next'})):
        return get_webtoon_list(base, page.get('href'), result)
    else:
        return result
        
    return result

# 복학왕 : '/webtoon/list.nhn?titleId=626907'
# 독립일기 : '/webtoon/list.nhn?titleId=748105'
result = get_webtoon_list(BASE_URL_WEBTOON, '/webtoon/list.nhn?titleId=626907')

result에 대한 값은 다음과 같이 출력된다.

[{'no': '335',
  'title': '333화 청첩장 3화',
  'rank': '9.68',
  'date': '2021.03.02',
  'link': 'https://comic.naver.com/webtoon/detail.nhn?titleId=626907&no=335&weekday=wed'},
 {'no': '334',
  'title': '332화 청첩장 2화',
  'rank': '9.61',
  'date': '2021.02.23',
  'link': 'https://comic.naver.com/webtoon/detail.nhn?titleId=626907&no=334&weekday=wed'},
  ...
 ]

Pandas and metaplotlib

그냥 별점 기준으로 그래프로 그려봤다.

import pandas as pd

import seaborn as sns
import matplotlib.pyplot as plt # must be import to use seaborn
from matplotlib import rc

plt.rcParams['axes.unicode_minus'] = False
rc('font', family='AppleGothic')

pd.set_option('display.max_columns', None)  # or 1000
pd.set_option('display.max_rows', None)  # or 1000
pd.set_option('display.max_colwidth', None)  # or 199

data = pd.DataFrame(result)
data.set_index('no', inplace=True)
data.index = data.index.astype('int64')
data.loc[:, 'date'] = data.loc[:, 'date'].astype('datetime64')
data.loc[:, 'rank'] = data.loc[:, 'rank'].astype('float64')
data = data.sort_index(axis=0, ascending=True)
data.head()

x = data.index
y = data.loc[x, 'rank']
plt.figure(figsize=(10,6))
plt.xlabel('회차')
plt.ylabel('별점')
plt.plot(x, y)

별점이 왜 저렇게 튀어버렸을까? 제일 낮은 별점은 2015년에 연재된 46화. 바락 우바마1로 현재 3.86이다.

Journal

저정도로 별점이 튀었다면, 특히나 기안84 정도쯤 되는 셀럽이라면 언론보도가 있었을 것이다.

import json
import requests
import datetime

def get_journal(date, title):
    date_ = datetime.datetime.strptime(date, '%Y-%m-%d') + datetime.timedelta(days=30) 
    payload = {
        "indexName": "news",
        "searchKey": title,
        "searchKeys": [{}],
        "byLine": "",
        "searchFilterType": "1",
        "searchScopeType": "1",
        "searchSortType": "date",
        "sortMethod": "date",
        "mainTodayPersonYn": "",
        "startDate": date,
        "endDate": date_.strftime('%Y-%m-%d'),
        "newsIds":[], "categoryCodes":[], "providerCodes":[], "incidentCodes":[], "networkNodeType":"","topicOrigin":"","dateCodes":[],
        "editorialIs": False,
        "startNo": 1,
        "resultNumber": 10,
        "isTmUsable": False,
        "isNotTmUsable": False
    }
    headers = {
        'Content-Type': 'application/json; charset=utf-8',
        'X-Requested-With': 'XMLHttpRequest',
        'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Safari/605.1.15',
        'Aceept': 'application/json, text/javascript, */*; q=0.01',
        'Accept-Encoding': 'gzip, deflate, br',
        'Origin': 'https://www.bigkinds.or.kr',
        'Referer': 'https://www.bigkinds.or.kr/v2/news/search.do'
    }
    resp = requests.post('https://www.bigkinds.or.kr/api/news/search.do', headers=headers, data=json.dumps(payload))

    return json.loads(resp.text)

웹툰이 게시된 일자와 해당 회차의 제목으로 기사를 검색해보니... 그렇다고 한다.

journal = get_journal('2015-04-28', '46화. 바락 우바마 1')
for jn in journal['resultList']:
    print(f'''{jn['DATE']} : {jn['TITLE']}''')
    
# 20150429 : 복학왕 '바락 우바마' 등장에 악플 쏟아져 '또 닭 변신하나?'
# 20150429 : 복학왕 '바락 우바마' 등장에 네티즌들 술렁술렁 "무리수"
# 20150429 : 복학왕, ‘우바바’ 등장에 평점 3.3…독자들 뿔났다, 왜?
# 20150429 : 복학왕, ‘우바마’ 등장에 평점 3.3…독자들 뿔났다, 왜?
# 20150429 : 복학왕, ‘우바바’ 등장에 평점 3.3…독자들 뿔났다, 왜?
# 20150429 : 네이버 수요웹툰 복학왕 46화..오바마 아닌 우바마 떴다?..한국 잠행이유는?
# 20150429 : 네이버 인기 웹툰 '복학왕' 오바마 논란

기사 본문에서 긍정적인 단어들과 부정적인 단어들을 꺼내다가 봐도 재밋지 않을까 싶다.

[AWS] How to get EC2 Windows instance password

담배맛구마 — Sat, 5 Sep 2020 22:45:40 +0900

AWS에서 윈도우 인스턴스를 만들고 접속 패스워드를 얻기 위해서 웹 콘솔에 들어가서 Ker-pair를 주입해야된다. 근데 귀찮다.

1. 어떻게 윈도우 인스턴스 패스워드를 가져올까.

EC2에서 인스턴스가 구성될때, Administrator 계정의 패스워드를 Key-pair로 암호화해서 콘솔로 전송한다. 그래서 그걸 Key-pair로 복호화하면된다. 콘솔에서는 Get System Log를 통해서 확인할 수 있다.

정규표현식으로 <Password>\s+?(.+?)\s+?</Password> 뽑아내면될 것 같다. 값이 ==으로 끝나는걸 보니 Base64 디코드하고 Key-pair로 복호화하면 될 것 같다.

2. 뽀또3

ec2 클라이언트에서 get_console_output 메소드로 확인해야하는데 파라미터로 인스턴스 ID를 필요로한다.

import re
import boto3
import base64

def get_instance_information(cli):
    filters = [
        {'Name': 'platform', 'Values': ['windows']}, 
        {'Name': 'instance-state-name', 'Values': ['running']}
    ]
    if resp := cli.describe_instances(Filters=filters):
        for instance in resp['Reservations']:
            ins = instance['Instances'][0]
            info = {
                'instance_id': ins['InstanceId'],
                'private_ip': ins['PrivateIpAddress'],
                'public_ip': ins['PublicIpAddress']
            }
            if 'Tags' in ins:
                for tags in ins['Tags']:
                    if 'Name' in tags['Key']:
                        info.update({'name_tag': tags['Value']})
            yield info

def get_instance_password(cli, instance_id):
    resp = cli.get_console_output(InstanceId=instance_id)
    encryptd_password = re.search(r'<Password>\s+?(.+?)\s+?</Password>', resp['Output'])
    if encryptd_password:
        return base64.b64decode(encryptd_password.group(1))
    else:
        return False

바이너리로 패스워드가 떨어진다. 이제 keypair로 복호화 하면된다. 모듈로는 pycryptodome를 사용했다.

import pathlib
from Crypto.PublicKey import RSA
from Crypto.Cipher import PKCS1_v1_5

def get_decrypt_password(encrypted_password, keypair):
    if pathlib.Path(keypair).exists():
        key = RSA.importKey(open(keypair, 'rb').read())
        decryptor = PKCS1_v1_5.new(key)
        return decryptor.decrypt(encrypted_password, None)
    else:
        return False

띠용. 이 정보를 토대로 rdp파일을 만들어서, 활용한다면 좋을것 같다.

cli = boto3.client('ec2')
for instance in get_instance_information(cli):
    if encryptd_password := get_instance_password(cli, instance['instance_id']):
        if decrypt_password := get_decrypt_password(encryptd_password, 'key.pem'):
            if 'name_tag' not in instance:
                print('{} / '.format(instance['name_tag']), end='')
            print('{}'.format(instance['instance_id']))
            print(' └ Private IP : {}'.format(instance['private_ip']))
            print(' └ Public IP  : {}'.format(instance['public_ip']))
            print(' └ Password   : {}\n'.format(decrypt_password.decode()))

RDP 파일의 스펙을 보면 패스워드를 기입할 수는 있으나 Mac에서 Microsoft Remote Desktop 앱에서는 그걸 읽어들이지는 않는 것 같다. 다른 RDP 앱을 찾아서 Config에 기입한다면 가능할 것 같다.

[AWS] AWS Code Series

담배맛구마 — Mon, 22 Jun 2020 22:20:26 +0900

CodeSeries

AWS에서 Developer Tools로 분류가 되어있는 CodeCommit, CodeBuild, CodeDeploy, Codepipeline을 통칭하는 단어이다. CI와 CD를 단계적으로 수행할 수 있도록 적용할 수 있다. 하지만 각 서비스들이 CodeSeries 끼리만 연동되는 것은 아니다. CodeCommit 대신에 S3나 별도 Github을 쓸 수 도있고 CodeBuild 대신에 Jenkins를 쓸 수도 있다.

이외에도 CodeStar의 경우 프로젝트 단위로 개발언어와 배포대상, IAM, Code Pipeline 등을 종합적으로 쓸 수 있는 서비스이다.

CodeCommit

code series에서 repository를 담당하고 있는 서비스이다. 초기 생성시, 외부의 github, bitbucket 등에서 긁어 오도록 만들 수도 있다. 사용법은 git과 같은 버전관리 툴을 활용하면 된다.

git 사용시에는 aws cli에서 제공하는 credential-helper로 접근해야 한다.

git config user.name "Yunsang Jeong"
git config user.email "tbvjehr9999@gmail.com"
git config credential.helper "!aws codecommit credential-helper $@"
git config credential.UseHttpPath true

HTTP 403 Error 혹은 별도로 ID, PW를 타이핑을 요구할 시에는, git 설치시에 기본적으로 OS에 맞춰 설정되는 credential helper를 주석처리하고 git config로 설정하면된다. Windows의 경우 manager이고 MAC의 경우 osxkeychain이다.

git config --list --show-origin # Show all config value with config file location.
...
[credential]
#       helper = manager

테스트 해보자.

git add --all && git commit -m "First Commit(test)" && git push

EC2 Instance에서 CodeCommit의 소스코드를 가져올때에는 관련된 IAM Role을 만들어서 EC2 Instance에 붙여주면된다.

CodeBuild

code series에서 build를 담당하는 서비스이다. Codecommit, S3, Github 등의 Repository로 부터 resource를 가져와서 buildspec(yml)으로 정의된 절차대로 build를 진행한다.

build는 별도로 구성된 docker에서 실행되며 docker에 대한 구성은 어느정도 커스텀이 가능하다. 또한, 이 docker가 실행될 VPC와 Subnet, Security group에 대해서도 지정이 가능하다. build의 결과물인 artifacts는 설정에 따라 생성되지 않을 수 있으나, 생성 시에는 지정한 S3로 저장된다. 저장될때 S3에서의 경로, 네임스페이스, 압축여부, 암호화여부 등을 추가적으로 설정할 수 있다.

Code Build 프로젝트에서 artifacts를 A라는 S3에 저장하도록 설정했더라도, Code Pipleline을 생성할 때 지정하게 되는 B라는 S3에만 저장된다. 게다가 A와 B를 동일한 S3로 설정하더라도 , pipeline이 생성하는 artifacts는 고정된 디렉토리 구성 및 파일양식(S3 / Pipeline_Name / BuildArtif/ 임의의문자열)이 존재하므로 동일한 S3에 저장된다는 것 말고는 관리적 이점이 없는 것 같다.

buildspec은 build project 당 1개만 적용 가능하며 경로 및 파일명을 원하는대로 변경이 가능하다. 이를 통해 하나의 Repository에 buildspec_debug.yml과 buildspec_release.yml를 저장해놓고 build project를 debug용과 release용으로 2개 만들어서 운영이 가능하다.

build를 진행할 때 설정으로 buildspec를 over-ride가 가능한데, 이를 통해 debug용 build project에서 buildspec_release.yml를 사용하도록 하는 부적절한 관계를 맺을 수도 있다.

buildspec에는 phases에서 각 단계 별로 실행될 쉘 명령어를 기입하면된다. 명령어는 각 라인별로 순차적으로 한 번씩만 실행되며 명령어들이 실행되는 위치는 resource의 루트 디렉토리이다. 명령어를 실행할 때에는 interactive하게 진행되지 않도록 yes | command와 같은 조치가 필요하며 환경변수에 대해서도 생각할 필요가 있다. artifacts는 build작업의 산출물을 지정하면된다. 특정 디렉토리의 파일들을 recursive하게 지정하고 싶으면 **/* 키워드를 이용하면 된다.

# 여기다가 형상관리를 위해 buildspec의 버전넘버를 적으면 안된다... buildspec 포맷에 대한 버전이다.
version: 0.2 

phases:
  install:
    commands:
      - PYTHON=python2 amazon-linux-extras enable nginx1
      - yum clean metadata && yum install -y nginx
  pre_build:
    commands:
      - yes | cp nginx/imys.conf /etc/nginx/conf.d/imys.conf
      - yes | cp nginx/nginx.conf /etc/nginx/nginx.conf
  build:
    commands:
      - nginx -t
  post_build:
    commands:
      - echo Build completed on `date`

artifacts:
  files:
    - 'codebuild/buildspec_web.yml'
    - 'codedeploy_web/**/*'
    - 'static/**/*'
    - 'nginx/imys.config'
    - 'nginx/nginx.config'
    - 'appspec.yml'

특정 phases에서 실패를하게 되면 다음 phases는 실행이 되지 않는다. 실패의 기준은 명령어를 실행했을 때 Stderr으로 에러가 출력되면 실패이다. 좋지 않은 방법이지만 2>/dev/null과 같이 처리해버리면 실패할 일은 없어진다.

CodeDeploy

CodeDeploy는 Application과 Deployment groups으로 구성된다. Application은 배포하고자 하는 대상을 의미하고 다수의 Deployment group을 가질 수 있다. Deployment group은 Deploy 대상이 되며 EC2/On-premises, AWS Lambda, AWS ECS로 총 3가지 유형이며 유형별로 필요한 IAM policy와 config 파일이 달라질 수 있다. 배포를 위해서 EC2의 경우 별도 Agent 설치가 필요하다. Agent는 Ruby로 작성되어 있어서 까봐도 될 것 같다.

Agent 설치가 완료된 Instance를 이미지로 만들어서 배포할 경우 제대로 동작하지 않을 수 있다(고 한다). 그러므로 Userdata에 설치를 진행하는 코드를 넣어서 설치해야 한다.

구성과정에서 Agent를 이미 설치한 상황에서 IAM을 붙이거나 수정한 경우 Agent를 재시작해줘야 적용된다.

배포타입(전략; Deployment type)은 In-Place와 Blue/Green 두 가지를 지원한다.

In-Place

배포 대상인 인스턴스 그룹을 중지시키고 배포를 끝낸 이후에 다시 시작시킨다. 10개의 인스턴스에 배포했을 때, 1개라도 성공하면 성공으로 간주된다.

Blue/Green

Blue/Green의 경우 배포대상과 동일하게 환경을 구축한 이후, 배포하고 기존의 것을 삭제하는 절차로 진행된다.

Step 1 : Provisioning replacement instances
Step 2 : Installing application on replacement instances
Step 3 : Rerouting traffic to replacement instances
Step 4 : Terminating original instances

이 과정에서 In-Place보다 더 많은 Policy를 요구한다.

> iam:PassRole, ec2:CreateTags, ec2:RunInstances,

[AWS] AWS Transfer Family

담배맛구마 — Mon, 22 Jun 2020 00:04:59 +0900

뭘 어떻게 기록해둘까 고민하다가, 포이트가 될만한 안건들만 적기로 했다

General

S3에 파일을 안전(보안)하게 전송하기 위한 서비스이다. 이 서비스는 파일 전송을 하는 워크프로우를 AWS로 마이그레이션하는 것을 타겟으로 하고 있다. 현재 지원하는 프로토콜은 FTP, SFTP, FTPS 이다.

각 프로토콜이 가지는 몇 가지 특성에 대한 제약이 존재한다. 다음의 문서를 참고한다.
https://docs.aws.amazon.com/transfer/latest/userguide/getting-started-use-the-service.html

완전 관리형 서비스로써 서버 인스턴스나 인프라를 구축할 필요가 없고 클라이언트 측에서의 설정값 수정이 필요가 없다. 기존에 클라이언트가 접속하던 hostname을 AWS Transfer Family에서 만든 서버로 연결시키고, 사용자를 추가하고 권한을 설정하면 끝난다. 비용은 서비스를 사용한 시간과 파일의 용량으로 부과된다. 테스트하고 나서는 재빠르게 삭제해주자.

Scope-down Policy

chrooted. 서비스 계정별로 서비스되는 루트 디렉토리에 대해서 설정하고 가상의 디렉토리와 파일을 연결지어 버릴 수 있다. 적용하는 방법으론 IAM Policy 양식으로 작성하거나 Custom IdP에서 HomeDirectory- 관련 옵션을 사용하면 된다.

•IAM Policy

IAM Policy으로 작성하는 경우에는 Transfer Family에서만 전처리되어 동적으로 변환되는 변수들을 쓸 수 있다. 예를 들어 ${Transfer:UserName} 등이 있다.

•Custom Idp의 HomeDirectroy-

말 그대로 IdP가 서버로 반환해주는 값에 다가 관련된 내용들을 정의해주면된다. 일단 다음과 같이 HomeDirectoryType에 대해서 LOGICAL값을 설정해야 한다.

[{ "HomeDirectoryType": "LOGICAL" }]

그 다음에 HomeDirectoryDetail에 JSON Array로 작성하면 된다.

[{"Entry": "/", "Target": "/mybucket/jess"}]
OR
[{"Entry": "/", "Target": "/mybucket/${Transfer:UserName}"}]

쫌 더 응용하면 더 괴랄하게 만들 수 도 있다.

[
{"Entry": "/pics", "Target": "/bucket1/pics"}, 
{"Entry": "/doc", "Target": "/bucket1/anotherpath/docs"},
{"Entry": "/reporting", "Target": "/reportingbucket/Q1"},
{"Entry": "/anotherpath/subpath/financials", "Target": "/reportingbucket/financials"}
]

위와 같은 방법으로 HomeDirectoryType가 LOGICAL이고 Entry, Target Pair가 설정된 경우에는 HomeDirectory를 정의할 필요가 없다. 당연하겠지만 해당되는 버킷에 대해 권한은 필수적이다. 잘 사용한다면 복잡한 Scope-down Policy를 빌드와 Client 측의 수정사항을 줄일 수 있고 보안적인 이점을 얻을 수 있다.

End Point Type

주의 할점은 해당 서비스에서 End Point라고 하는 것들은 AWS Transfer Family로 구축한 서버를 칭한다. 즉, 이 서버를 어디에 어떻게 배치 시킬거냐에 대한 설정으로 생각하면 된다. 유연하게 선택하면 될 것 같다.

•Public Access

그냥 닉값한다. 생성하게 되면, Public Dynamic IP를 가진 Public DNS를 제공해준다. 이 DNS에 Route53으로 사용자가 가지고 있는 DNS를 붙일 수 있도록 설정을 제공하고 있긴 하다.
단점으론, 외부에 대한 접근제어가 매우 제한적이다. 최근에 Source IP에 대한 제어 기능이 추가됬다고 하던데, 확인해보니 자격 증명 공급자로 Custom IdP를 사용할때에만 가능하다.

•VPC_ENDPOINT

이거는 Console에서는 확인이 불가능하고 CLI, SDK를 통해서만 가능하다. 및의 VPC Hosted 2개로 대체되었다고 보면될 것 같다. 웃긴건 이 타입에 대한 자료가 거의 전무하지만 찾아 보면 한 두개는 있다.

•VPC Hosted with internet-facing

VPC Hosted들은 기본적으로 ENI와 Interface 타입의 EndPoints을 생성해서 서비스된다. internet-facing의 경우에는 생성과정에서 ENI에 EIP를 붙이는 방식이다. EIP를 쓰니까 Public Static IP를 얻을 수 있고 이에 따른 Public DNS도 얻을 수 있다. 또한 Route53과 연계도 가능하다. 아울러, Subnet 내부니까 Private Static IP도 할당된다. 접근제어로 NACL, SG를 기본적으로 쓸 수 있을 것이고 Custom IdP에서도 가능할 것이다.

•VPC Hosted with internal

이거는 위의 internet-facing의 ENI가 Private Subnet에 위치한다고 생각하면 된다. ENI에 Private Static IP만 붙는다. Private DNS도 제공되긴 한다. 접근제어는 동일하게 NACL, SG 그리고 Custom IdP이다.

EndPoint를 생성하니까 On-premise 환경과 연동되는 TGW, DX, VPN에서도 사용이 가능하고 VPC 간의 연동도 가능하다. AWS에서 선택 기준에 대해서 간략하게 테이블로 정리한 자료를 참고하면 좋을 것 같다.

https://aws.amazon.com/premiumsupport/knowledge-center/aws-sftp-endpoint-type/

Identity Provider

제일 난해했던 부분이다. 개념이 어렵거나 그런건 아니다. 정확하게 어떤 정보가 어떻게 흐른다는 지 확인하는게 어려웠다. 서버를 구축할 때, 다음의 두 가지 유형의 IdP를 설정할 수 있다.

•Service Managed

서비스 자체적으로 사용자부터 인증까지 알아서 해주는 유형이다. 서비스 계정별 SSH Public Key를 유지관리하면서 사용자 인증을 하기 때문에 SFTP 프로토콜인 경우에만 사용할 수 있다. 또한, Password 인증이나 출발지 IP에 대한 접근제어가 지원되지 않는다. 그냥 말그대로 Key를 통한 인증만 해준다는 의미이다.
서비스 계정에 대한 관리도 서비스 내에서 수행하게되는데, 서버를 구축하고나서 콘솔이나 api, sdk를 통해 서비스 계정을 생성하고 설정을 할 수가 있어서 관리적 이점이 어느정돈 있는 것 같다.

•Custom IdP

REST 타입의 API Gateway를 통해 인증을 수행하는 방식이다. 일반적으로 Lambda를 메소드에 붙여서 인증과정에 수행하는 식으로 구성하는 것 같다. Transfer Family에서 제공하는 모든 기능을 사용할 수 있다. SFTP의 경우 Key인증을 실패하면 Password로 재인증을 한다거나 어떤 프로토콜로 접속을 했는지, 출발지 IP는 어떻게 되는지에 대해 인증과정에서 제어할 수 있게 해준다.

다루고 싶은건 Custom IdP이다. 어차피 Service Managed의 사용자관리 부분을 제외한 모든 기능을 가져가기 때문이다.

Custom IdP를 구성할 때, 가장 난해했던 부분은 구축한 서버가 어떻게 IdP(API Gateway)와 통신하고, 또 내부적으로 어떤 결과값을 반환해야되는지에 대해서 명확하게 이렇게 저렇게 된다라고 명시되어 있지 않기 때문이다. 수 많은 Documents와 기술블로그들을 참조하여 비교,실험 결과 다음과 같은 결론을 얻을 수 있었고 순차적으로 정리해본다.

•[1] Server(Transfer Family) to IdP(API Gateway)

GET /servers/{serverId}/users/{username}/config?sourceIp=1.1.1.1&protocol=SFTP
...
Password: P@ssword
...

서버에서는 HTTP Request의 Get method로 위와 같은 URI와 Query string, Header로 인증정보를 IdP에 전송하게 된다. 딱 보면 느낌오듯이 serverId와 username, sourceIp, protocol, Password라는 정보가 전부이다.

serverId : resource path에서 정의되는 정보
username : resource path에서 정의되는 정보
sourceIp : HTTP Query 구문에 정의되는 정보 (옵션)
protocol : HTTP Query 구문에 정의되는 정보 (옵션)
Password : HTTP Requset Header 구문에 정의되는 정보(옵션)

serverId와 useranme은 URI에 반드시 포함되어야 하는 필수적인 정보이다. sourceIp와 protocol은 부가적인 옵션이고 Password의 경우 인증요소로 Password를 사용했을 때에 Header에 추가된다.

•[2] Insdide IdP(API Gateway to Lambda)

{
  "username": "$input.params('username')",
  "Password": "$util.escapeJavaScript($input.params('Password')).replaceAll("\\'","'")",
  "protocol": "$input.params('protocol')",
  "serverId": "$input.params('serverId')",
  "sourceIp": "$input.params('sourceIp')"
}

그냥 위 5가지 정보를 JSON으로 묶은다음에 POST method로 Lambda에 전송한다. Lambda에서는 event 변수를 통해 참조한다.

•[3] Insdide IdP(Lambda to API Gateway)

[필수항목]
Role : S3에 접근할 수 있는 Policy를 가진 Role의 Arn

[옵션항목]
Policy : Scope-down Policy에 대해서 JSON 포맷 (옵션)
  * 해당 Policy가 적용(?)될 때, 전처리되는 변수가 있으니 활용하면 유연하게 사용할 수 있다.
  * 변수목록 : ${Transfer:UserName}, ${Transfer:~~~}, ${Transfer:~~~}
  
PublicKeys: 사용자가 Password를 입력하지 않았다면, 접속하려는 계정의 Public Key를 입력
  * 물론, SFTP의 경우에만 사용가능하다.
  
HomeDirectory : 사용자 계정의 HomeDirectory를 지정할 수 있다.
  * 이거만 정의한다고 Chroot와 같은 효과를 제공하지는 않는다.

HomeDirectoryType: "PATH" 혹은 "LOGICAL" 값이며 
  * HomeDirectory로 제공한 경로를 사용자에게 절대값으로 보여주려면 "PATH"
  * HomeDirectory로 제공한 경로를 '/'로 보여주려면 "LOGICAL"

HomeDirectoryDetails : JSON 양식으로 Entry와 Target 페어의 리스트
  * 당연히 HomeDirectoryType가 "LOGICAL" 인 경우에 사용가능하다.
  * 이 기능으로 Logical Direoctry처럼 Cross(-Account)-Bucket 등의 구성이 가능하다.
  * 이걸 정의한 경우 HomeDirectory 값은 없어도 된다.

필수적인 Role과 옵션인 Policy, PublicKeys, HomeDriectory- 들이 있다. 이걸 그냥 JSON으로 묶은다음에 POST method 보내는 방식이다.

•[4] IdP(API Gateway) to Server(Transfer Family)

{
  "$schema":"http://json-schema.org/draft-04/schema#",
  "title":"UserUserConfig",
  "type":"object",
  "properties":{
    "Role":{
      "type":"string"
    },
    "Policy":{
      "type":"string"
    },
    "HomeDirectory":{
      "type":"string"
    },
    "HomeDirectoryType":{
      "type":"string"
    },
    "HomeDirectoryDetails":{
      "type":"string"
    },
    "PublicKeys":{
      "type":"array",
      "items":{
        "type":"string"
      }
    }
  }
}

위아 같이 응답되는 Payload의 스키마를 정의한 것이다.

[Linux] Set up chrooted SFTP server

담배맛구마 — Sun, 21 Jun 2020 23:19:31 +0900

테스트 목적으로 구축할일이 있었는데 생각보다 똥글이 많아서 기록한다.

구축환경은 Amazon Linux 2 on AWS EC2이다. 이미 SFTP 관련 서비스는 구축이 완료되어 있어 설정만 해주면 된다.

요구되는 사항을 정리해봤다.

1. 사용자마다 개별적인 SFTP 서비스 환경 제공을 위해 Chroot라고 대충 얼버무려 표현하는 기능을 활용했다.

AWS Transfer Family에서는 Scope-down policy라고도 표현한다. 딱히.. 정해진 표현은 없는 것 같다.

2. 사용자마다 개별적인 SSH key pair를 이용해서 로그인을 하도록 만들었다.

Edit sshd_config

기존의 Subsystem 구문을 주석처리하고, 파일 하단에 다음과 같이 작성한다. sftp_users 그룹은 /data/ 디렉토리를 root로 서비스 하겠다는 의미이다. 수정하고나서 서비스 재시작은 필요하다.

# Subsystem sftp /usr/lib/openssh/sftp-server
Subsystem sftp internal-sftp

Match Group sftp_users
  ChrootDirectory /data/
  ForceCommand internal-sftp

Create group, users and Set it up

sftps_users 그룹을 생성하고 서비스 계정을 생성한다. 그리고 그 계정이 사용할 디렉토리를 생성한다.

sudo groupadd sftp_users
sudo useradd -g sftp_users -s /sbin/nologin {USERNAME}

sudo mkdir /data
sudo mkdir /data/{USERNAME}
sudo chmod -R 755 /data
sudo chown -R {USERNAME}:sftp_users /data/{USERNAME}

개별적인 SSH Key pair를 사용하기 사용자 홈디렉토리에 관련 설정을 추가한다.

sudo mkdir -p /home/{USERNAME}/.ssh
sudo touch /home/{USERNAME}/.ssh/authorized_keys
sudo chown -R {USERNAME}:sftp_users /home/{USERNAME}/.ssh

sudo ssh-keygen -P "" -f {KEYNAME} -C {USERNAME}
sudo sh -c "cat {KEYNAME}.pub >> /home/{USERNAME}/.ssh/authorized_keys"

구축이 끝나면 SFTP 로그인 시에, Root 디렉토리로 /data/가 제공되고, 다른 계정의 디렉토리 정도는 보이나 퍼미션에 의해 계정이름의 디렉토리에서만 작업만 가능하다.

원래 목적은 계정의 홈 디렉토리를 /data/{USERNAME}으로 했었는데, 그러면 ~/.ssh/authorized_keys를 sshd가 리드를 하지 못한다. 해당 디렉토리에 대한 퍼미션에 대한 문제인데, chrootDirectory에서 요구하는 퍼미션 상태가 있어서 그러하다. 그래서 홈 디렉토리는 건들지는 않았다. sshd_config에서 authroized_keys의 위치를 수정할 수 있던것 같은데 그걸로 해결될 것 같은데 여기서 손절한다.

[AWS] SSH connect to bastion host by name tag

담배맛구마 — Sun, 10 May 2020 23:08:55 +0900

실습하다가, bastion host IP 찾아보는거 너무 귀찮아서 만듬.

#!/bin/bash

if [ "$1" == "" ]; then
    echo "[ERROR] input key file name by parameter!"
    exit 0
fi

instacneTag='ec2-an2-imys-test-bastion'

publicip=$(aws ec2 describe-instances \ 
                    --filters "Name=tag:Name,Values=$instacneTag" \
                    --query "Reservations[0].Instances[0].PublicIpAddress"  --output text)
ssh -i $1 ec2-user@$publicip

[React-Native] 끄적이기

담배맛구마 — Wed, 1 Apr 2020 22:16:16 +0900

모듈단위로 정리해보자

Print Image on network

이미지는 출력을 Image 컴포넌트로 출력하면 되고 네트워크 상에 있는 이미지를 가져올 때에는 width와 height를 명확하게 제시를 해줘야 한다. 지정안하면 에러는 안뜨는데 그냥 안 보인다. 그래서 나는 이미지 크기와 디스플레이 크기의 비율인 ratio를 계산해서 사용했다.

let imageUri = 'http://~~/a.jpg'
let imageWidth = 1080;
let imageHeight = 1920;
let ratio = Dimensions.get('window').height/imageHeight;
return(
  <Image
    source={{uri: imageUri}} 
    style={{width: imageWidth * ratio, height: imageHeight * ratio}}
    />
);

동일한 이미지를 여러번 호출 하는 경우 캐시에 담아두는 기능이 있다. 뭐.. 그렇다는데 실험은 안해봤다.

let imageUri = 'http://~~/a.jpg'
Image.queryCache([imageUri]);

Device Rotate

내 폰에 테스트하다가 어쩌다가 가로모드로 바꼇는데, 렌더링이 되지는 않았다. 화면에 전환이 있을 때, 계산해서 강제로 렌더링 시켜버렸다. 강제로 렌더링하는 메소드는 this.forceUpdate();이다.

componentDidMount(){
	Dimensions.addEventListener('change', this.onChangeDimensions);
}
componentWillUnmount(){
	Dimensions.removeEventListener('change', this.onChangeDimensions);
}
onChangeDimensions = () => {
	this.forceUpdate()
}

componentDidMount()는 초기에 render()가 실행된 이후에 실행되는 걸로 알고있는데, 이거만 하니까 componentWillUnmount 정의가 안됬다고 워닝떠서 추가했다.

Touch event on Image

Image는 기본적으로 onPress가 없다. 터치 이벤트를 주고 싶으면 상위에 TouchableHighlight 와 같은 컴포넌트를 두고 거기에 onPress를 줘야한다.

<TouchableHighlight onPress={this.pressImage} activeOpacity={1}>
  <Image
    source={{uri: imageUri}} 
    style={{width: imageWidth * ratio, height: imageHeight * ratio}}
    />
</TouchableHighlight>

Animation on Image

클릭했을 때 서서히 어두워지는 효과를 주고 싶었다. 처음에 타이머 만들어서 직접 구현하려고 했는데 이미 Animated라는 컴포넌트가 정의가 되어 있었다.

state = {
	isShowMenu : false,
	animateValue : new Animated.Value(1)
};

pressImage = () => {
	this.setState({
    	isShowMenu: !this.state.isShowMenu 
	}, () => {
		Animated.timing(
			this.state.animateValue, {
				toValue: this.state.isShowMenu? 0.5 : 1,
				duration: 500,
                  useNativeDriver: true
			}).start(()=>{
				// Console.log('Wow~')
			});
	});
  }

<TouchableHighlight onPress={this.pressImage} activeOpacity={1}>
	<Animated.View style={{opacity: this.state.animateValue}}>
		<Image
			source={{uri: imageUri}} 
			style={{width: imageWidth * ratio, height: imageHeight * ratio}}
		/>
	</Animated.View>
</TouchableHighlight>

Filesystem

기본적으로 Filesystem에 대해서 제어하는 기능은 없고 react-antive-fs 모듈을 받아서 진행해야 한다. 이미지 데이터를 받아서 byte로 찍어되야 되나 한숨쉬다가 downloadFile 메소드 있길래 바로 써봤더니 잘 되지는 않았다. 문제는 퍼미션 문제인 것 같아서 디바이스 설정에서 수동으로 파일시스템 권한 줬더니 잘 된다. 이제 파일시스템 퍼미션 주는 방식에 대해 알아봐야겠다.

import * as RNFS from 'react-native-fs';

let imageUri = 'http://~~/a.jpg'

RNFS.downloadFile({
	fromUrl: imageUri,
	toFile: '/storage/emulated/0/Download/test.jpg'
}).promise.then((r)=>{
	console.log(r);
});

Show menu from bottom

이걸.. Animated로 구현해야 되나 현타왔다가 react-native-bottom-action-sheet 모듈을 쓰기로 했다. GridView에서 visible에 state를 주면 깔끔할 것 같다. 그래서 이때까지 했던거 총합해서 메뉴가 보일 때 슈르륵 올라오게 만들었다.

import RNBottomActionSheet from 'react-native-bottom-action-sheet';
import Icon from 'react-native-vector-icons/FontAwesome5';

let saveIcon = <Icon family={'FontAwesome'} name={'save'} color={'#000000'} size={30}/>
let shareIcon = <Icon family={'FontAwesome'} name={'share-alt'} color={'#000000'} size={30} />
let settingIcon = <Icon family={'FontAwesome'} name={'cog'} color={'#000000'} size={30} />

<RNBottomActionSheet.GridView 
	visible={this.state.isShowMenu}
	onSelection={(index, value) => {
		this.pressImage();
		RNFS.downloadFile({
			fromUrl: imageUri,
			toFile: '/storage/emulated/0/Download/test.jpg'
		}).promise.then((r)=>{
			console.log(r);
		});
	}} 
	onCancel={()=>{this.pressImage();}}
>
	<RNBottomActionSheet.GridView.Item title={'저장하기'} icon={saveIcon} />
	<RNBottomActionSheet.GridView.Item title={'공유하기'} icon={shareIcon} />
	<RNBottomActionSheet.GridView.Item title={'설정화면'} icon={settingIcon} />
</RNBottomActionSheet.GridView>

잡다한 것들

[1] React-Native에서의 이름은 낙타방식이다.

공군 정보보호병, 정보보호장교에 대한 간략한 후기

담배맛구마 — Wed, 1 Apr 2020 17:18:33 +0900

이제는 관련된 정보가 많이 오픈된것 같은데, 저도 지원할 때 많은 도움 받았었기 때문에 간랸하게 후기 남겨볼께요.

[원서접수]

병사는 어려울께 없는데 장교의 경우 챙겨야 할 서류들이 상당히 많아요. 설명잘 보시고 접수하시면 되고 설령 의문사항 생겨도 담당부서에 연락하면 정말 친절하게 답변받을 수 있으니까 꼭 확인하고 넘어가세요.

[면접]

기술면접이 포함된 인성면접으로 생각하시면 돼요. 정확하게 어떤 항목으로 어떻게 배점을 매기는지는 밝힐 수는 없지만 어떻게 준비하면 좋을지에 대해서만 간략하게 말씀드릴께요.

병사의 경우 (제 개인적인 생각이긴 하지만) 그렇게 엄청나게 좋은 스펙과 스킬을 기대하지는 않아요. 정보보호와 관련되어 어떤 분야를 어떻게 공부해왔고 노력해온 사실을 어필만 해주셔도 될 것 같아요. 예를 들어, CTF 대회에 참가한 경험이라든지 프로젝트 진행경험, 개인적으로 공부하고 있는 것들이 있을 것 같아요. 그리고 정보보호개론에서 나오는 개념 정도는 모두 알고 계시면 좋을 것 같아요. 예를 들어,

Q> 혹시 ARP 프로토콜에 대해서 설명해주시겠습니까?
A> [ARP프로톨에 대한 설명]
Q> 그럼 이 ARP 프로토콜이 가지는 구조적인 취약점에 대해서 설명해주시겠습니까?
A> [ARP Spoofing 등에 대한 설명]

이런 느낌이죠. 혹시나 ARP 프로토콜에 대해서 모른다면 모르겠다고 답변하고 잘 알고 있는 프로토콜을 언급해주면 (면접관들이) 고마워 하지 않을까 싶네요. 장교의 경우는 병사에서 언급한 내용들에서 깊이를 더욱 깊게... 하시면 되지 않을까 싶네요.

면접복장은 병사는 단정한 사복, 장교는 정장인데 정답은 없습니다만 벗어날 필요는 없는 것 같아요.

말할 때 다나까를 해야되냐에 대해서는 지키는게 좋지만 병사의 경우 꼭 그렇게 까진 안해도 될것 같아요.

면접장소가 아마 계룡쪽일텐데 교통편이 안 좋으니 옆에 있는 지원자들이랑 같이 택시타도 좋지 않을까 싶네요.

[훈련소]

제가 두 번 가봤는데 시키는 대로 하면 됩니다. 두 번째 할 때는 추억돋으면서 재미도 느끼긴 했는데, 세 번은 힘들 것 같아요.

[실제업무]

군에서의 정보보호 업무를 어디 부대를 가서도 수행(은)할 수 있지만 핵심이되는 것들은 특정 부대들에 집중되어 있긴해요. 그 부대로 가셔야 정보보호 업무를 할 수 있는 갖춰진 환경에서, 그 업무만하며 부가적으로 인적 네트워크를 구축할 수 있지 않을까 조심스럽게 말하고 싶네요. 물론, 그 부대가 아닌 곳에서도 스스로 노력한다면 환경과 기회가 분명히 생길 수 있다고 봐요... 물론, 힘들지만요;;

메인이 되는 업무는 보안관제가 맞다고 봐요. 군에서의 보안관제에 대한 평이 다양한데

기술적인 깊이가 없어도 그냥 정해진 절차대로만 수행해도 되니까 발전할 기회가 많지 않다.

라는 평이 존재하는 것 같아요. 제 생각엔 이러한 평가가 왜 생겼는지를 생각할 필요가 있을것 같아요.

1. 이미 특정상황이 발생 했을 때에 대한 레퍼런스(수행경험)이 많이 있고 기록되어 있다.
2. 발생하는 상황들이 크게 테두리를 벗어나지 않기에 레퍼런스를 따라 대응을 하게되어 지속, 반복적인 업무가 되어 버린다.
3. 새로운 상황이 발생 하더라도 누군가 또다른 레퍼런스를 만들어 낸다.
4. 군 특성상 콜센터...와 같이 정보보호가 아니더라도 전산과 관련된 별의 별 것들을 다물어본다. 한글설치 어디서 하냐 등..;

위 내용들이 계속 반복된다고 생각하면 돼요. 3번의 경우가 생산적이긴 한데, 빈도수도 많지 않은데다가 보안관제사 입장에서 이를 주도적으로 하기가 힘든 상황이 많아요. 즉, 실질적으로 1번, 2번, 4번을 반복하다가 가끔씩 3번이 발생하는 것의 루틴이에요. 그래서 발전할 기회가 많지 않다고 평을 한다고 생각해요.

하지만 저는 위 루틴에서의 레퍼런스에 대해서 말씀드리고 싶어요. 이 레퍼런스를 진짜 이해한 상태에서 따라가고 있는지 묻고 싶어요. 지난 번에 발생한 상황과 동일하니까 똑같이 진행해보자라고 하는 것도 신속한 대응에 분명히 효과가 있지만, 이는 진짜 똑같냐에 대해 명확하게 판단근거가 있다라는 걸 전제하고 있어야 돼요. 저는 이 레퍼런스들을 배우고 이해하는 것만 해도 충분히 도움이 될 것 같아요.

장교의 경우에는 위에 언급한 업무들에 대한 상황판단과 상황보고, 업무진행 등의 업무가 주어진다고 생각하면 될 것 같아요. 부사관의 경우에도 제가 경험은 없지만 크게 다르진 않을 거에요.

보안관제 말고는 개발업무도 있을 수 있고 취약점 분석, 평가, 완화(조치) 업무도 있어요. 상세하게는 말할 순 없지만 민간에서의 그것과 크게 다르지 않다고 생각하시면 될 것 같아요.

정보보호솔루션 운영에 대한 부분을 제가 빠뜨렸는데 운영은 관련 업무를 하고 있으면 병, 장교없이 다 가능하지만 실제 정책을 수립하고 배포하는 것에 있어서는 병사에게 권한을 주지 않아요.(물론, 이렇게 해보는게 어떻겠습니까? 라고 건의해주면 간부입장에선 고마워요)

* 여담인데 업무자동화라는 명목으로 Python 스크립팅을 많이 접할텐데, 아무 생각없이 선배(선임)이 만들어 논거 가져다가 쓰지말고 코드리뷰하고 이해하고 쓰시길 바래요.

* 위에 언급된 업무들 중, 보안관제를 제외한 업무들은 "정보보호의 핵심적인 업무를 하는 부대들"에서 할 수 있어요.

[결론]

3줄 요약해보자면

1. 면접준비에 자신의 열정(노력)을 어필 할 수 있는 경험과 전공지식(정보보호개론, TCP/IP 등)을 정리해가자.
2. "그 부대"를 못 가더라도 열심히 하면 기회는 온(다고 믿으며 잘하면 된)다.
3. 선배(선임)가 "아 그거 이렇게 하면 되"라고 할때 왜? 라는 의문을 가져보자. (개기진 말자)

나는 예비군

[React-Native] 시작하기

담배맛구마 — Tue, 31 Mar 2020 15:07:44 +0900

간단한 어플리케이션 개발을 의뢰받았다. Android와 iOS 둘다 가능한걸 요구하길래 크로스플랫폼을 쓰기로했다.

React Native

깊게 공부할 시간이 없다. 개념이해 없다. 그냥 일단 Hello world 찍는다.

Installing dependencies

그래도 Expo CLI보다는 React Native CLI로 가보자

[공통사항]

맥북샀으니까 Homebrew 써보자. 참고로 16인치다

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
brew install node
brew install watchman

[Android]

JDK 8 이상버전을 설치해아한다. OpenJDK를 많이 쓰는 것 같다.

# brew tap AdoptOpenJDK/openjdk
# brew cask install adoptopenjdk8

안드로이드 스튜디오 설치받고 커스텀 메뉴에서 다음의 항목을 설치한다.

* Android SDK
* Android SDK Platform
* Performance(Intel HAXM)
* AVD(Android Virtual Device)

설치가 끝나면 SDK Manager에서 다음의 항목을 '잘' 설치한다.

* Android SDK Platform 28
* Intel x86 Atom_64 System Image "or" Google APIs Intel x86 Atom System Image
* Android SDK Build-Tools 28.0.3

환경변수 셋팅을 해주자.

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

[iOS]

드디어 xCode를 써볼일이 생겼다. 앱스토에서 설치해주자.

cocoapos를 설치해준다. 군 생활할때 신병보고 python 할줄 아냐고 물으니까 ruby는 할 줄 안다고 답했던게 기억난다.

sudo gem install cocoapods

Create a new app

프로젝트를 만들면 기본적으로 셋팅이 된다.

npx react-native init AwesomeProject

이제 실행을 할때, 콘솔에 찍힌거 처럼 run-ios 또는 run-android하면된다. 명령어를 실행하면 에뮬레이터를 환경변수대로 찾아서 실행하고 앱 설치하고 실행시켜준다.

초기에 App.js에 따른 앱 구동화면을 보면, r을 누르면 소스코드 변경된게 적용된다고 되어 있다. 하지만, 시도를 해보면 앱에서 서버를 찾을 수없다는 에러가 뜬다. 확인해보니 Metro bundler라는걸 따로 실행해줘야 이걸 통해서 적용하는 것같다.

npx react-native start

Hello, world!

그냥 App.js에 코딩하면 플랫폼에 맞춰 결과물이 나오는 것 같다.

Hello, world!

코드 자체는 Javascript인데 ES2015(ES6)을 따르므로 생소하게 느껴진다. import, from, class, extents가 그러한 예이다. 또한 retrun (...)에 있는 구문은 JSX이며 JavaScript XML의 약자이다. 이런 식으로 결국 JSX를 render해주는 component들을 정의해서 조합하면 UI가 완성될 것 같다.

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

export default class App extends Component {
  render() {
    return (
      <View><Text>Hello, world!</Text></View>
    );
  }
}

Component의 Instance가 생성되었을 때, 다음의 순서로 메소드가 실행된다.

Constructor()

static getDerivedStateFromProps()

render()

componentDidMount()

Props(Properties)와 State

component에서 데이터를 제어하기 위해 Props와 State가 있다. 다음의 특성이 있다.

Props와 State에 변경이 생겼을 때, render()가 수행된다. 이는 UI에 바로 그려진다고 생각하면 될 것 같다.
Props는 고정된 값이고 Instance가 생성될 때 Parameter로 넘겨받거나 component에서 정의가 가능하다.
State는 변경가능한 값으로 상황에 맞춰 설정하면된다.

Props(Properties)

source라는 Props를 이용해서 이미지를 출력하고 있다. {pic}은 'let pic' 구문에서 선언한 변수를 참조하는 JSX 문법이다. 이런식으로 Javascript를 JSX에서 중괄호로 참조할 수 있다.

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

export default class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://a.com/a.jpg'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}}/>
    );
  }
}

Greeting 객체 생성 시, name이라는 Prop을 넘겨주어 this.props을 통해 참조할 수 있다.

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

class Greeting extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Text>Hello {this.props.name}!</Text>
      </View>
    );
  }
}

export default class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center', top: 50}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

State

보통 생성자에서 state를 초기화하고나서 필요할 때, setter를 호출하는 방식을 쓴다.

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

class Blink extends Component {
  constructor(props){
    super(props);
    this.state = { isShowingText: true };
  }

  componentDidMount(){
    // Toggle the state every second
    setInterval(() => (
      this.setState(previousState => (
        { isShowingText: !previousState.isShowingText }
      ))
    ), 1000);
  }
  render() {
    if (!this.state.isShowingText) {
      return null;
    } else {
      return (
      	<Text>{this.props.text}</Text>
    	);
    }
  }
}

export default class App extends Component {
  render() {
    return (
      <View>
        <Blink text='I love to blink' />
      </View>
    );
  }
}

Design

각 디자인을 구성하는 컴포넌트들(View 등) 마다 style 속성으로 지정한다.

width : 가로길이를 숫자 혹은 비율(%)로 지정
height : 세로길이를 숫자 혹은 비율(%)로 지정
flex : 크기를 비율(정수)로 지정
backgroundColor : 색깔영문명 혹은 #ffffff 혹은 rgb(255, 255, 255)

기본적으로 레이아웃은 세로로 누적되는 방식인데 flexDirection으로 가로, 세로 설정 가능하다.

flexDirection : 기본값은 column이고 row로 하면 횡으로 쌓임
alignItems : flexDirection과 수직한 정렬에 대한 값으로 flex-start, center, flex-end, stretch, baseline이 있다.
justifyContent : flexDirection과 수평한 정렬에 대한 값으로 flex-start, center, flex-end, space-between(양쪽정렬), space-around(공백있는 양쪽정렬)이 있다.