이전 주제는 스키밍 장치 탐지를 위한 어플리케이션을 만드는 것으로 이상탐지 모델을 사용하여 구현하려 하였지만, 스키밍 장치에 대한 데이터셋 부족과 스키밍 장치마다 모델을 만들기는 어렵다는 판단이 들어 새로운 프로젝트를 진행하게 되었다.

우리의 새로운 프로젝트는 바로

전시 관람 후 사진과 관람평을 기록하고 나만의 티켓 굿즈를 만들어주는 아카이빙 웹 서비스

이다!

이 중, 중요 기능 중 하나인 전시 스타일을 반영하여 나만의 티켓 굿즈 생성하는 기능에서 가장 주요한 부분인 티켓 이미지를 생성하는 부분에 대해 기술하려고 한다.

정확한 목표는 사용자가 찍은 전시회 사진을 입력받아, 해당 전시 스타일을 반영한 티켓(에 들어갈) 이미지를 생성하는 것!

Step1. AI 모델 선정하기

스타일을 반영한 이미지를 생성하기 위해선 style transfer AI 모델을 사용해야하기 때문에 최신 style transfer 모델을 서베이해보았다. 그러다 'Styleshot'이라는 모델을 알게 되었는데

styleshot 모델 github.io

해당 모델은 두 개의 input 이미지와 prompt를 통해 새로운 이미지를 생성한다. input 이미지는 style reference와 content reference로 나뉘어져 있다.

• style reference -> 스타일을 추출
• content reference -> 윤곽을 추출 이렇게 두 가지의 이미지에서 각기 다른 요소를 추출하여 합쳐주는 것이 이 styleshot이 작동하는 방식인 것이다.

test 해본 결과 전시회의 스타일을 잘 추출하여 자연스럽게 만들어주는 것이, 우리 프로젝트에서 사용하기에 적합하다고 생각이 들어 모델을 사용할 준비를 하였다.

Step2. local에서 AI 모델 사용하기/구축하기

먼저 모델을 다운받아 local에서 잘 돌아가는지 확인하는 작업을 진행하였다.

git clone

git clone https://github.com/Jeoyal/StyleShot.git
cd StyleShot

환경설정

conda create -n styleshot python==3.8
conda activate styleshot
pip install -r requirements.txt

pre-trained weight 다운로드

git lfs install
git clone https://huggingface.co/Gaojunyao/StyleShot_lineart

모델을 inference하기 위해선 pre-trained weight를 따로 다운받아야한다. styleshot에는 lineart 와 contour 2가지의 모드가 있는데, 이중 우리는 lineart 모드를 사용하기 때문에 해당 모드의 weight만 다운 받았다.

-> 오픈 소스 모델이므로 github에 잘 정리가 되어있어 클론과 환경 설정까지 진행을 한 후 inference하는 파일을 실행해보았다. 하지만,, 에러가 났고 해당 에러는 huggingface에서의 버전이 달라져 생기는 오류였다.

에러가 생기는 파일 수정

• ./ip_adapter/ip_adapter.py

해당 파일에서 오류가 되는 부분을 수정해준 뒤, 다시 inference하는 파일을 실행해본 결과 잘 실행이 되었다.

• style reference image

• content reference image

• output image

우리가 원하던 대로 전시 스타일을 잘 반영하면서 티켓 이미지에 사용할 사진이 잘 생성이 되었다.

step3. AI 모델 배포하기

local 환경에서 모델이 잘 작동하는 것을 확인했으니, 이제 우리의 웹 서비스에서 사용할 수 있도록 모델을 배포해야한다. AI 모델을 배포하는 방법은 여러가지가 있는데, 우리 sw구조와 알맞은 방법으로 FastAPI를 통해 AI 서버로 모델을 배포하는 방식을 사용하였다.

memoir의 루트 폴더를 만들어준 뒤, 그 안에 방금 우리가 Styleshot 모델을 사용할 때 다운받아두었던 Styleshot 폴더와 FastAPI로 배포하는 main.py 파일을 넣어준다.

• main.py

  import sys
  import os
  import requests
  sys.path.append(os.path.join(os.path.dirname(__file__), "StyleShot"))
  import io
  import torch
  import cv2
  import numpy as np
  from fastapi import FastAPI, UploadFile, File, Form
  from fastapi.responses import JSONResponse
  from PIL import Image
  from StyleShot.annotator.hed import SOFT_HEDdetector
  from StyleShot.annotator.lineart import LineartDetector
  from diffusers import UNet2DConditionModel, ControlNetModel
  from transformers import CLIPVisionModelWithProjection
  from huggingface_hub import snapshot_download
  from StyleShot.ip_adapter import StyleShot, StyleContentStableDiffusionControlNetPipeline
  

import boto3 from botocore.exceptions import NoCredentialsError import uuid

from PIL import Image from typing import Optional

from dotenv import load_dotenv load_dotenv()

def upload_to_s3(local_file_path: str, bucket: str, region: str, s3_key_prefix: str = "") -> str: s3 = boto3.client('s3') filename = f"{s3_key_prefix}{uuid.uuid4().hex}.png" try: s3.upload_file(local_file_path, bucket, filename) return f"https://{bucket}.s3.{region}.amazonaws.com/{filename}" except NoCredentialsError: raise RuntimeError("S3 credentials not found.")

app = FastAPI()

=== 모델 초기화 ===

base_model_path = "models/stable-diffusion-v1-5" transformer_block_path = "models/CLIP-ViT-H-14-laion2B-s32B-b79K"

device = "cuda" if torch.cuda.is_available() else "cpu" styleshot_models = {}

def load_styleshot(preprocessor: str): if preprocessor in styleshot_models: return styleshot_models[preprocessor]

if preprocessor == "Lineart":
    detector = LineartDetector()
    styleshot_model_path = "models/StyleShot_lineart" 
elif preprocessor == "Contour":
    detector = SOFT_HEDdetector()
    styleshot_model_path = "Gaojunyao/StyleShot"
else:
    raise ValueError("Invalid preprocessor")

# 모델 다운로드
if not os.path.isdir(styleshot_model_path):
    snapshot_download(styleshot_model_path, local_dir=styleshot_model_path)

if not os.path.isdir(base_model_path):
    snapshot_download(base_model_path, local_dir=base_model_path)

if not os.path.isdir(transformer_block_path):
    snapshot_download(transformer_block_path, local_dir=transformer_block_path)

ip_ckpt = os.path.join(styleshot_model_path, "pretrained_weight/ip.bin")
style_aware_encoder_path = os.path.join(styleshot_model_path, "pretrained_weight/style_aware_encoder.bin")

unet = UNet2DConditionModel.from_pretrained(base_model_path, subfolder="unet")
content_fusion_encoder = ControlNetModel.from_unet(unet)

pipe = StyleContentStableDiffusionControlNetPipeline.from_pretrained(
    base_model_path,
    controlnet=content_fusion_encoder
)

styleshot = StyleShot(device, pipe, ip_ckpt, style_aware_encoder_path, transformer_block_path)
styleshot_models[preprocessor] = (styleshot, detector)

return styleshot, detector

=== API 엔드포인트 ===

@app.post("/generate/") async def generate_image( preprocessor: str = Form(...), style_url: str = Form(...), content_url: str = Form(...), prompt: Optional[str] = Form(None) ): if prompt is None: prompt = "default prompt" # 또는 그냥 빈 문자열로 처리

styleshot, detector = load_styleshot(preprocessor)

# 스타일 이미지 다운로드
style_response = requests.get(style_url)
style_response.raise_for_status()
style_image = Image.open(io.BytesIO(style_response.content)).convert("RGB")

# 콘텐츠 이미지 다운로드
content_response = requests.get(content_url)
content_response.raise_for_status()
content_array = np.frombuffer(content_response.content, np.uint8)
content_image = cv2.imdecode(content_array, cv2.IMREAD_COLOR)
content_image = cv2.cvtColor(content_image, cv2.COLOR_BGR2RGB)
processed_content = detector(content_image)
processed_content = Image.fromarray(processed_content)

# 추론
result = styleshot.generate(style_image=style_image, content_image=processed_content)
output_image = result[0][0]

# 결과 반환
img_bytes = io.BytesIO()
output_image.save(img_bytes, format='PNG')
img_bytes.seek(0)

output_path = f"/tmp/{uuid.uuid4().hex}.png"
output_image.save(output_path)  # 파일 저장

# S3 업로드
s3_url = upload_to_s3(
    local_file_path=output_path,
    bucket="hukmemoirbucket",
    region="ap-northeast-2",
    s3_key_prefix="results/"
)
os.remove(output_path)  # 서버 공간 정리

return JSONResponse(content={"s3_url": s3_url})

@app.post("/test-upload/") def test_s3_upload(): # 1. 더미 이미지 생성 dummy_image = Image.new("RGB", (256, 256), color="blue") temp_path = "test_result.png" dummy_image.save(temp_path)

# 2. S3 업로드
try:
    s3_url = upload_to_s3(
        local_file_path=temp_path,
        bucket="hukmemoirbucket",
        region="ap-northeast-2",
        s3_key_prefix="test/"
    )
    os.remove(temp_path)  # 업로드 후 파일 정리
    return {"s3_url": s3_url}
except Exception as e:
    return {"error": str(e)}

이 main.py 파일에서는 모델을 FastAPI로 배포해주고, 이미지를 받아 티켓 이미지를 생성하게 되면 이를 S3에 저장하고 해당 url를 반환해주는 코드까지 구현되어있다.

이때 local에서와 다른 점은 이 memoir를 local에서 돌렸던 상태로 git에 올리게 되면 너무나도 큰 용량 때문에 올라가지 않게 된다.
이를 해결하기 위해 아까 다운받은 pre-trained weight 파일들은 .gitignore 처리를 한 후
ec2 서버에서 위의 모델들을 다시 다운 받을 수 있게 하는 코드를 작성해둔다.

- download_weights.sh

#!/bin/bash

set -e # 에러 발생 시 중단

echo "🔽 StyleShot 모델 및 종속 모델 다운로드 시작..."

기본 디렉토리 구조 설정

MODEL_DIR="models" mkdir -p $MODEL_DIR

huggingface-cli 설치 확인

if ! command -v huggingface-cli &> /dev/null; then echo " huggingface-cli가 설치되어 있지 않습니다. 설치 중..." pip install -q huggingface_hub fi

git-lfs 설치 확인

if ! command -v git-lfs &> /dev/null; then echo " git-lfs가 설치되어 있지 않습니다. 설치 중..." sudo apt-get update && sudo apt-get install -y git-lfs git lfs install fi

모델 리스트

declare -A models=( ["StyleShot_lineart"]="Gaojunyao/StyleShot_lineart" ["StyleShot_contour"]="Gaojunyao/StyleShot" ["stable-diffusion-v1-5"]="runwayml/stable-diffusion-v1-5" ["CLIP-ViT-H-14-laion2B-s32B-b79K"]="laion/CLIP-ViT-H-14-laion2B-s32B-b79K" )

모델 다운로드

for dir in "${!models[@]}"; do path="$MODEL_DIR/$dir" repo="${models[$dir]}"

if [ ! -d "$path" ]; then echo " $repo → $path" python3 -c "from huggingface_hub import snapshot_download; snapshot_download(repo_id='$repo', local_dir='$path', local_dir_use_symlinks=False)" else echo " $repo 이미 존재: $path" fi done

echo " 모든 모델 다운로드 완료!"

```

이렇게 해두면 git에는 base 모델이 올라가있지 않지만, ec2 서버에서 git clone을 받은 수 download_weights.sh을 실행시키면 자동으로 models 폴더가 만들어지고 여기에 필요한 모델들이 다운로드 된다. 이렇게 처음 모델을 다운시켜두고 한번 inference를 하게 되면 그 다음부터는 checkpoint가 생겨 빠르게 이미지를 생성할 수 있게 된다.

ec2 서버에서 실행해보기

이제 github에 올린 memoir 폴더를 ec2 서버에서 클론 받은 뒤 FastAPI로 배포한 styleshot을 실제 ec2 서버에서 실행시켜보았을 때 잘 실행이 되었고 생성된 이미지가 S3에 저장이 되고 해당 url를 return 하는 것까지 잘 실행되는 것이 확인되었다

이후 이를 docker로 묶어 배포하는 것은 다른 팀원의 역할이였기에 이 상태로 넘겨주며 프로젝트를 마치게 되었다.

작성자 : (Team 28 HUK) 2171008 김지수

1. ATM 기기의 스키밍 장치 탐지
2. 실시간 거래 내역 중 이상거래 탐지

이 중, 내가 맡은 부분은 ATM 기기의 스키밍 장치를 탐지하는 것.

ATM 기기의 사진을 학습시켜, 이상탐지 알고리즘을 통해 스키밍 장치를 탐지하는 것이다.

좀 더 심화된 모델링은 다음학기 때 구현하는 것이기에, 이번 학기에는 어느정도 스키밍 장치를 탐지할 수 있는지에 대한 여부를 확인해보았다.

step1, 데이터셋 구하기

ATM 기기에 대한 데이터셋을 찾아보았지만 인터넷 상에서 구하기가 어려웠고, ATM기기마다 카드 투입구 부분이 달랐기에 먼저, 하나의 ATM기기만을 학습시켰을 때 스키밍 장치를 잘 탐지할 수 있는지에 대해 확인해보았다. 학교 근처 ATM기기를 정해 약 200개의 사진을 직접 찍었고, 각 이미지당 5종류의 Augmentation을 통해 약 1400장의 데이터셋을 확보하였다.

step2, AI 모델 정하기

여러 이상탐지 알고리즘 중, 먼저 쉽게 구현할 수 있는 Autoencoder를 먼저 시도해보았다. 메모리 기반의 MemSeg 모델을 사용해볼까도 고민해보았지만, 먼저 Autoencoder로 탐지를 해본 후, 필요하다면 시도해보기로 하였다. Autoencoder 모델은 정상 데이터만을 학습을 한 후, 복원 오차를 기준으로 이상 데이터를 탐지할 수 있기에 스키밍 장치의 사진을 구하기 어려운 우리에겐 너무 좋은 모델이였다.

Autoencoder

Autoencoder는 encoder 부분과 decoder부분으로 나눠진다. encoder 부분에서는 입력 이미지를 저차원으로 압축하여, 특정 feature들을 추출하는 것이고 decoder 부분에서는 추출한 feature를 통해 원래 이미지를 복원하는 것이다.

step3, 코드 구현

colab에서 코드를 구현하였기에, 1400장의 데이터셋을 가져올 방법이 필요했다. 이를 위해 kaggle API를 사용하였다. kaggle에 데이터셋을 올리고 API를 가져와 colab에서도 우리가 준비한 데이터셋을 사용할 수 있었다.

전처리 과정

import os
from torchvision import transforms
from torch.utils.data import Dataset, DataLoader
from PIL import Image
import matplotlib.pyplot as plt

# 데이터셋 정의
class ATMDataset(Dataset):
    def __init__(self, folder_path, transform=None):
        self.folder_path = folder_path
        self.image_paths = [os.path.join(folder_path, f) for f in os.listdir(folder_path) if f.endswith(('.png', '.jpg', '.jpeg'))]
        self.transform = transform

    def __len__(self):
        return len(self.image_paths)

    def __getitem__(self, idx):
        img_path = self.image_paths[idx]
        image = Image.open(img_path).convert("L")  # 흑백 변환 (1채널)
        if self.transform:
            image = self.transform(image)
        return image

# 데이터 경로
data_dir = "/root/.cache/kagglehub/datasets/j22s00/atm-cardslot/versions/1/ATM"  # Kaggle 데이터셋이 저장된 폴더 경로

# 전처리 파이프라인
transform = transforms.Compose([
    transforms.Resize((128, 128)),  # 이미지 크기 조정
    transforms.ToTensor(),          # Tensor로 변환
    transforms.Normalize(mean=[0.5], std=[0.5])  # 정규화
])

# 데이터셋 및 데이터로더 생성
dataset = ATMDataset(data_dir, transform=transform)
data_loader = DataLoader(dataset, batch_size=32, shuffle=True)

# 데이터 시각화
def visualize_sample(dataset, num_samples=5):
    plt.figure(figsize=(12, 6))
    for i in range(num_samples):
        image = dataset[i]
        plt.subplot(1, num_samples, i + 1)
        plt.imshow(image.squeeze(0), cmap="gray")
        plt.axis("off")
    plt.show()

visualize_sample(dataset)

모델 정의

import torch
import torch.nn as nn

# Autoencoder 모델 정의
class Autoencoder(nn.Module):
    def __init__(self):
        super(Autoencoder, self).__init__()
        # Encoder
        self.encoder = nn.Sequential(
            nn.Conv2d(1, 16, kernel_size=3, stride=2, padding=1),
            nn.ReLU(),
            nn.Conv2d(16, 32, kernel_size=3, stride=2, padding=1),
            nn.ReLU(),
            nn.Conv2d(32, 64, kernel_size=3, stride=2, padding=1),
            nn.ReLU()
        )
        # Decoder
        self.decoder = nn.Sequential(
            nn.ConvTranspose2d(64, 32, kernel_size=3, stride=2, padding=1, output_padding=1),
            nn.ReLU(),
            nn.ConvTranspose2d(32, 16, kernel_size=3, stride=2, padding=1, output_padding=1),
            nn.ReLU(),
            nn.ConvTranspose2d(16, 1, kernel_size=3, stride=2, padding=1, output_padding=1),
            nn.Sigmoid()
        )

    def forward(self, x):
        x = self.encoder(x)
        x = self.decoder(x)
        return x

모델 학습

import torch
import torch.nn as nn

# Autoencoder 모델 정의
class Autoencoder(nn.Module):
    def __init__(self):
        super(Autoencoder, self).__init__()
        # Encoder
        self.encoder = nn.Sequential(
            nn.Conv2d(1, 16, kernel_size=3, stride=2, padding=1),
            nn.ReLU(),
            nn.Conv2d(16, 32, kernel_size=3, stride=2, padding=1),
            nn.ReLU(),
            nn.Conv2d(32, 64, kernel_size=3, stride=2, padding=1),
            nn.ReLU()
        )
        # Decoder
        self.decoder = nn.Sequential(
            nn.ConvTranspose2d(64, 32, kernel_size=3, stride=2, padding=1, output_padding=1),
            nn.ReLU(),
            nn.ConvTranspose2d(32, 16, kernel_size=3, stride=2, padding=1, output_padding=1),
            nn.ReLU(),
            nn.ConvTranspose2d(16, 1, kernel_size=3, stride=2, padding=1, output_padding=1),
            nn.Sigmoid()
        )

    def forward(self, x):
        x = self.encoder(x)
        x = self.decoder(x)
        return x

의 코드를 통해 모델을 학습시키고 포토샵으로 스키밍 이미지를 만들어 테스트를 진행해보았다.

테스트 결과

하지만 결과는 처참하였다. 스키밍 사진은 탐지하지 못하였고, 오히려 각도가 반대되었던 사진만을 이상탐지한 것이다.

이러한 문제의 원인은 카트 투입구 부분을 attention하지 않았기에 주변 배경까지도 가중치를 두고 학습이 되었기 때문이라고 분석하였다.

step4, 이상탐지를 잘 하기 위한 수정

이를 해결하기 위해 카드 투입구 부분을 YOLO 모델을 사용하여 탐지하여 crop하려고 하였지만, YOLO 모델에 카드 투입구 부분을 또한 학습 시켜야했기 때문에 현재로썬 쉽지 않다고 생각이 되었고, 이는 다음 학기의 그로쓰 때 구현하기로 결정하였다...

새로운 데이터셋 구축

그렇기에 '다시' 데이터셋을 구하기 위해 근처 ATM기기에서 이번엔 카드 투입구 부분만을 확대하여 200장 정도의 사진을 찍어서 준비하였다.

새로운 모델

현재 사용하고 있는 autoencoder 모델이 이상탐지를 잘 못하는 것 같아, 데이터셋의 수도 적어진 것을 감안하여 모델과 학습 방법을 바꾸었다.

데이터 전처리

import os
import numpy as np
import cv2
import tensorflow as tf
from tensorflow.keras.preprocessing import image
from sklearn.model_selection import train_test_split

# 데이터셋 경로 설정
dataset_path = '/content/drive/MyDrive/atm'

# 이미지 읽어오기
images = []
for filename in os.listdir(dataset_path):
    if filename.endswith('.jpg') or filename.endswith('.png'):
        img = cv2.imread(os.path.join(dataset_path, filename))
        img = cv2.cvtColor(img, cv2.COLOR_BGR2RGB)  # 색상 채널 변환
        img = cv2.resize(img, (128, 128))  # 이미지 크기 조정
        images.append(img)

# 이미지 데이터를 numpy 배열로 변환
images = np.array(images) / 255.0  # 0-1 범위로 정규화

# 훈련 및 검증 데이터셋 나누기
X_train, X_test = train_test_split(images, test_size=0.2, random_state=42)

모델 정의

from tensorflow.keras import layers, models

# 모델 정의
input_img = layers.Input(shape=(128, 128, 3))

# 인코더 부분
x = layers.Conv2D(32, (3, 3), activation='relu', padding='same')(input_img)
x = layers.MaxPooling2D((2, 2), padding='same')(x)
x = layers.Conv2D(64, (3, 3), activation='relu', padding='same')(x)
encoded = layers.MaxPooling2D((2, 2), padding='same')(x)

# 디코더 부분
x = layers.Conv2D(64, (3, 3), activation='relu', padding='same')(encoded)
x = layers.UpSampling2D((2, 2))(x)
x = layers.Conv2D(32, (3, 3), activation='relu', padding='same')(x)
x = layers.UpSampling2D((2, 2))(x)
decoded = layers.Conv2D(3, (3, 3), activation='sigmoid', padding='same')(x)

# 모델 생성
autoencoder = models.Model(input_img, decoded)

# 모델 컴파일
autoencoder.compile(optimizer='adam', loss='mean_squared_error')

# 모델 구조 요약
autoencoder.summary()

모델 학습

# Autoencoder 학습
autoencoder.fit(X_train, X_train, epochs=50, batch_size=16, validation_data=(X_test, X_test))

최종 test 결과

이렇게 학습한 모델에 총 3개의 test 이미지를 넣어보았다. 이 이미지들은 스키밍 장치를 포토샵으로 가져온 이미지이다.

테스트 이미지 전처리 및 테스트

import os
import numpy as np
import cv2
from tensorflow.keras.preprocessing import image
import matplotlib.pyplot as plt

# 테스트 데이터 경로
test_dataset_path = '/content/test_dir'

# 이미지 파일 리스트 가져오기
test_images = [f for f in os.listdir(test_dataset_path) if f.endswith(('.jpg', '.jpeg', '.png', '.bmp', '.tiff'))]
print(f"Found {len(test_images)} images for testing.")

# 이미지 로드 및 전처리 함수
def load_and_preprocess_image(image_path):
    img = cv2.imread(image_path)
    img = cv2.cvtColor(img, cv2.COLOR_BGR2RGB)  # 색상 채널 변환
    img = cv2.resize(img, (128, 128))  # 모델에 맞는 크기로 조정
    img = np.array(img) / 255.0  # 0-1 범위로 정규화
    return img

# 테스트 이미지 처리
for test_image in test_images:
    image_path = os.path.join(test_dataset_path, test_image)

    # 이미지를 로드하고 전처리
    img = load_and_preprocess_image(image_path)
    img_batch = np.expand_dims(img, axis=0)  # 배치 차원 추가

    # 모델 예측 (복원된 이미지 계산)
    reconstructed_img = autoencoder.predict(img_batch)

    # 원본 이미지와 복원된 이미지 출력
    fig, axes = plt.subplots(1, 2, figsize=(10, 5))

    # 원본 이미지 출력
    axes[0].imshow(img)
    axes[0].set_title(f"Original: {test_image}")
    axes[0].axis('off')

    # 복원된 이미지 출력
    axes[1].imshow(reconstructed_img[0])  # 배치 차원 제거
    axes[1].set_title(f"Reconstructed: {test_image}")
    axes[1].axis('off')

    plt.show()

임계값 설정

import numpy as np

# 훈련 데이터의 평균 재구성 오차와 표준편차를 구해서 임계값 설정
train_reconstruction_errors = []  # 훈련 중 재구성 오차 리스트

for img in X_train:
    reconstructed_img = autoencoder.predict(np.expand_dims(img, axis=0))
    error = np.mean(np.square(img - reconstructed_img[0]))  # MSE 계산
    train_reconstruction_errors.append(error)

# 평균과 표준편차 구하기
mean_error = np.mean(train_reconstruction_errors)
std_error = np.std(train_reconstruction_errors)

# 임계값을 평균 + 2*표준편차로 설정 (재구성 오차가 크게 나올 확률이 낮은 값)
threshold = mean_error + 2 * std_error

# 이상 여부 판단
for test_image in test_images:
    image_path = os.path.join(test_dataset_path, test_image)

    # 이미지를 로드하고 전처리
    img = load_and_preprocess_image(image_path)
    img_batch = np.expand_dims(img, axis=0)  # 배치 차원 추가

    # 모델 예측 (복원된 이미지 계산)
    reconstructed_img = autoencoder.predict(img_batch)

    # 재구성 오차 계산
    reconstruction_error = calculate_reconstruction_error(img, reconstructed_img[0])

    # 재구성 오차 출력
    print(f"Image: {test_image}, Reconstruction Error: {reconstruction_error:.4f}")

    # 이상 여부 판단
    if reconstruction_error > threshold:
        print(f"Image: {test_image} is Anomalous.")
    else:
        print(f"Image: {test_image} is Normal.")

    # 원본 이미지와 복원된 이미지 출력
    fig, axes = plt.subplots(1, 2, figsize=(10, 5))

    # 원본 이미지 출력
    axes[0].imshow(img)
    axes[0].set_title(f"Original: {test_image}")
    axes[0].axis('off')

    # 복원된 이미지 출력
    axes[1].imshow(reconstructed_img[0])  # 배치 차원 제거
    axes[1].set_title(f"Reconstructed: {test_image}")
    axes[1].axis('off')

    plt.show()

이 결과로 3개의 테스트 이미지 중, 하나의 이미지를 이상데이터로 잘 탐지했다는 것을 알 수 있었다.

아직은, 성능이 부족하지만 이후로 다양한 하이퍼파라미터와 코드 수정 등을 통해 스키밍 장치를 잘 탐지하는 모델을 만들어보려고 한다.

step5, 이상데이터 모두를 잘 이상데이터로 탐지하기 위한 수정

추가 성능 향상을 위해

1. 모델 복잡도를 줄이고
2. 학습 데이터에 노이즈를 포함한 이미지를 입력하였다.

그 이유는 Autoencoder가 너무 복잡하다면 데이터의 세부적인 노이즈까지 복원할 수 있기에 이를 방지하고 노이즈를 포함한 이미지를 입력으로 주었을 때, 깨끗한 정상 데이터를 복원하도록 훈련한다면 이상 데이터가 학습되지 않도록 할 수 있기 때문이다.

따라서,

모델 정의

from tensorflow.keras import layers, models

# 간단한 Autoencoder 모델 정의
input_img = layers.Input(shape=(128, 128, 3))

# 인코더
x = layers.Conv2D(16, (3, 3), activation='relu', padding='same')(input_img)
x = layers.MaxPooling2D((2, 2), padding='same')(x)
x = layers.Conv2D(32, (3, 3), activation='relu', padding='same')(x)
encoded = layers.MaxPooling2D((2, 2), padding='same')(x)

# 디코더
x = layers.Conv2D(32, (3, 3), activation='relu', padding='same')(encoded)
x = layers.UpSampling2D((2, 2))(x)
x = layers.Conv2D(16, (3, 3), activation='relu', padding='same')(x)
x = layers.UpSampling2D((2, 2))(x)
decoded = layers.Conv2D(3, (3, 3), activation='sigmoid', padding='same')(x)

# 모델 생성
autoencoder = models.Model(input_img, decoded)
autoencoder.compile(optimizer='adam', loss='mean_squared_error')

모델 학습

# 훈련 데이터에 랜덤 노이즈 추가
noisy_X_train = X_train + np.random.normal(loc=0.0, scale=0.1, size=X_train.shape)
noisy_X_train = np.clip(noisy_X_train, 0., 1.)  # 픽셀 값을 [0, 1]로 클리핑

# Autoencoder 학습
autoencoder.fit(noisy_X_train, X_train, epochs=50, batch_size=16, validation_split=0.2)

이렇게 수정한 후, 테스트 부분에선 임계값을 수정하는 부분을 빼고 테스트를 한 결과

3개의 이상데이터 모두 이상 데이터로 잘 탐지한 결과를 얻을 수 있었다!!

이젠 정상데이터도 테스트를 하였을 때, 정상 데이터로 잘 탐지하는지를 추가로 테스트 시작하였다. 테스트셋엔 이젠, 이상데이터 3개와 정상데이터 6개를 넣었을 때, 테스트를 해보았지만 이상데이터 3개는 이상데이터로 하였지만 정상데이터에선 3개는 정상으로, 3개는 이상으로 탐지하였다.

이후 정상데이터 또한, 정상 데이터라고 잘 탐지할 수 있도록 성능을 향상시켜보려고 한다.

step6, 정상데이터 또한 정상데이터로 탐지하기 위한 수정

단순히 복원 오차(MSE)만으로는 정상과 이상 데이터를 완벽히 구분하기에는 어려울 수 있기에 추가적인 분석 방법인 SSIM을 계산하였다. 이는 복원된 이미지와 입력 이미지 간의 구조적 유사성을 계산하는 것으로

먼저 모델을 학습시킨 후, 학습한 데이터를 기반으로 SSIM 임계값을 설정해준다.

훈련 데이터 기반 SSIM 임계값 설정

# 훈련 데이터에서 SSIM 계산
train_ssim_scores = []
for img in X_train:
    reconstructed_img = autoencoder.predict(np.expand_dims(img, axis=0))
    ssim_score = calculate_ssim(img, reconstructed_img[0])
    train_ssim_scores.append(ssim_score)

# 평균과 표준편차 계산
mean_ssim = np.mean(train_ssim_scores)
std_ssim = np.std(train_ssim_scores)

# SSIM 임계값 설정 (평균 - 2*표준편차)
ssim_threshold = mean_ssim - 2 * std_ssim
print(f"SSIM Threshold: {ssim_threshold}")

이상탐지 테스트

for test_image in test_images:
    image_path = os.path.join(test_dataset_path, test_image)

    # 이미지 로드 및 전처리
    img = load_and_preprocess_image(image_path)
    img_batch = np.expand_dims(img, axis=0)  # 배치 차원 추가

    # 복원된 이미지 계산
    reconstructed_img = autoencoder.predict(img_batch)

    # 재구성 오차 (MSE) 계산
    reconstruction_error = calculate_reconstruction_error(img, reconstructed_img[0])

    # SSIM 계산
    ssim_score = calculate_ssim(img, reconstructed_img[0])

    # 이상 여부 판단
    if reconstruction_error > threshold or ssim_score < ssim_threshold:
        print(f"Image {test_image} is Anomalous.")
    else:
        print(f"Image {test_image} is Normal.")

이후 이를 고려하여 이상탐지를 진행하였고 그 결과

3개의 이상데이터는 이상데이터로, 6개의 정상데이터는 정상데이터로 잘 탐지하였다.

이로써 ATM기기의 스키밍 장치를 잘 탐지할 수 있는 모델을 완성하였고 이후엔 더욱 많은 데이터셋을 훈련 및 테스트해보며 더욱 성능을 향상 시켜보려 한다.

작성자 : (Team 28 HUK) 2171008 김지수

스키마 설계 고려 사항

• 제약 사항
• 쿼리 및 쓰기의 접근 패턴
• 관계 유형
• 카디널리티

스키마 설계 패턴

• 다형성 패턴 : 컬렉션 내 모든 도큐먼트가 유사하지만 동일하지 않는 구조를 가질 때 적합
• 속성 패턴 : 정렬하거나 쿼리하려는 도큐먼트에 필드의 서브셋이 있는 경우, 정렬하려는 필드가 도큐먼트의 서브셋에만 존재하는 경우에 적합
• 버킷 패턴 : 데이터가 일정 기간 동안 스트림으로 유입되는 시계열 데이터에 적합
• 이상치 패턴 : 드물게 도큐먼트의 쿼리가 애플리케이션의 정상적인 패턴을 벗어날 때 사용
• 계산된 패턴 : 데이터를 자주 계산해야 할 때나 데이터 접근 패턴이 읽기 집약적일 때 사용
• 서브셋 패턴 : 장비의 램 용량을 초과하는 작업 셋이 있을 때 사용
• 확장된 참조 패턴 : 각각 고유한 컬렉션이 있는 여러 논리 엔티티 또는 '사물'이 있고 특정 기능을 위해 엔티티들을 모을 때 사용
• 근사 패턴 : 리소스가 많이 드는 계산이 필요하지만 높은 정확도가 반드시 필요하지는 않은 상황에 유용
• 트리 패턴 : 쿼리가 많고 구조적으로 주로 계층적인 데이터가 았을 때 적용
• 사전 할당 패턴 : 주로 MMAP 스토리지 엔진과 함께 사용
• 도큐먼트 버전 관리 패턴 : 도큐먼트의 이전 버전을 유지하는 ㅐㅁ커니즘을 제공

정규화 vs 비정규화

데이터를 얼마나 정규화 할지는 늘 중요한 문제이다. 정규화 : 컬렉션 간의 참조를 이용해 데이터를 여러 컬렉션으로 나누는 작업. 비정규화 : 모든 데잍를 하나의 도큐먼트에 내장하는 것.

도큐먼트 삽입

몽고DB에 데이터를 추가하는 기본 방법. insertOne 메서드 사용.

> db.movies.insertOne({"title" : "Stand my Me"})

도큐먼트에 "_id" 키가 추가되고 도큐먼트가 몽고DB에 저장된다.

여러 도큐먼트를 컬렉션에 추가하려면 insertMany로 도큐먼트 배열을 전달한다.

> db.movies.insertMany([{"title" : "Ghostbusters"},
                        {"title" : "E.T."},
                        {"title" : "Blade Runner"}]);

** 48메가바이트보다 큰 메세지는 허용하지 않아, 시도할 시 일괄 삽입 여러 개로 분할된다.

이 때, 중간 도큐먼트에서 오류가 발생할 시,정렬 연산/비정렬 연산을 선택했는지에 따라 발생하는 상황이 달라진다. insertMany에 대한 두 번째 매개변수로 옵션 도큐먼트를 지정할 수 있는데, "ordered"키에 true(기본값)를 지정하면 도큐먼트가 제공된 순서대로 삽입이 되고 flase를 지정하면 삽입을 재배열할 수 있다. 즉, 재배열이 가능하다면 오류가 난 것만 제외하고 삽입이 되지만, 재배열이 되지 않을 시 오류가 난 도큐먼트부터는 삽입이 되지 않는다.

도큐먼트 삭제

deleteOne과 deleteMany 메서드 사용. 필터 도큐먼트를 첫 번째 매개변수로 사용.

> db.movies.deleteOne({"_id" : 4})

필터 도큐먼트에 해당하는 도큐먼트가 여러개일 땐, deleteOne은 첫 번째 도큐먼트만, deleteMany는 모두 제거된다.

전체 컬렉션을 삭제하기 위해선 drop을 사용하는게 편리하다.

> db.movies.drop()

데이터는 한 번 제거하면 영원히 사라진다.

도큐먼트 갱신

updateOne, updateMany, replaceOne과 같은 메서드들을 사용한다. updateOne, updateMany는 필터 도큐먼트를 첫 번째 매개변수로, 변경 사항을 설명하는 수정자 도큐먼트를 두 번째 매개변수로 사용한다. replaceOne도 첫 번째 매개변수로는 필터를 사용하지만 두 번째 매개변수는 필터와 일치하는 도큐먼트를 교체할 도큐먼트라는 점이 차이점이다.

도큐먼트 치환

{
    "_id" : ObjectId(/*생략*/),
    "name" : "joe",
    "friends" : 32,
    "enemies" 2
}

> var joe = db.users.findOne({"name" : "joe"});
> joe.relationships = {"friends" : joe.friends, "enemies": joe.enemies);
> joe.username = joe.name;
> delete joe.friends;
> delete joe.enemies;
> delete joe.name;
db.user.replaceOne({"name" : "joe"}, joe);

도큐먼트 치환할 때에는, 고유한 도큐먼트를 갱신 대상으로 지정하는 것이 좋다. ex. "_id" 키로 일치하는 고유한 도큐먼트를 지정

갱신 연산자

도큐먼트의 특정 부분만 갱신하는 경우가 많다. 갱신 연산자를 사용한다.

> db.analytics.updateOne({"url" : "www.example.com"},
... {"$inc" : {"pageviews" : 1}})

"pageviews" 키의 값을 증가시키기 위해 "$inc" 제한자를 사용. 연산자를 사용하여 "_id"의 값은 변경할 수 없고, 변경하기 위해선 도큐먼트 전체를 치환해야한다.

• "$set" 제한자 : 필드 값을 설정한다. 필드가 존재하지 않을 시 새 필드를 생성한다.

  > db.users.updateOne({"_id" : ObjectId(/*생략*/)},
  ...{"$set" : {"favorite book" : "War and Peace"}})

  이때, "$set"은 데이터 형을 변경 시킬 수도 잇으며 내장 도큐먼트 내부의 데이터 또한 변경할 수 있다

"$unset"으로는 키와 값을 모두 제거한다.

• "$inc" 연산자 : 이미 존재하는 키의 값을 변경하거나 새 키를 생성하는데 사용. 자주 변하는 수치 값을 갱신하는데 매우 유용.

  > db.games.updateOne({"game" : "pinball", "user" : "joe"},
  ...{"$inc" : {"score" : 50}})

  "$inc"는 숫자를 증감하기 위해 설계되었기 때문에 int, log, double. decimal 타입 값에만 사용할 수 있다.

• "$push" : 배열이 존재하면 배열 끝에 요소를 추가시키고 존재하지 않으면 새로운 배열을 생성한다. 또한 이 연산자에는 제한자를 제공한다.

  > db.movies.updateOne({"genre" : "horror"},
  ...{"$push" : {"top10" : {"$each" : [{"name" : "Nightmare on Elm Street", "rating" : 6.6},
                                    {"name" : "Saw,"rating" : 4.3}],
                          "$slice" : -10,
                          "$sort" : {"rating" : -1}}}})

  "rating" 필드로 배열의 모든 요소를 정렬한 후 처음 10개 요소를 유지한다. 이때, "$each"를 반드시 포함해야한다.

특정 값이 배열에 존재하지 않을 때, 해당 값을 추가하면서 배열을 집합처럼 처리하려면 쿼리 도큐먼트에서 "$ne"를 사용한다.

"$addToSet" 또한 비슷한데, 중복을 피할 수 있거나 고유한 값을 여러 개 추가하기 위해 필요하다.

• "$pop" : 배열 요소를 제거할 때 사용. 배열 양 끝의 요소를 제거한다.

• "$pull" : 지정된 조건에 따라 요소를 제거할 때 사용.

• "$"문자 : 위치 연산자.

  > db.blog.updateOne({"comments.author" : "John"},
  ... {"$set" : {"comments.$.author" : "Jim"}})

  John이라는 사용자가 이름은 Jim으로 갱신하기 위해서 위치 연산자 가용. 위치 연산자는 첫 번째로 일치하는 요소만 갱신한다.

> db.blog.updateOne(
    {"post" : post_id },
    {$set : { "comments.$[elem].hidden" : true } },
    {
        arrayFilters: [ { "elem.votes": { $lte: -5} } ]
    }
  )

명령은 "comments" 배열의 각 일치 요소에 대한 식별자로 elem을 정의한다. elem이 식별한 댓글의 투표값이 -5이하면 hiddem 필드를 추가하고 값을 true로 설정.

갱신입력

: 특수한 형태를 갖는 갱신으로, 갱신 조건에 맞는 도큐먼트가 존재하지 않을 때는 쿼리 도큐먼트와 갱신 도큐먼트를 합쳐서 새로운 도큐먼트를 생성.

> db.analytics.updateOne({"url" : ".blog"}, {"$inc" : {"pageviews" : 1}},
... {"upsert" : true})

해당 url 페이지에 방문할 때마다 pageview를 증가시키고 만일 처음 방문했다면 새로운 도큐먼트까지 생성 updateOne과 updateMany의 세 번째 매개변수는 옵션 도큐먼트로, 갱신 입력을 지정한다.

저장 셀 보조자

: save는 도큐먼트가 존재하지 않으면 도큐먼트를 삽입하고 존재하면 도큐먼트를 갱신하게 하는 셸 함수이다.

> var x = db.testcol.findOne()
> x.num = 42
> db.testcol.save(x)

:: save 사용

> var x = db.testcol.findOne()
> x.num = 42
db.testcol.replaceOne({"_id" : x._id}, x)

:: save 미사용

갱신한 도큐먼트 반환

findOneAndUpdate 메서드는 기본적으로 도큐먼트의 상태를 수정하기 전에 반환한다. 옵션 도큐먼트의 "returnNewDocumentment" 필드를 true로 설정하면 갱신된 도큐먼트를 반환한다. (세 번째 매개변수) findOneAndReplace는 동일한 매개변수를 사용하며 교체 전이나 후에 필터와 일치하는 도큐먼트를 반환하고 findOneAndDelete도 유사하지만 갱신 도큐먼트를 매개변수로 사용하지 않으며 다른 두 메서드의 옵션을 부분적으로 가진다. 또한 삭제된 도큐먼트를 반환한다.

도큐먼트

: 몽고DB 데이터의 기본 단위이며 관계형 데이터베이스의 행과 유사. 정렬된 키와 연결된 값의 집합으로 이뤄져있다.

{"greeting" : "Hello, world!"}

간단한 도큐먼트로 키 : "greeting", 값 : "Hello, world!" 를 가진다.

• 키는 null 문자를 포함하지 않고 ₩n은 키의 끝을 나타내는 데 사용된다.
• 데이터형과 대소문자를 구별한다.
• 키는 중복될 수 없다.

컬렉션

: 도큐먼트의 모음. 관계형 데이트베이스에서의 테이블에 대응된다.

동적 스키마

: 하나의 컬렉션 내 도큐먼트들이 모두 다른 구조를 가질 수 있다.

네이밍

: 컬렉션은 이름으로 식별된다.

• 빈 문자열은 유효한 컬렉션명이 아니다.
• ₩n은 컬렉션의 끝을 나타내는 문자이므로 컬렉션에 포함되지 않는다.
• system.으로 시작하는 컬렉션명은 시스템 컬렉션에서 사용하는 예약어이다. (ex. system.users - 데이터 사용자 정보 컬렉션)
• 사용자가 만든 컬렉션에서 $를 컬렉션명에 포함할 수 없다.

서브컬렉션

서브컬렉션의 네임스페이스에 '.'를 사용하여 컬렉션을 체계화한다. ex. 블로그 기능이 있는 애플리케이션 : blog.posts, blog.authors 으로 표현가능 서브컬렉션의 특별한 속성은 없지만 여러 몽고DB 툴에서 지원한다

데이터베이스

: 컬렉션을 그룹지어 놓는 곳. 몽고DB의 단일 인스턴스는 여러 데이터베이스를 호스팅할 수 있으며 각 데이터베이스를 완전히 독립적으로도 취급할 수 있다.

데이터베이스 또한 이름으로 식별되는데

• 빈 문자열은 유효한 데이터베이스 이름이 아니다.
• / ₩ , ' < > : ? $ 등의 문자를 포함할 수 없다.
• 대소문자를 구별하낟.
• 최대 64바이트이다.

또한, 직접 접근할 순 있지만 특별한 의미론을 갖는 예약된 데이터베이스 이름도 있다.

• admin : 인증과 권한 부여 역할
• local : 단일 서버에 대한 데이터 저장
• config : 샤딩된 몽고DB 클러스터는 이를 사용해 각 샤드의 정보 저장

** 컬렉션을 저장하는 DB의 이름을 컬렉션명 앞에 붙이면 올바른 컬렉션명인 네임스페이스를 얻는다. ex. cms 데이터베이스의 blog.posts 컬렉션을 사용한다면 컬렉션의 네임스페이스는 cms.blog.posts가 된다.

셸 기본 작업

생성

> movie = {"title" : "Star Wars: Episode IV - A New Hope",
... "director" : "George Lucas",
... "year" : 1977}

도큐먼트를 나타내는 자바스크립트 객체인 movie라는 지역 변수를 생성하고, 이 변수는 "title", "director", "year"와 같은 키를 가진다. 이 객체는 유효한 몽고DB 도큐먼트이며 insearOne 함수를 이용해 movies 컬렉션에 저장할 수 있다.

> db.movies.insertOne(movie)
{
    "acknowledged" : true,
    "insertedId" : ObjectId(/* 생략 */)
}

컬렉션에 find를 호출하면 이렇게 출력된다.

> db.movies.find().pretty()
{
    "_id" : ObjectId(/* 생략 */),
    "title" : "Star Wars: Episode IV - A New Hope",
    "director" : "George Lucas",
    "year" : 1977
}

읽기

> db.movies.findOne()
{
    "_id" : ObjectId(/* 생략 */),
    "title" : "Star Wars: Episode IV - A New Hope",
    "director" : "George Lucas",
    "year" : 1977
}

find와 findOne은 컬렉션을 쿼리하는데 사용하고, 컬렉션에서 단일 도큐먼트를 읽으려면 findOne을 사용한다. 이 둘은 쿼리 도큐먼트의 형태로, 조건 전달도 가능하다.

갱신

> db.movies.updateOne({title : "Star Wars: Episode IV - A New Hope"},
... {$set : {reviews: []}})
WriteResult({"nMatched": 1, "nUpserted": 0, "nModified": 1})

updateOne은 게시물을 갱신하는데 사용한다. 매개변수는 최소 두 개이고 첫 번째는 수정할 도큐먼트를 찾는 기준, 두 번째는 갱신 작업을 설명하는 도큐먼트이다. 이 때, 갱신하기 위해선 갱신 연산자인 $set를 사용한다.

위의 작업으로 도큐먼트에는 "reviews" 키가 생겼다. find로 호출하면 이렇게 출력된다.

> db.movies.findOne()
{
    "_id" : ObjectId(/* 생략 */),
    "title" : "Star Wars: Episode IV - A New Hope",
    "director" : "George Lucas",
    "year" : 1977,
    "reviews" : [ ]
}

삭제

> db.movies.deleteOne({title : "Star Wars: Episode IV - A New Hope"})

deleteOne과 deleteMany는 도큐먼트를 데이터베이스에서 영구적으로 삭제한다. 이 둘은 필터 도큐먼트로 삭제 조건을 지정한다.

데이터형

• null
• 불리언
• 숫자
• 문자열
• 날짜 : 새로운 객체를 생성할 땐 new Date()
• 정규 표현식
• 배열
• 내장 도큐먼트 : 키에 대한 값으로 도큐먼트가 되는 것
• 객체 ID : 몽고DB의 모든 도큐먼트는 고유의 "_id"값을 가진다. (명시하지 않으면 자동생성)
• 이진 데이터
• 코드

몽고DB 셸 사용

다른 장비나 포트에 mongod를 연결하려면 셸을 시작할 때 호스트명, 포트, 데이터베이스를 명시해야 함.

$ mongo some-host:3000/myDB
MongoDB shell version: 4.2.0
connecting to: some-host:3000.nyDB
>

만일 셸을 시작할 때 --nodb를 추가하면 어디에도 연결되지 않는다. 이후 new Mongo(호스트명)을 실행함으로써 mongod에 연결한다.

.mongorc.js 만들기

셸이 시작할 때마다 실행되는 스크립트를 .mongorc.js 파일에 넣을 수 있다. ex. 로그인할 때 사용자를 맞이하는 셸 홈 디렉터리에 .mongorc.js 파일을 만들고 다음을 추가한다.

// .mongorc.js

var compliment = ["attractive", "intelligent", like Batman"];
var index = Math.floor(Math.random()*3);

print("Hello, you're looking particularly "+compliment[index]+" today!");

몽고DB

몽고DB는 관계형 데이터베이스가 아니라 도큐먼트 지향 데이터베이스이다.

특징

• 분산 확장을 쉽게 할 수 있다.
• 행 개념 대신, 유연한 모델인 도큐먼트를 사용한다.
• 복잡한 계층 관계를 하나의 레코드로 표현할 수 있다.
• 최신 객체 지향 언어를 사용하는 개발자의 관점에서 매우 적합하다.
• 고정된 스키마가 없다. (쉽게 필드 추가/제거 가능)
• 개발 과정을 빠르게 반복할 수 있어 속도가 빠르다.

기능

• DBMS의 대부분의 기능 (ex.데이터 생성/읽기/변경/삭제
• 인덱싱 : 일반적인 보조 인덱스와 계층 구조의 보조 인덱스를 지원, 고유/복합/공간 정보/인덱싱 기능 제공
• 집계 : 데이터 처리 파이프라인 개념을 기반으로 한 집계 프레임워크를 제공. 복잡한 분석 엔진을 구축 가능
• 특수한 컬렉션 유형 : 세션이나 고정크기 컬렉션과 같이 특정 시간에 만료해야하는 데이터에 대해 유효시간 컬렉션을 지원, 기준 필터와 일치하는 도큐먼트에 한정된 부분 인덱스 지원
• 파일 스토리지 : 큰 파일과 파일 메타데이터를 편리하게 저장하는 프로토콜 지원

타입

자바스크립트는 7가지 테이터 타입(자료형)을 정의한다.

• undefined
• null
• Boolean
• String
• Symbol
• Numeric
• Object

프로그래밍에서의 타입은 수학의 집합과 유사하다. 타입은 값이 가질 수 있는 유효한 범위의 집합을 말한다.

function double(n) {
    return n*2;
}

double(2); // 4
double("z"); // NaN

double()의 내부 동작을 보면 숫자를 인자로 받을 거라고 기대한다. 만약 인자로 숫자가 아닌 다른 타입 값을 전달하면 의도치 않은 작업을 수행해서 원하는 값을 얻지 못한다.

function double(n:number) {
    return n*2;
}

double(2); // 4
double("z"); // Error

일단 타입을 제한하면 타입스크립트 컴파일러는 함수를 호출할 때 호환되는 인자로 호출했는지를 판단한다. 즉 string 타입인 'z'는 number에 할당할 수 없기 때문에 에러가 발생한다.

정적 타입, 동적 타입

타입을 결정하는 시점에 따라 정적 타입과 동적 타입으로 분류할 수 있다.

정적 타입 시스템에서는 모든 변수의 타입이 컴파일타임에 결정된다. 코드 수준에서 개발자가 타입을 명시해줘야하는 C, 자바, 타입스크립트 등이 정적 타입 언어레 속한다. 조금 번거로워보여도 컴파일타임에 타입 에러를 발견할 수 있기 때문에 안정성을 보장할 수 있다.

동적 타입 시스템에서는 변수 타입이 런타임에서 결정된다. 파이썬, 자바스크립트가 대표적인 동적 타입 언어로 개발자는 직접 타입을 정의해줄 필요가 없다. 프로그램을 실행할 때 타입 에러가 발견되기 때문에 개발 과정에서 에러 없이 마음껏 코드를 작성할 수 있지만, 언제 프로그램에 오류가 생길지 모르는 물안감에 휩싸이게 된다.

값 vs 타입

값은 프로그램이 처리하기 위해 메모리에 저장하는 모든 데이터이다. 즉, 프로그램에서 조작하고 다룰 수 있는 어떤 표현이며 다양한 형태의 데이터를 포함한다. 수학적 개념에서 값으로 여겨지는 1, 2, 3과 같은 데이터는 물론이고 1 + 2 같은 식이 반환하는 결과값 3도 값에 해당한다. 프로그래밍 관점에서는 문자열, 숫자, 변수, 매개변수 등이 값에 해당한다. 객체, 함수또한 값이다.

타입스크립트 코드에서 타입과 값을 구분하는 것은 어렵지 않다. 타입은 주로 타입 선언(:) 또는 단언 문 (as)으로 작성하고 값은 할당 연산자(=)로 작성한다.

interface Developer {
    name: string,
    isWorking: boolean;
}

const developer:Developer = { name: "Zig", isWorking: true };

위 예시코드에서는 변수 developer의 타입은 Developer이며, developer에 할당된 값은 { name: "Zip", isworking: true }이다.

값-타입 공간을 혼동하는 문제를 해결하기 위해서는 값과 타입을 구분해서 작성해야 한다.

타입을 확인하는 방법

타입스크립트에서 typeof, instanceof, 그리고 타입 단언을 사용해서 타입을 확인할 수 있다. typeof는 연산하기 전에 피연산자의 데이터 타입을 나타내는 문자열을 반환한다. typeof 연산자가 반환하는 값은 자바스크립트의 7가지 기본 데이터 타입과 Function(함수), 호스트 객체, object 객체가 될 수 이다.

모바일 애플리케이션은 하나의 화면으로 구성되기 보단, 다양한 화면이 상황에 맞게 전환되면서 나타남. : 내비게이션 기능이 가장 중요한 기능 중 하나인 이유

리액트 내비게이션 라이브러리 사용.

리액트 내비게이션

스택 내비게이션, 탭 내비게이션, 드로어 내비게이션 지원.

설치방법 / 대부분 필요한 종속성 설치

npm install --save @react-navigation/native

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

구조

NavigationContainer 컴포넌트 : 내비게이션의 계층 구조와 상태를 관리하는 컨테이너 역할. 최상위 컴포넌트 Navigator 컴포넌트 : 화면을 관리하는 중간 관리자 역할. 여러 개의 Screen 컴포넌트를 자식 컴포넌트로 가지고 있음. Screen 컴포넌트 : 화면으로 사용되는 컴포넌트. name(화면이름)과 component(화면으로 사용될 컴포넌트) 속성을 지정. 이때, 화면으로 사용되는 컴포넌트에는 항상 navigation과 route가 props로 전달.

설정 우선 순위

리액트 내비게이션으로 설정할 수 있는 다양한 속성을 수정하는 방법 Navigator 컴포넌트의 속성으로 수정 (자식 컴포넌트로 존재하는 모든 컴포넌트에 적용) Screen 컴포넌트의 속성으로 수정 (해당 화면에만 적용) 화면에서 사용되는 컴포넌트의 props로 전달되는 navigation을 이용해서 수정 (해당 화면에만 적용)

이때, 작은 범위의 설정일 수록 우선순위가 높음. ex. Screen 컴포넌트 < 화면으로 사용되는 컴포넌트

스택 내비게이션

설치

npm install @react-navigation/stack

일반적으로 가장 많이 사용되는 내비게이션, 현제 화면 위에 다른 화면을 쌓으면서 화면을 이용. ex. 채팅 애플리케이션에서 채팅방에 입장, 여러 목록 중 특정 항목의 상세화면으로 이동

화면 위에 새로운 화면을 쌓으면서(push) 이동하기 때문에 이전 화면을 유지. 따라서 가장 위에 있는 화면을 들어나면(pop) 이전 화면으로 돌아감.

-src/navigations/Stack.js

import React from 'react';
import { createStactNavigator } from '@react-navigation/stack';
import Home from '../screens/Home';
import List from '../screens/List';
import Item from '../screens/Item';

const Stack = createStackNavigator();

const StackNavigation = () => {
    return (
        <Stack.Navigator>
          <Stack.Screen name="Home" components={Home} />
          <Stack.Screen name="List" components={List} />
          <Stack.Screen name="Item" components={Item} />
        </Stack.Navigator>
     );
};

export default StackNavigation;

Screen 컴포넌트의 name은 반드시 서로 다른 값을 가져야 함. 스택 내비게이션에서 첫 번째 화면으로 나오는 화면은 Navigator 컴포넌트의 첫 번째 자식 Screen 컴포넌트. 이외에도 initialRouteName 속성을 이용할 수도 있다.

화면 이동

Screen 컴포넌트의 component로 지정된 컴포넌트는 화면으로 이용되고, navigation이 porps로 전달. navigate 함수 : 원하는 화면으로 이동하는 데 사용

-src/screens/Home.js

const Home = ({ navigation }) => {
    return (
        <Container>
            <Text>Home</Text>
            <Button
                title="go to the list screen"
                onPress={() => navigation.navigate('List')} 
             />
         </Container>
     );
};

Home 화면에서 List 화면으로 이동.

navigate 함수를 이용하여 원하는 화면의 이름을 전달.

만일, 이동하는 화면이 이전 화면의 상세 화면이라면, 어떤 내용을 렌더링해야 하는지 전달받아야 함. navigate 함수에서 두 번째 피라미터에 객체를 전달해서 이동하는 화면에 필요한 정보 전달.

-src/screens/List.js

const List = ({ navigation }) => {
    const _onPress = item => {
        navigation.navigate('Item', { id:item._id, name: item.name });
     };
 ...
 };

List 화면에서 목록을 클릭하면 해당 항목의 정보와 함께 Item 화면으로 이동.

전달된 내용은 컴포넌트의 props로 전달되는 route의 params를 통해 확인.

-src/screens/Item.js

const Item = ({ route }) => {
    return (
        <Container>
            <Text>Item</Text>
            <Text>ID: {route.params.id}</Text>
            <Text>Name: {route.params.name}</Text>
        </Container>
    );
 };

Item 화면에서 전달되는 params를 이용하여 화면에 항목의 id와 name 출력.

화면 배경색 수정

-src/screens/Home.js

const Container = styled.View`
    background-color: #ffffff;
    align-items: center;
`;

Home 화면의 배경색을 흰색으로 설정했을 시, 내비게이션은 화면 전체를 차지하고 있지만 화면으로 사용된 컴포넌트의 영역이 전체를 차지하고 있지 않아 전체가 흰색으로 바뀌지 않을 수 있다.

스타일에 flex: 1을 설정하면 문제를 해결할 수 있다. 하지만 상황에 따라 화면 전체를 차지하지 못하는 경우에는, 리액트 내비게이션의 설정을 수정하여 해결할 수 있다.

-src/navigation/Stack.js

const StackNavigation = () => {
    return (
        <Stack.Navigator
         initialRouteName="Home"
         screenOptions={{ cardStyle: { backgroundColor: '0ffffff' } }}
        >
        ...
        </Stack.Navigator>
    );
};

cardStyle을 사용하면 스택 내비게이션의 화면 배경색 수정 가능.

헤더 수정하기

스택 내비게이션의 헤더는 뒤로 가기 버튼, 타이틀(현재 화면)의 역할. 타이틀 : -기본적으로 Screen 컴포넌트의 name 속성을 사용. -headerTitle 사용. ex. src/navigations/Stack.js

<Stack.Screen
    name="List"
    component={List}
    options={{ headerTitle: 'List Screen' }}
/>

모든 화면에서 같은 타이틀이 나타나도록 수정하기 위해선, Navigator 컴포넌트의 screenOptions 속성에 headertitle을 지정.

스타일 : headerStyle(해더의 배경색 수정), headerTitleStyle(헤더의 타이틀 컴포넌트의 스타일 수정), headerTitleAlign(헤더의 타이틀 정렬) -src/navigations/Stacks.js

const StackNavigation = () => {
    return (
        <Stack.Navigator
          initialRouteName="Home"
          screenOptions={{
           cardStyle: { backgroundColor: '#ffffff' },
           headerStyle: {
            height: 110,
            backgroundColor: '#95a5a6',
            borderBottomMidth: 5,
            borderBottomColor: '#34495e',
           },
           headerTitleStyle: { color: '#ffffff', fontsize: 24 },
           headerTitleAlign: 'center',
          }}
        >
        ...
        </Stack.Navigator>
    );
};

타이틀에 문자가 아닌 다른 것을 렌더링하기 위해선, headerTitle 속성에 컴포넌트를 반환하는 함수를 지정. 이때, 해당 함수의 파라미터로 style(headerTitleStyle로 부터)과 tintColor(headerTintColor로 부터) 등이 포함된 객체가 전달됨. -src/navigations/Stack.js

import { MaterialCommunityIcons } from '@expo/vector-icons';
...

headerTitle: ({ style }) => (
    <MaterialCommunityIcons name="react" style={style} />
);

뒤로가기 버튼 : ios에서는 이전 화면의 타이틀을 버튼의 타이틀로 보여주고 안드로이드에서는 버튼의 타이틀을 보여주지 않음. -src/navigations/Stack.js

<Stack Screen
 name="List"
 component={List}
 options={{
  headerTitle: 'List Screen'
  headerBackTitleVisible: true,
  headerBackTitle: 'Prev',
 }}
/>

둘 다 보이도록 통일. headerBackTitle이 없을 시, 이전 화면의 타이틀이 나오고 headerBackTitle에 입력을 하면 해당 값이 나온다. 이때, 빈 문자열을 입력하면 Back이라는 문자열이 나타남.

headerBackTitleStyle을 이용해 버튼의 타이틀의 스타일 지정 가능. (버튼의 타이틀에만 적용) 버튼의 타이틀과 이미지의 색을 동일하게 변경하기 위해선 headerTintColor 사용.

<Stack Screen
 name="List"
 component={List}
 options={{
  headerTitle: 'List Screen'
  headerBackTitleVisible: true,
  headerBackTitle: 'Prev',
  headerTitleStyle: { fontSize: 24 },
  headerTintColor: '#e74c3c',
 }}
/>

뒤로가기 버튼의 이미지를 변경 -src/navigations/Stack.js

import { Platform } from 'react-native';
...

<Stack Screen
 name="List"
 component={List}
 options={{
  ...
  headerBackImage: ({ tintColor }) => {
      const style = {
     marginRight: 5,
     marginLeft: Platform.OS === 'ios' ? 11 : 0,
    },
    return (
        <MaterialCommunityIcons
          name="keyboard-backspace"
          size={30}
          color={tintColor}
          style={style}
        />
    );
  };
 }}
/>

만일 뒤로 가기 버튼의 이미지가 아닌, 헤더의 왼쪽/오른쪽 버튼 전체를 변경하고 싶다면 headerLeft/Right에 컴포넌트를 반환하는 함수를 지정. -src/screens/Item.js

import React, { useLayoutEffect } from 'react';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import styled from 'styled-components/native'

...

const Item = ({ navigation, route )} => {
    useLayoutEffect(() => {
        navigation.setOptions({
            headerBackTitleVisible: false,
            headerTintColor: '#ffffff',
            headerLeft: ({ onPress, tintColor }) => {
                return (
                    <MaterialCommunityIcons
                      name="keyboard=backspace"
                      size={30}
                      style={{ marginLeft: 11 }}
                      color={tintColor}
                      onPress={onPress}
                    />
                );
            },
            headerRight: ({ tintColor }) => (
                <MaterialCommunityIcons
                  name="home-variant"
                  size={30}
                  style={{ marginRight: 11 }}
                  color={tintColor}
                  conPress={() => navigation.popToTop()}
                />
            ),
    });
}, []);

return (...);
};

useLayoutEffect Hook은 useEffect Hook과 사용법이 동일하며 거의 같은 방식으로 동작, 하지만 컴포넌트가 업데이트된 직후 화면이 렌더링되기 전에 실행된다는 차이점이 있음. 따라서 화면을 렌더링하기 전에 변경할 부분이 있거나 수치 등을 측정해야하는 상황에서 사용.

headerLeft 함수의 파라미터 중 onPress는 뒤로 가기 버튼 기능이 전달. headerRight 함수의 파라미터에는 tintColor만 전달되므로 onPress에 원하는 행동을 정의해야 함. 위의 함수인 popToTop 함수는 현재 쌓여 있는 모든 화면을 내보내고 첫 화면으로 돌아가는 기능.

헤더 감추기 : headerMode - Navigator 컴포넌트의 속성으로 헤더를 렌더링 하는 방법을 설정하는 속성. float(헤더가 상단에 유지, 하나의 헤더 사용)/screen(각 화면하다 헤더를 가지며 화면 변경과 함께 나타나거나 사라짐)/none(헤더가 렌더링 되지 않음) headerShown - 화면 옵션, Navigator 컴포넌트의 screenOption에 설정하면 전체 화면의 헤더가 보이지 않도록 설정. ex.-src/navigations/Stack.js

<Stack.Screen
  name="Home"
  component={Home}
  options={{ headerShown: false }}
/>

이때, ios는 노치 디자인 문제로 화면 일부가 가려지는 문제를 해결하기 위해 아래의 코드 추가 -src/screens/Home.js

const Container = styled.SafeAreaView`
    background-color: #ffffff;
    align-items: centerl
`;

탭 내비게이션

보통 화면 위나 아래에 위치, 탭 버튼을 누르면 버튼과 연결된 화면으로 이동하는 방식

설치방법

npm install @react-navigation/bottom-tabs

-src/navigations/Tab.js

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Mail, Meet, Setting } from '../screens/TabScreens';

const Tab = createBottomTabNavigator();

const TabNavigation = () => {
    return (
        <Tab.Navigator>
          <Tab.Screen name="Mail" component={Mail} />
          <Tab.Screen name="Meet" component={Meet} />
          <Tab.Screen name="Settings" component={Settings} />
        );
};

export default TabNavigation;

-App.js

import TabNavigation from './navigations/Tab';

const App = () => {
    return (
        <NavigationContainer>
          <TabNavigation />
        </NavigationContainer>
    );
};

Stack과 같이 initialRouteName 사용 가능.

탭 바 수정하기

버튼 아이콘 수정 : tabBarIcon 사용 -src/navigations/Tab.js

import { MaterialCommunityicons } from '@expo/vector-icons';
...

const TabIcon = {{ name, size, color }) => {
    return <MaterialCommunityIcons name={name} size={size} color={color} />;
};

const Tab = createBottomTabNavigator();
const TabNavigation = () => {
 return(
     <Tab.Navigator initialRouteName="Settings">
    <Tab.Screen
      name="Mail"
      component={Mail}
      options={{
        tabBarIcon: props => TabIcon({ ...props, name: 'emil' }),
      }}
      ...
    /Tab.Navigator>
 );
};

Stack에서와 같이 tabBarIcon에 컴포넌트를 반환하는 함수를 지정하면 버튼의 아이콘이 들어갈 자리에 해당 컴포넌트를 렌더링. 이때, tabBarIcon에 설정된 함수에는 color, size, focused값을 포함한 객체가 파라미터로 전달. 또한, Screen 컴포넌트마다 탭 버튼 아이콘을 지정하지 않고 한곳에서 모든 버튼의 아이콘을 관리하고 싶을 경우 Navigator 컴포넌트의 screenOptions 속성을 사용하여 관리. -src/navigations/Tab.js

const TabIcon = ({ name, size, color }) => {
    return <MaterialCommunityIcons name={name} size={size} color={color} />;
};

const Tab = createBottomTabNavigator();
const TabNavigation = () => {
 return (
     <Tab.Navigator
      initialRouteName="Settings"
      screenOptions={(({ route }) => ({
        tabBarIcon: props => {
          let name= '';
          if (route.name === 'Mail') name = 'email';
          else if (route.name === 'Meet) name = 'video';
          else name = 'settings';
          return TabIcon({ ...props, name });
        },
      })}
    >
    ...

screenOptions에 객체를 반환하는 함수를 설정하고 함수로 전달되는 route를 이용.

라벨 수정하기 : 버튼 아이콘 아래에 렌더링되는 라벨은 Screen 컴포넌트의 name값을 기본값을 사용. tabBarLabel을 이용하여 변경. 또한, 라벨의 위치를 바꾸고 싶으면 labelPosition의 값을 조정. (below-icon/beside-icon) -src/navigations/Tab.js

<Tab.Navigator
  initialRouteName="Settings"
  tabBarOptions={{ labelPosition: 'beside-icon', showLabel: false }}
>
<Tab.Screen
  name="Mail"
  component={Mail}
  coptions={{
    tabBarLabel: 'Inbox',
    tabBarIcon: props => TabIcon({ ...props, name: 'email' }),
  }}
/>

showLabel을 이용하면 라벨이 렌더링 되지 않음.

스타일 수정

탭 바 배경색의 기본값은 흰색. 화면의 배경색 수정 -src/screens/TabScreens.js

const Container = styled.View`
 flex: 1;
 justify-content: center;
 align-items: centerl
 background-color: #54b7f9;
`;
const StyledText = styled.Text`
 font-size: 30px;
 color: #ffffff;
`;

탭 바 스타일 수정 이때, 탭 버튼의 아이콘은 선택되어 활성화된 상태의 색과 선택되지 않아 비활성화된 상태의 색을 각각 activeTintColor와 inactiveTintColor를 이용해 설정 가능.(라벨과 함께) -src/navigations/Tab.js

const TabNavigation = () => {
    return (
        <Tab.Navigator
          initialRouteName="Settings"
          tabBarOptions={{
            labelPosition: 'besided-icon',
            showLabel: false,
            style: {
              backgroundColor: '#54b7f9',
              borderTopColor: '#ffffff',
              borderTopMidth: 2,
            },
            activeTintColor: '#ffffff',
            inactiveTintColor: '#0B92E9;,
          }}
        >

버튼의 아이콘을 설정하기 위해 barTabIcon에 설정한 함수에는 파라미터로 size, color, focused를 가진 객체가 전달. 이 중 focused는 버튼의 선택된 상태를 나타내는 값인데 버튼의 활성화 상태에 따라 다른 버튼을 렌더링하거나 스타일 변경 가능. -src/navigations/Tab.js

<Tab.Screen
  name="Mail"
  component={Mail}
  options={{
    tabBarLabel: 'Inbox',
    tabBarIcon: props =>
      TabIcon({
       ...porps,
       name: props.focused ? 'email' : 'email-outline',
      }),
  }}
/>

Context API

: 데이터를 전연적으로 관리하고 사용할 수 있도록 하는 기능 부모-자식 컴포넌트로 연결되어 있는 흐름상, 하위 컴포넌트에서 데이터를 요청하고 수정할 때, 건너가야하는 컴포넌트들이 많아 불편하다. 이때, Context API를 이용하면 Context를 생성해 필요한 컴포넌트에서 데이터를 바로 받아올 수 있다.

ex.

const Context = createContext(defaultValve);

Context 오브젝트는 입력된 기본값 외에도 Consumer, Provider 컴포넌트를 가진다.

Consumer 컴포넌트

: 상위 컴포넌트 중 가장 가까운 곳에 있는 Provider 컴포넌트가 전달하는 데이터 이용. 만약, 상위 컴포넌트 중 Provider 컴포넌트가 없다면, 기본값 사용.

• src/contexts/User.js

  import { createContext } from 'react';
  

const UserContext = createContext({ name: 'Jeesoo Kim' });

export default UserContext;

- src/conponents/User.js

import React from 'react'; import UserContext from '../contexts/User';

const User = () => { return ( <UserContext.Consumer> {value => Name: {value.name}} </UserContext.Consumer> ); };

export default User;

-src/App.js

import User from './components/User'; ...

const App = () => { return ( ); };

#### Provider 컴포넌트
: 하위 컴포넌트에 Context의 변화를 알리는 역할.
value를 받아서 모든 하위 컴포넌트에 전달하고, 하위 컴포넌트들은 이때마다 렌더링 됨.

-src/App.js

import User from './components/User'; ...

const App = () => { return ( <UserContext.Provider> </UserContext.Provider> ); };

이렇게 수정한 경우, 오류 메세지가 나온다.
이유 : App 컴포넌트를 Provider 컴포넌트로 감쌌기 때문에 User 컴포넌트에서 사용된 Consumer 컴포넌트는 더이상 Context의 기본값이 아닌 상위 컴포넌트인 Provider 컴포넌트가 전달하는 데이터를 사용하도록 변경. 하지만 아무것도 전달되지 않았기 때문.

import User from './components/User'; ...

const App = () => { return ( <UserContext.Provider value={{ name: 'Jeesoo' }}> </UserContext.Provider> ); };

이렇게 값을 전달해주면 잘 작동한다.

또한, Consumer 컴포넌트는 가장 가까운 Provider 컴포넌트가 전달하는 값을 이용한다.
(Provider 컴포넌트로부터 전달받는 하위 컴포넌트 수에는 제한이 없음.)

#### context 수정
-src/context/User.js

import React, { createContext, useState } from 'react';

const UserContext = createContext({ user: {name: ''}, dispatch: () => {}, });

const UserProvider = ({ children }) => { const [name,setName] = useState('Jeesoo Kim');

const value = { user: { name }, dispatch: setName };
return <UserContext.Provider value={value}>{children}</UserContext.Provider>; 

};

const UserConsumer = UserContext.Consumer;

export { UserProvider, UserConsumer }; export default UserContext;

UserProvider 컴포넌트 : Provider 컴포넌트의 value에 전역적으로 관리할 useState를 함께 전달.
하위에 있는 Consumer 컴포넌트의 자식 함수의 파라미터로 데이터와 데이터를 변경할 수 있는 함수까지 전달.
createContext의 기본값 형태도 UserProvider 컴포넌트의 value로 전달하는 형태와 동일.

-src/components/Input.js

import React, { useState } from 'react'; import {UserConsumer } from '../contexts/User';

const Input = () => { const [name, setName] = useState(''); return ( {({ dispatch }) => { return ( <TextInput value={name} onChangeText={text => setName(text)} onSubmitEditing={() -> { dispatch(name); setName(''); }} placeholder="Enter a name..." autoCapitalize="none" autoCorrect={false} returnKeyType="done" /> ); }} ); };

export default Input;

useState 함수를 통해 name 상태변수를 생성.
TextInput 컴포넌트에 값이 변경될 때마다 name에 반영.
UserConsumer 컴포넌트의 자식 함수에 전달되는 value에는 Context의 값을 변경할 수 있는 dispatch 함수가 함께 전달되고, dispatch 함수를 통해 키보드의 확인 버튼을 누르면 입력된 값으로 Context의 값 변경.


### useContext
: Consumer 컴포넌트의 자식 함수로 전달되던 값과 동일한 데이터 반환.
즉, Consumer 컴포넌트를 사용하지 않고 Context의 내용을 사용 가능하게 함.

위의 코드를 useContext를 사용하는 코드로 수정.

-src/components/User.js

import React, { useContext } from 'react'; import UserContext from '../contexts/User';

const User = () => { const { user } = useContext(UserContext); return Name: {user.name} };

export default User;

-src/components/Input.js

import React, { useState, useContext } from 'react'; import {UserConsumer } from '../contexts/User'; import UserContext from '../contexts/User';

const Input = () => { const [name, setName] = useState(''); const { dispatch } = useContext(UserContext);

return (
    <TextInput
     value={name}
     onChangeText={text => setName(text)}
     onSubmitEditing={() -> {
         dispatch(name);
        setName('');
     }}
     placeholder="Enter a name..."
     autoCapitalize="none"
     autoCorrect={false}
     returnKeyType="done"
    />
);

};

export default Input;

useState

ex.

const [state, setState] = useState(initialState);

호출하면 변수와 수정할 수 있는 세터 함수를 배열로 변환. 관리해야하는 상태의 수만큼 여러 번 사용 가능. 상태가 변경되면 컴포넌트가 변경된 내용을 반영하여 다시 렌더링.

세터함수를 사용하는 방법

1. 세터 함수에 변경될 상태의 값을 전달하는 방법
2. 세터 함수의 피라미터에 함수를 전달하는 방법 ex.

   setState(prevState => {});

전달된 함수에는 변경되기 전의 상태의 값이 피라미터로 전달되고 이 값이 어떻게 수정할지 정의하면 됨. 세터 함수는 비동기로 동작하기 때문에 상태 변경이 여러 번 일어날 경우 상태가 변경되기 전에 또 다시 상태에 대한 업데이트가 실행.

onPress={() => {
    setCount(count + 1);
    setCount(count + 1);
    console.log (`count: ${count}`);
    }}

이때, 버튼을 클릭하면 1씩 증가하고 로그를 확인하면 증가 전의 현재 상태값이 나타난다. 이유 : 세터 함수가 비동기로 동작하기 때문에 세터 함수를 호출해도 상태가 바로 변경되지 않는다.

...
onPress={() => {
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1);
    }}

버튼을 클릭하면 2씩 증가. 상태에 대해 여러 업데이트가 함께 발생할 경우, 세터 함수에 함수를 인자로 전달하여 이전 상태값을 이용.

useEffect

: 컴포넌트가 렌더링될 때마다 원하는 작업이 실행되도록 설정 가능 ex.

useEffect(() => {}, []);

첫 번째 파라미터 함수 : 조건을 만족할 때마다 호출 두 번째 파라미터 배열 : 함수가 호출되는 조건 설정

• 배열이 없을 때 : 렌더링 될 때마다 함수 호출
• 배열이 있을 때 : (함수) 상태의 값을 변경하는 세터 함수가 비동기로 동작하므로 상태의 값이 변경되면 실행할 함수를 정의
• 배열이 비어있을 때 : 처음 렌더링이 될 때만 함수 호출 (컴포넌트가 마운트 될 때)
• 전달하는 함수에서 반환하는 함수를 정리함수라고 하는데, 실행 조건이 빈 배열인 경우 컴포넌트가 언마운트 될 때 정리함수 실행. ex.

  useEffect(() => {
    console.log('\n===== Form Component Mount =====\n');
    return () => console.log('\n===== Form Component Unmount =====\n');
  }, []);

useRef

ex.

const ref = useRef(initialValue);

주의할 점

1. 컴포넌트의 ref로 지정하면 생성된 변수에 값이 저장되는 것이 아니라 변수의 .current에 해당 값을 담는 것.
2. usestate와 달리 useRef의 내용이 변경되어도 컴포넌트는 다시 렌더링 되지 않는다.

   const Form = () => {
   ...
   const refName = useRef(null);
   const refEmail = useRef(null);
   

useEffect(() => { refName.current.focus(); }, []); ... return (

...

<styledTextInput
 ...
 ref={refName}
 returnKeyType="next"
 onSubmitEditing={() => refEmail.current.focus()} />
<styledTextInput
 ...
 ref={refEmail}
 returnKeyType="done" />
 ...
 );

...

refName과 refEmail을 생성해 각각 이름과 이메일을 입력받는 TextInput 컴포넌트의 ref로 설정했고, 키보드의 완료 버튼을 각각 next, done으로 변경.
컴포넌트가 마운트될 때, 포커스가 이름을 입력받는 컴포넌트가 있도록 함.
이름을 입력받은 컴포넌트의 확인 버튼(next)을 클릭하면 이메일을 입력받는 컴포넌트로 포커스로 이동.

### useMemo
: 동일한 연산의 반복 수행을 제거해서 선능 최적화.
ex.

useMemo(() => {}, []);

첫 번째 피라미터 함수
두 번째 피라미터 배열 : 함수 실행 조건, 지정된 값이 변화가 있는 경우에만 함수 호출

const getLength = text => { return text.length; }; ... const Length = () => { const [text, setText] = useState(list[0]); const [length, setLength] = useState('');

const _onPress = () => {
    setLength(getLength(text));
    ++idx;
    if (idx < list.length) setText(list[idx]);
};

... };

배열에 있는 단어의 문자열의 길이를 구하는 코드.
마지막 문자열 이후에는 더 이상 문자열의 변화가 없기 때문에 같은 문자열의 길이를 반복해서 구한다.

const Length = () => { const [text, setText] = useState(list[0]);

const _onPress = () => {
    ++idx;
    if (idx < list.length) setText(list[idx]);
};
const length = useMemo (() => getLength(text), [text]);

... };

useMemo를 사용하여 계산하는 값에 변화가 있는 경우에만 함수가 호출되도록 수정.

인라인 스타일링

: 컴포넌트에 직접 스타일을 입력하는 방식. 객체 형태로 전달 ex.

<View
    style={{
        flex: 1,
        backgroundColar: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
        }}
   >

클래스 스타일링 : 스타일시트에 정의된 스타일을 사용 ex.

<View style={styles.container}>
 ...
</View>
...
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColar: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
  });

여러개의 스타일을 적용하고 싶을 땐, 배열을 사용.

스타일 요소

flex

: width나 height와 달리 항상 비율로 크기 결정. 값으로 숫자를 받으며 값이 0일 때는 설정된 width와 height 값에 따라, 양수인 경우 flex 값에 비례하여 크기 조정.

flexDirection

: 자식 컴포넌트가 쌓이는 방향 설정. coumn - 세로방향, row - 가로 방향, (-reverse은 역순)

justifyContent

: 컴포넌트를 정렬할 방식 설정. flexDirection과 동일한 방향. flex-start - 시작점에서부터 정령 flex-end - 끝에섯부터 정렬 center - 중앙 정렬 space-between - 컴포넌트 사이의 공간을 동일하게 만들어서 정렬 space-around - 컴포넌트 각각의 주변 공간을 동일하게 만들어서 정렬 space-evenly - 컴포넌트 사이와 양 끝에 동일한 공간을 만들어서 정렬

alignItems

: 컴포넌트를 정렬할 방식 설정. flexDirection과 수직인 방향. flex-start - 시작점에서부터 정렬 flex-end - 끝에서부터 정렬 center - 중앙 정렬 stretch - alignItems의 방향으로 컴포넌트 확장 baseline - 컴포넌트 내부의 텍스트 베이스라인을 기준으로 정렬

그림자

shadowColor : 그림자 색 설정 shadowOffset : width와 height값을 지정하여 그림자 거리 설정 shadowOpacity : 그림자의 불투명도 설정 shadowRadius : 그림자의 흐림 반경 설정 -> 하지만 ios에서만 적용 가능.

플랫폼마다 적용 여부가 다른 속성들을 위해 Platform 모듈 이용.

css와 유사하기 때문에 더욱 혼란스러울 수 있다. 이를 방지하기 위해 스타일드 컴포넌트 활용 추천. (설치)

스타일드 컴포넌트

: 자바스크립트 파일 안에 스타일을 작성하는 CSS-in-JS 라이브러리. 스타일이 적용된 컴포넌트

설치방법

npm install styled-components

ex.

import styled from 'styled-components/native';

const MyTextComponent = styled.Text`
    color: #fff;
`;

재사용시 css 사용. ex.

import styled, { css } from 'styled-components/native';

const whiteText = css`
    color : #fff;
    font-size: 14px;
`;
const MyBoldTextComponent = styled.Text`
    ${whiteText}
    font-weight: 600;
`;

const ErrorText = styled(whiteText)`
    font-weight: 600;
    color: red;
`;

이미 작성된 스타일을 상속받아 새로운 스타일드 컴포넌트를 만들 때는 styled(컴포넌트이름)으로 표기.

porps, attrs를 사용하여 스타일 관리 가능

ThemeProvider

JSX 문법

1. 여러개의 요소를 변환할 때에도 하나의 부모로 감싸야한다. ex. View(=div), Fragment(import 필요, 단축 가능)

   <View> </View>
   

<> </>

2. 변수 : 자바스크립트의 변수처럼 전달

const 변수명 = " ";

3. 조건문 : if문, 삼항 연산자, AND/OR 연산자
 ; 컴포넌트 반환이 null -> 허용, undefined -> 오류


4. 주석

{/* */}

태그 안 : //, /* */

5. 스타일링 : 객체 형태, 카멜표기법


### 컴포넌트
: 재사용이 가능한 조립 블록. 화면에 나타나는 UI요소.
ex. 리액트 네이티브 컴포넌트, Button 컴포넌트

### props
 : properties. 부모 컴포넌트로부터 전달된, 상속받은  속성값. 자식 컴포넌트에서는 변경 불가능

#### 속성으로 전달하는 방법
App.js

const MyButton = props => {
    console.log(props);
    return (...);
 };

<MyButton> Children Props </MyButton>

const MyButton = props => {
    return (
        ...
        <Text> {props.children} </Text>
    ...

MyButton.defaultProps = {
    title: 'Button' };

MyButton.propTypes = {
    title: PropsTypes.string.isRequired };

const [state, setState] = useState(initialState);