Tae-Jun

[머신러닝] 01. 머신러닝이란?

Tae-Jun — Sat, 20 Dec 2025 16:08:39 +0900

이 글은 스탠퍼드 대학교의 CS229 강의 자료를 바탕으로 작성되었습니다.

머신러닝이란?

Field of study that gives computers the ability to learn without being explicitly programmed. (Arthur Samuel 1959)
컴퓨터가 명시적으로 프로그래밍되지 않고 학습할 수 있는 능력을 제공하는 학문 분야를 의미한다.

인공지능 > 머신러닝 > 딥러닝

인공지능의 범주 안에 머신러닝이 포함되고 그 안에 딥러닝이 포함된다. 이 글에서는 머신러닝에 대해 설명한다.

머신러닝의 종류

지도학습: 훈련 데이터에 레이블이 포함됨
비지도학습: 훈련데이터에 레이블이 없음 § 준지도학습: 일부 레이블이 있는 데이터를 사용
강화학습: 주어진 환경(environment)에서 행동(action)을 수행하고 관찰하여 그 결과 얻게 되는 보상(reward)을 통해 다음 행동을 결정

Supervised Learning(지도학습)

Regression 데이터 예시

Classification 데이터 예시

위와 같은 데이터가 존재한다고 가정한다.

Learning(학습): 데이터 (x, y)에 대하여, x -> y

Training example : $(x^i,y^i)$

데이터는 i번째 데이터에 대해 x 값에 대한 y 라벨을 위와 같이 정의할 수 있다.

Training data set: $ \left\{ (x^i,y^i); i= 1,...,m \right\}$

학습 데이터 셋은 이러한 데이터가 m개 있다고 가정할 때 위와 같이 정의할 수 있다.

회귀와 분류

Regrssion(회귀): 데이터 x를 통해 y의 값을 예측

Classification(분류): 데이터 x를 통해 y를 분류

머신러닝은 크게 2가지 방법으로 나뉜다. 데이터 x에 대해 y가 어느 정도 값이 될지 예측하는 회귀와 데이터 x에 대해 y가 어디에 속하는지 예측하는 분류이다. 예를 들면, 회귀는 A반의 공부 시간과 성적 점수에 대한 데이터를 가지고 있다고 가정하면 x를 공부 시간, y를 성적 점수로 두고 학습하여 어느 학생의 공부 시간이 주어졌을 때 이 학생의 점수가 몇 점인지를 예측하는 과정이다.

반면 분류는 공부 시간과 합격 여부에 대한 데이터를 가지고 있다고 가정했을 때 x를 공부 시간, y를 합격 여부로 두고 학습하여 어느 학생의 공부 시간이 주어졌을 때 이 학생이 합격할지 여부를 예측하는 과정이다.

즉 지도학습이란, 입력 x와 레이블(정답) y를 함께 훈련에 사용하고, 학습 알고리즘을 통해 새로운 입력 x가 주어질 때 y를 획득하는 과정이다.

지도학습

위 그림을 통해 다시 지도학습을 설명하자면, Training set(데이터셋)이 주어지면 Learning algorithm을 통해 데이터셋을 학습하고 가설 h를 생성한다. 새로운 입력 x가 주어지면 가설 h를 통해 y를 예측한다.

Unsupervised Learning (비지도 학습)

비지도 학습

데이터에 레이블(정답) y 없이 입력 데이터 셋을 통해 데이터의 특징 또는 의미를 추출하는 것을 말한다. 즉 정답이 없는 데이터가 주어졌을 때 특정 알고리즘을 사용하여 데이터 간에 경계를 생성하고 분류하여 데이터의 특징을 추출하는 것을 의미한다.

Hailo Data Compiler 사용

Tae-Jun — Thu, 18 Dec 2025 14:40:19 +0900

YOLOv8n 모델을 기준으로 작성된 글입니다.

Dataflow 컴파일러 흐름

Tensorflow 또는 ONNX 신경망 그래프를 Hailo와 호환되는 표현으로 변환.(har)
전체 정밀도 신경망 모델을 8비트 모델로 양자화
Hailo 장치에서 실행하기 위해 네트워크를 바이너리 파일(HEF)로 컴파일

parsing1(pt → onnx)

yolo export model=./can_plastic.pt imgsz=640 format=onnx opset=11

Hailo에서 opset ≤14만 지원

parsing2(onnx → har)

hailomz parse --hw-arch hailo8 --ckpt ./small_best.onnx yolov8n

yolov8n은 hailo model zoo에서 지원하기 때문에 hailomz 명령어로 쉽게 컴파일이 가능하다.

양자화 및 최적화 (har → optimized.har)

hailo optimize --hw-arch hailo8 --use-random-calib-set ./yolov8n.har

hailo에서는 calibset data은 학습에 사용된 1024장의 데이터를 사용하는 것을 권장한다. 그러나 편의를 위해 random-calib-set을 사용하여 양자화 및 최적화를 진행한다.

컴파일

hailomz compile yolov8n --hw-arch hailo8 --har ./yolov8n_optimized.har

최종적으로 .hef 파일이 생성되며 이를 hailo가 장착된 Raspberry Pi 5에 옮겨 추론한다.

Hailo 관련 SW 설치

Tae-Jun — Thu, 18 Dec 2025 14:33:25 +0900

raspberryPi 5
Hailo-8

Hailo는 모델을 Hailo 환경에 맞추어 컴파일하는 Model Build Environment 부분과 컴파일된 모델을 실행하는 Runtime Environment로 나뉜다. Model Build Environment는 양자화 시 많은 GPU 사용을 필요로 하기 때문에 workstation에서 진행해야 하며 Runtime Environment는 실제 모델이 구동되는 RPI5에 설치되어야 한다.

Model Build Environment

목적: 모델 컴파일
위치: 워크스테이션(GPU 사용이 가능한 컴퓨터)

Runtime Environment

목적: 모델 추론
위치: RaspberryPi 5

Model Build 환경 설치(hailo sdk suite)

도커 설치가 선행되어야 함

Nvidia-docker2 설치

distribution=$(. /etc/os-release;echo $ID$VERSION_ID) \
&& curl -s -L https://nvidia.github.io/nvidia-docker/gpgkey | sudo apt-key add - \
&& curl -s -L \
https://nvidia.github.io/nvidia-docker/$distribution/nvidia-docker.list \
| sudo tee /etc/apt/sources.list.d/nvidia-docker.list

sudo apt-get update
sudo apt-get install -y nvidia-docker2
sudo systemctl restart docker

docker 파일 설치

hailo developer zone 홈페이지에서 도커 이미지 파일을 설치(zip 파일)

unzip hailo_ai_sw_suite_<version>.zip

docker 파일 실행

./hailo_ai_sw_suite_docker_run.sh

Runtime 환경 설치

시스템 업그레이드

sudo apt update && sudo apt full-upgrade

Gen 3.0 속도 적용

PCIe 전송 인터페이스를 Gen 3.0으로 적

sudo vi /boot/firmware/config.txt.
# 아랫줄 추가
dtparam=pciex1_gen=3

라이브러리 설치

sudo apt install hailo-all

Hailo 커널 장치 드라이버 및 펌웨어
HailoRT 미들웨어 소프트웨어
Hailo Tappas 핵심 후처리 라이브러리
Hailo ricam-app 후처리 소프트웨어 데모 단계

라이브러리 설치 확인

hailortcli fw-control identify

만약 Error 발생 시 update, full-upgrade와 라이브러리 재설치 진행

[k3s] image가 사라지는 문제

Tae-Jun — Sun, 20 Jul 2025 20:01:29 +0900

base image

베이스 이미지는 레지스트리/이미지:태그로 구성된다. 예를 들어, " nvcr.io/nvidia/tensorflow:23.11-tf2-py3"와 같은 베이스 이미지가 있다면 아래와 같다.
레지스트리: nvcr.io/nvidia
이미지: tensorflow
태그: 23.11-tf2-py3
이미지는 1bit라도 바뀌면 달라지는 다이제스트라는 고유한 해시값(SHA256)으로 구분된다. 즉 같은 이미지명, 태그명이더라도 다이제스트는 달라질 수 있다.

이미지 pull 정책

컨테이너 생성 시 이미지 pull 정책은 3가지가 존재한다.
IfNotPresent
이미지가 로컬에 없는 경우만 pull한다. 즉 이미지의 이름, 태그명이 같으면 pull하지 않는다. 다이제스트를 질의하지 않으므로 이미지가 업데이트 된 경우 같은 이름, 태그명이더라도 다른 이미지이기 때문에 이미지의 업데이트 여부는 확인할 수 없다.

Always
컨테이너를 실행할 때마다 레지스트리에 이름, 다이제스트가 있는지 질의한다. 일치하는 다이제스트를 가진 컨테이너 이미지가 이미 로컬에 있다면 캐시된 이미지를 사용한다. 그렇지 않으면 검색된 다이제스트를 가진 이미지를 pull한다.
즉 항상 레지스트리에 이미지가 있는지 검색한 후, 로컬 캐시에 다이제스트가 있는지 확인한 후 이미지 pull을 결정한다.

태그명이 lastest라면 이미지의 다이제스트가 변경될 수 있지만 사용자는 이를 알 수 없다. 따라서 always를 사용하지 않는다면 lastest 태그 사용을 지양하는 것이 좋다.

Never
이미지를 pull하려고 하지 않는다. 만약 이미지가 로컬에 존재한다면 컨테이너를 실행하며, 존재하지 않으면 실행에 실패한다.

Garbage Collection

kubelet에는 클러스터 자원을 정리하기 위한 GC가 존재한다. 사용되지 않는 이미지에 대한 가비지 수집을 5분마다, 컨테이너에 대한 가비지 수집을 1분마다 수행한다.
가비지 수집을 결정하는 기준은 아래와 같다.
HighThresholdPercent
이미지 디스크 사용량이 이 값을 초과하면 마지막으로 사용된 시간을 기준으로 오래된 이미지 순서대로 이미지를 삭제한다.

LowThresholdPercent
GC는 이 값에 도달할 때까지 이미지를 삭제한다.

이러한 변수와 더불어 식별할 수 없고, 삭제된 컨테이너들을 오래된 순서대로 가비지 수집을 수행한다.

이미지가 사라지는 문제

로그를 살펴보면 현재 highThreshold가 85, lowThreshold가 80으로 설정되어 있다. 현재 사용량이 highThreshold를 초과하였고 GC는 실행중이 아닌 이미지를 삭제시키고 있었다. 문제를 해결하기 위한 방법은 3가지가 존재한다.
1. GC 정책 상향 조정
임계값을 85보다 높은 값으로 설정하여 GC가 트리거 되지 않게 한다. 그러나 이 값을 변경하면 디스크가 가득 찰 수 있고 이미지 pull 시도도 실패할 수 있다.

2. 디스크 용량 확보
안 쓰는 Docker 이미지를 제거하거나 캐시 저장 위치 디스크를 변경한다.
현재 사용하고 있는 이미지는 모두 사용중인 이미지이고 캐시 저장 위치 디스크를 변경할 수 있는 권한이 없다.

3. DaemonSet 설정:
DaemonSet으로 Sleep 상태의 컨테이너를 띄워 이미지가 사용중인 상태로 변경한다.
GC는 사용되지 앟는 이미지에 대해 가비지 수집을 수행한다. 따라서 이미지를 사용중인 상태로 변경하면 GC가 해당 이미지를 제거하지 못한다.

현재 실행 가능한 방법이 3번밖에 존재하지 않기 때문에 DaemonSet 설정을 수행했다.

DaemonSet 설정

python의 kubernetes api를 사용했다.

class KubeUtils:
    def __init__(self):
        config.load_kube_config() # local에서 실행 시
        #config.load_incluster_config() # container에서 실행 시
        self.CoreApi = client.CoreV1Api()
        self.AppApi = client.AppsV1Api()
        self.batchApi = client.BatchV1Api()
        self.rbac_api = client.RbacAuthorizationV1Api()

    def applyDaemonSet(self):
        metadata = client.V1ObjectMeta(
            name="image-prepull",
            labels={"app": "image-prepull"},
            namespace="default"
        )

        container = client.V1Container(
            name="puller",
            image="nvcr.io/nvidia/tensorflow:23.11-tf2-py3",
            command=["sleep", "3600"]
        )

        # Pod 템플릿 정의
        pod_spec = client.V1PodSpec(
            containers=[container],
            tolerations=[client.V1Toleration(operator="Exists")],  
            restart_policy="Always",
            node_selector={"role": "workstation"} # workstation 노드만 적용
        )

        template = client.V1PodTemplateSpec(
            metadata=client.V1ObjectMeta(labels={"app": "image-prepull"}),
            spec=pod_spec
        )

        # DaemonSet 정의
        daemonset_spec = client.V1DaemonSetSpec(
            selector=client.V1LabelSelector(match_labels={"app": "image-prepull"}),
            template=template
        )

        daemonset = client.V1DaemonSet(
            api_version="apps/v1",
            kind="DaemonSet",
            metadata=metadata,
            spec=daemonset_spec
        )

        # DaemonSet 생성
        apps_v1 = client.AppsV1Api()
        apps_v1.create_namespaced_daemon_set(namespace="default", body=daemonset)

        print("DaemonSet 'image-prepull' 생성 완료")

role이 workstation인 node에만 DaemonSet을 적용하였다.
nvcr.io/nvidia/tensorflow:23.11-tf2-py3 이미지로 컨테이너를 실행하며 3600초 동안 sleep 후 컨테이너를 재실행한다.

DaemonSet 실행 후 이미지가 삭제되지 않는 것을 확인할 수 있다.

추후 workstation 재설정 시 docker의 캐시 디스크를 따로 확보할 예정이다.

[YOLO] COCO 데이터 형식에서 YOLO 데이터 형식으로 바꾸기

Tae-Jun — Tue, 11 Feb 2025 03:27:55 +0900

data
	ㄴ train
		-annotations.json
		-이미지’s…
	ㄴ valid
		-annotations.json
		-이미지’s…

YOLO 형식으로 바꾸기 전 COCO 형식으로 된 데이터의 폴더 구조이다. 위 데이터를 아래와 같은 형식으로 바꾸려고 한다.

datasets
	ㄴ images
		ㄴ train
			- 이미지's...
		ㄴ val
			- 이미지's...
	ㄴ labels
		ㄴ train
			- 라벨's...
		ㄴ val
			- 라벨's...

위와 같은 COCO 데이터 형식을 YOLO 데이터 형식으로 바꾸는 코드는 아래와 같다.

import json
import os
import shutil

def cocoToYolo(coco_json_path, output_label_dir):
    # COCO JSON 파일 로드
    with open(coco_json_path, "r") as f:
        coco_data = json.load(f)

    # 카테고리 매핑 (클래스 ID -> 이름)
    category_mapping = {cat["id"]: cat["name"] for cat in coco_data["categories"]}
    # 이미지 ID 매핑
    image_id_mapping = {img["id"]: img["file_name"] for img in coco_data["images"]}

    # 어노테이션 변환
    for ann in coco_data["annotations"]:
        img_id = ann["image_id"]
        class_id = ann["category_id"]
        segmentation = ann["segmentation"]

        if img_id not in image_id_mapping or not segmentation:
            continue  # 해당 이미지가 없거나 세그멘테이션 데이터가 없으면 건너뜀

        # 파일명 생성
        image_name = image_id_mapping[img_id]
        label_file_path = os.path.join(output_label_dir, image_name.replace(".jpg", ".txt"))

        # 세그멘테이션 좌표를 YOLO 형식으로 변환
        yolo_lines = []
        for poly in segmentation:
            normalized_poly = [
                f"{x / coco_data['images'][img_id]['width']} {y / coco_data['images'][img_id]['height']}"
                for x, y in zip(poly[::2], poly[1::2])
            ]
            yolo_lines.append(f"{class_id} " + " ".join(normalized_poly))

        # YOLO 레이블 파일 저장
        with open(label_file_path, "w") as f:
            f.write("\n".join(yolo_lines))

def moveImg(origin_path, moved_path):
    # train 이미지 이동
    for file in os.listdir(origin_path):
        if file.lower().endswith((".jpg", ".png", ".jpeg")):  # 이미지 파일만 이동
            shutil.move(os.path.join(origin_path, file), os.path.join(moved_path, file))

def convertToZeroIndex():
    label_dir = "./datasets/labels/"
    # 모든 .txt 파일 가져오기
    for subset in ["train", "val"]:
        path = os.path.join(label_dir, subset)
        for file_name in os.listdir(path):
            if file_name.endswith(".txt"):
                file_path = os.path.join(path, file_name)

                # 파일 읽고 클래스 ID 변경
                with open(file_path, "r") as f:
                    lines = f.readlines()

                new_lines = []
                for line in lines:
                    parts = line.strip().split()
                    if len(parts) > 0 and parts[0] == "1":
                        parts[0] = "0"  # 클래스 ID를 0으로 변경
                        new_lines.append(" ".join(parts))
                    else:
                        print("error 발생")
                # 변경된 내용 저장
                with open(file_path, "w") as f:
                    f.write("\n".join(new_lines))

# 데이터 폴더 경로
data_folder_path = "./data"

#경로 설정
coco_train_path = data_folder_path + "/train/_annotations.coco.json"
coco_valid_path = data_folder_path + "/valid/_annotations.coco.json"
output_label_dirs = ["./datasets/images/train", "./datasets/images/val", "./datasets/labels/train", "./datasets/labels/val"]  # YOLO 레이블이 저장될 폴더

# 폴더 생성
for path_dir in output_label_dirs:
    os.makedirs(path_dir, exist_ok=True)

# Convert COCO TO YOLO
for p in [(coco_train_path, 2), (coco_valid_path, 3)]:
    cocoToYolo(p[0], output_label_dirs[p[1]])

# move Img
moveImg(data_folder_path+"/train", output_label_dirs[0])
moveImg(data_folder_path+"/valid", output_label_dirs[1])

convertToZeroIndex() # 클래스 1 -> 0으로 변경
shutil.rmtree(data_folder_path) # 기존 폴더 삭제

[YOLOv8] custom training하여 바닥 Instance Segmentation하기

Tae-Jun — Mon, 10 Feb 2025 15:25:48 +0900

데이터

데이터 다운로드

Download Dataset → Download dataset → Continue → Format을 COCO Segmentation으로 변경 → Continue

데이터 정보

TRAIN SET: 930개

VALID SET: 399개

데이터 형식: COCO

LABEL NAME: tehel

데이터 구조

data
	ㄴ train
		-annotations.json
		-이미지’s…
	ㄴ valid
		-annotations.json
		-이미지’s…

데이터 전처리

YOLOv8에서 COCO 데이터 형식을 지원한다고 들었으나,, 어떤 자료에서도 COCO형식 그대로 학습 하는걸 찾지 못했다. 따라서 COCO형식의 데이터를 YOLO형식의 데이터로 변환하여 학습했다. 데이터를 다운 받은 후 아래 파일을 실행하면 YOLO형식으로 변환된 데이터를 얻을 수 있다.

convertData.py(코드 설명)

1. 새로 생성할 데이터를 담을 폴더 생성
2. COCO DATA TYPE -> YOLO DATA TYPE
3. 이미지를 새로운 폴더로 이동
4. 1 인덱스 -> 0 인덱스(annotation file의 클래스)
5. 기존 데이터 폴더 삭제

변환된 데이터의 구조는 아래와 같다.

datasets
	ㄴ images
		ㄴ train
			- 이미지's...
		ㄴ val
			- 이미지's...
	ㄴ labels
		ㄴ train
			- 라벨's...
		ㄴ val
			- 라벨's...

학습 및 예측

data.yaml

학습된 데이터셋의 정보를 알려줄 data.yaml 작성한다.

data.yaml

path: [데이터셋의 경로]/datasets
train: images/train  # 훈련 이미지 경로
val: images/val   # 검증 이미지 및 경로

nc: 1 # 클래스의 개수
names: ["tehel"] #클래스의 이름

ultralytics와 YOLOV8

ultralytics를 통해 쉽게 yolov8을 학습 시킬 수 있으며 아래 명령어를 통해 다운받을 수 있다.

pip install ultralytics

yolov8의 Instance Segmentation에는 총 5가지의 모델이 존재하며 n에서 x모델로 갈수록 성능은 좋아지고 모델은 무거워진다.

이 문서에서는 yolov8n-seg.pt 모델을 기준으로 설명한다.

학습

아래 코드를 통해 모델을 불러오고 학습한다.

from ultralytics import YOLO

model = YOLO("yolov8n-seg.pt")  # Segmentation 모델
model.train(data="./data.yaml", epochs=50, imgsz=640)

예측

학습이 완료된 모델은 runs/segment/train/weights에 저장된다.

저장된 모델을 불러와 예측하는 코드는 아래와 같다.

from ultralytics import YOLO

model = YOLO("last.pt")  # Segmentation 모델
model.predict(source = "ASD.mp4", save=True, show_labels=True, show_conf=True, conf=0.5, save_txt=False, save_crop=False, line_width=2)

예측이 완료된 결과물

예측이 완료된 결과물은 runs/segment/predict에 저장된다.

[docker] 컨테이너 상에서 gpu 사용량 확인 in jetson nano

Tae-Jun — Thu, 12 Dec 2024 02:48:28 +0900

 tegrastats

jetson nano에서 gpu 사용량을 확인하기 위해선 tegrastats 명령어를 사용하면 된다.

그러나 컨테이너 상에서 tegrastats 명령어를 사용하면 command not found 에러가 발생한다.

이는 컨테이너 내부에서 /usr/bin/tegrastats:/usr/bin/tegrastats에 접근하지 못하기 때문이다. 따라서 컨테이너 실행 시 이 폴더를 마운트 해주면 tegrastats 명령어를 사용할 수 있다.

sudo docker run -it 
    -v $(pwd):/workspace 
    -v /usr/bin/tegrastats:/usr/bin/tegrastats 
    --name mlops-platform-env 
    --privileged 
    --runtime=nvidia 
    mlops-platform-env

[docker] 컨테이너 내에서 flask 서버 구동 시 외부 접속하기

Tae-Jun — Thu, 12 Dec 2024 02:41:45 +0900

docker 컨테이너 내에서 flask 서버를 구동시키고 내부망의 다른 컴퓨터에서 접속 시 자꾸 연결이 거부됐다.

해결 방법은 간단했다. 컨테이너 실행 시 flask 서버 포트를 매핑해주면 해결된다.

나는 5000번 포트를 사용할거기 때문에 -p 5000:5000 옵션을 줬다.

sudo docker run -it --name mlops-platform-env -p 5000:5000 mlops-platform-env

또한 기본적으로 Flask 코드에서 host = '0.0.0.0'으로 해줘야 외부에서 접속이 가능하다.

if __name__ == "__main__":
    host = '0.0.0.0'
    port = "5000"
    app.run(debug=True, host=host, port=port)

JWT Refresh Token을 이용한 로그인 (with Node.js, React Native) - 2. 클라이언트

Tae-Jun — Wed, 21 Jun 2023 07:34:37 +0900

서버 구현

JWT Refresh Token을 이용한 로그인 (with Node.js, React Native) - 1. 서버

진행중인 프로젝트에 로그인 기능을 구현하기 위해 JWT를 사용하여 refresh token/ access token을 구현했다. 글이 길어져 서버 구현 / 클라이언트 구현으로 나누어 작성한다. 또한 JWT의 개념적인 내용보

tae-jun.tistory.com

지난 서버 구현에 이어 React Native로 로그인 과정을 구현에 대한 글을 작성한다.

모든 구현 내용을 블로그에 담을 순 없어서 화면 구성에 대한 내용은 제외하고 로그인 로직에 중점을 맞추어 글을 작성했다.

1. 라이브러리 설치

# 내부 저장소 사용
npm install @react-native-async-storage/async-storage

# http 통신 사용
npm install axios

# 토스트 사용
npm install react-native-toast-message

# 화면 전환(navigation) 사용
npm install @react-navigation/native 
npm install @react-navigation/stack

2. tokenUtils.js

import AsyncStorage from "@react-native-async-storage/async-storage";
import axios from "axios";
import { Toast } from "react-native-toast-message/lib/src/Toast";
const URL = 'http://IP:PORT'

const showToast = (text) =>{
    Toast.show({
        type: 'error',
        position: 'bottom',
        text1: text,
      });
};

export const getTokens = (email, password, navigation) => {
    axios.post(`${URL}/login`,
    {
      "userId":email,
      "userpw":password
    })
    .then(res =>{{
          //accessToken, refreshToken 로컬에 저장
          if (res.status === 200){
            AsyncStorage.setItem('Tokens', JSON.stringify({
              'accessToken': res.data.accessToken,
              'refreshToken': res.data.refreshToken,
              'userId': res.data.userId
            }))
            navigation.navigate('HomeTab');
          }

    }})
    .catch(error =>{
            if(error.response.status === 401){
                showToast(error.response.data)
            }
            else{
                showToast("알수없는 오류")
            } 
          
    })
};

const getTokenFromLocal = async () => {
  try {
    const value = await AsyncStorage.getItem("Tokens");
    if (value !== null) {
      return JSON.parse(value)
    }
    else{
      return null;
    }
  } catch (e) {
    console.log(e.message);
  }
};


export const verifyTokens = async (navigation) => {
  const Token = await getTokenFromLocal();

  // 최초 접속
  if (Token === null){
    navigation.reset({routes: [{name: "AuthPage"}]});
  }
  // 로컬 스토리지에 Token데이터가 있으면 -> 토큰들을 헤더에 넣어 검증 
  else{
    const headers_config = {
      "refresh": Token.refreshToken,
      Authorization: `Bearer ${Token.accessToken}`   
    };

    try {
      const res = await axios.get(`${URL}/refresh`, {headers: headers_config})

      // accessToken 만료, refreshToken 정상 -> 재발급된 accessToken 저장 후 자동 로그인
      AsyncStorage.setItem('Tokens', JSON.stringify({
        ...Token,
        'accessToken': res.data.data.accessToken,
      }))
      navigation.reset({routes: [{name: "HomeTab"}]});

    } catch(error){
      const code = error.response.data.code; 

      // accessToken 만료, refreshToken 만료 -> 로그인 페이지
      if(code === 401){
        navigation.reset({routes: [{name: "AuthPage"}]});
      }
      // accessToken 정상, refreshToken 정상 -> 자동 로그인
      else{
        navigation.reset({routes: [{name: "HomeTab"}]});
      }
    }

  }
};

- showToast(text)

text를 인자로 받아 해당 text를 토스트로 띄워주는 함수이며 해당 라이브러리에 대한 자세한 사용법은 링크에 설명되어 있다.

- getTokens(email, password, navigation)

사용자가 로그인 버튼을 클릭 했을 때 email, password, navigation을 인자로 받아 토큰을 로컬 저장소에 저장하고 화면을 전환해주는 함수이다.

1. axios.post() 함수를 이용하여 서버의 URL/login 경로로 email, password 정보를 json형식으로 담아 post한다.

2. 서버로부터 응답을 받아 상태 코드가 200(정상)이면 AsyncStorage.setItem() 함수를 통해 로컬 저장소에 accessToken, refreshToken, userId를 Tokens라는 이름으로 저장한 후 홈화면으로 이동한다.

3. 상태 코드가 200이 아니라면 showToast() 함수를 호출하여 사용자에게 오류가 발생했다는 토스트를 띄운다.

- getTokenFromLocal()

로컬 저장소에서 accessToken, refreshToken, userId를 가져오는 함수이다.

AsyncStorage.getItem("Tokens")를 호출하여 Tokens라는 이름으로 저장된 데이터를 가져온다. 오류 없이 데이터를 가져오면 해당 데이터를 JSON 객체로 변환하여 반환하고 오류가 발생하여 가져온 데이터가 없다면 null을 반환한다.

- verifyTokens(navigation)

splash 화면에서 토큰값을 검증하는 함수이다.

1. getTokenFromLocal() 함수를 호출하여 로컬 저장소에 있는 토큰값을 불러온다.

2. 만약 Token값이 null이라면 앱에 최초 접속했다는 의미이므로 로그인 화면으로 전환한다.

3. Token값이 있다면 헤더에 refreshToken과 accessToken을 넣어 서버의 URL/refresh 경로로 get 요청을 보낸다.

4. 이때 accessToken이 만료되고 refreshToken이 정상이면 서버에서 상태 코드(200)과 함께 새로운 accessToken을 발급하여 응답을 보내오고 재발급된 accessToken은 로컬 저장소에 저장시킨 후 홈화면으로 이동하여 자동 로그인한다.

5. 서버에서 상태 코드(401)로 응답한다면 accessToken이 만료되고 refreshToken도 만료되었다는 의미이며 이는 다시 로그인하여 새로운 accessToken, refreshToken을 발급 받아야 한다. 따라서 로그인 페이지로 이동한다.

6. 서버에서 401 이외의 상태 코드로 응답한다면 accessToken은 정상, refreshToken도 정상이므로 홈화면으로 이동해 자동 로그인한다.

AuthStackNavigator.js

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";

import { HomeTapNavigator } from "./HomeTabNavigator";
import AuthPage from "../pages/AuthPage";
import SignUpPage from "../pages/SignUpPage";
import SplashPage from "../pages/SplashPage";
import ResendMailPage from "../pages/ResendMailPage";

const AuthStackNavigator = ({navigation}) => {
    const Stack = createStackNavigator();

    return (
        <Stack.Navigator>
            <Stack.Screen name='SplashPage' component={SplashPage} options={{ headerShown: false}} navigation={navigation}/>
            <Stack.Screen name='AuthPage' component={AuthPage} options={{ headerShown: false}} navigation={navigation}/>
            <Stack.Screen name='HomeTab' component={HomeTapNavigator} options={{ headerShown: false }}/>
            <Stack.Screen name='SignUpPage' component={SignUpPage} options={{ headerShown: false}}/>
            <Stack.Screen name='ResendMailPage' component={ResendMailPage} options={{ headerShown: false}}/>
        </Stack.Navigator>
  );
}

export { AuthStackNavigator };

SignUpPage와 ResendMailPage는 회원가입에 필요한 화면이므로 로그인 과정에는 사용하지 않는다.

Stack navigator에 대한 자세한 사용법은 링크를 참고하면 된다.

SplashPage.js

import React, { useEffect } from 'react';
import { Text, View, } from 'react-native';
import { verifyTokens } from '../../utils/networks/tokenUtils';

const SplashPage = ({navigation}) => {
    useEffect(()=>{
        verifyTokens(navigation);
    },[])
    
  return (
    <View style ={{padding: 50}}>
      <Text style={{padding: 10, fontSize: 42}}>
        SPLASH
      </Text>
    </View>
    );
}

export default SplashPage;

앱에 최초 접속했을 때 보여지는 화면이다.

userEffect() 함수를 사용하여 화면이 처음 그려질 때 verifyTokens() 를 호출하여 토큰을 검증하고 상황에 맞게 홈화면, 로그인 페이지로 이동한다.

AuthPage.js

import { View} from 'react-native';
import { getTokens } from '../../utils/networks/tokenUtils';
import AuthTemplate from "../templates/AuthTemplate";
import { useState } from "react";

const AuthPage = ({navigation}) => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    
    const onPressLoginButton = () =>{
        getTokens(email, password, navigation);
    }

    const onPressButton = () =>{
      navigation.navigate('SignUpPage');
      }
    const onPressResendMail = () =>{
      navigation.navigate('ResendMailPage');
    }

  return (
    <View style ={{padding: 50}}>
      <AuthTemplate 
        onPressButton={onPressButton} 
        onPressLoginButton={onPressLoginButton}
        onPressResendMail={onPressResendMail}
        email={email}
        setEmail={setEmail}
        password={password}
        setPassword={setPassword}
        />
    </View>
    );
}

export default AuthPage;

로그인 페이지이며 useState()를 사용하여 email과 password에 대한 상태값을 갖는다. 사용자가 TextInput에 이메일과 패스워드를 입력하면 email, password의 상태값이 변하며 사용자가 로그인 버튼을 누르면 두 상태값을 getTokens()함수에 넣어 호출하여 로그인 과정을 진행한다.

결과

로그인

자동로그인

참고

React Native : AsyncStorage 쉽게 사용해보기. (tistory.com)

[ RN] 로그인 및 JWT (velog.io)

JWT Refresh Token을 이용한 로그인 (with Node.js, React Native) - 1. 서버

Tae-Jun — Wed, 21 Jun 2023 05:30:16 +0900

클라이언트 구현

JWT Refresh Token을 이용한 로그인 (with Node.js, React Native) - 2. 클라이언트

서버 구현 JWT Refresh Token을 이용한 로그인 (with Node.js, React Native) - 1. 서버 진행중인 프로젝트에 로그인 기능을 구현하기 위해 JWT를 사용하여 refresh token/ access token을 구현했다. 글이 길어져 서버

tae-jun.tistory.com

진행중인 프로젝트에 로그인 기능을 구현하기 위해 JWT를 사용하여 refresh token/ access token을 구현했다.
글이 길어져 서버 구현 / 클라이언트 구현으로 나누어 작성한다.
또한 JWT의 개념적인 내용보다 구현에 중심을 두어 글을 작성했다.

JWT를 이용한 로그인 과정

로그인 과정 순차 다이어그램

1. 사용자가 id, pw를 입력한다.
2. 클라이언트는 사용자의 id와 pw를 서버에 POST한다.
3. 서버는 회원 DB를 통해 사용자 id와 pw가 일치한지 확인한 후 accessToken과 refreshToken을 발급한다.
4. 토큰 DB에 사용자 id(FK, PK), refresh Token을 저장한다.
5. 생성된 accessToken과 refreshToken을 클라이언트에 반환한다.

accessToken 재발급 과정

재발급 과정 순차 다이어그램

그림이 조금 이상하지만..
클라이언트는 로그인 화면을 보여주기 전에 spalsh화면을 띄워 사용자의 token값이 있는지, 그 값이 유효한지 검사한다.
그 중 token값이 유효한지 확인하기 위해 서버에 refresh 요청을 보낸다. 그 과정은 아래와 같다.

1. 클라이언트에서 재발급 요청을 보낸다. 이때 헤더에 accessToken과 refreshToken을 담아서 보낸다.
2. 서버는 받은 accessToken 값을 검증한다. 이때 accessToken값이 조작되거나 분실되어 decode값이 존재하지 않는다면 권한이 없다는 에러 메세지를 클라이언트에게 보낸다.
3. 클라이언트에게 받은 refreshToken값을 검증한다.
4. 새로운 accessToken을 발급될 조건이라면 새로운 accessToken을 발급한다.(조건은 아래에서 설명한다.)
5. 발급된 accessToken을 클라이언트에게 전송한다.

새로운 accessToken이 발급 시 시나리오
1. accessToken 만료되지 않은 경우 = 토큰을 새로 발급 받을 필요 X
2. accessToken이 만료되고 refreshToken도 만료된 경우 = refresh토큰도 새로 발급 받아야 되기 때문에 새로 로그인해야 함
3. accessToken이 만료되고 refreshToken은 만료되지 않은 경우 = 새로운 accessToken 발급

DB 테이블

token 테이블

Email	varchar(200)	NOT NULL	PK
Token	varchar(5000)	NOT NULL

user 테이블

Email	varchar(200)	NOT NULL	PK
UserName	varchar(10)	NOT NULL
PassWord	varchar(30)	NOT NULL
AuthStatus	tinyint(1)	NOT NULL
AuthToken	varchar(5000)	NULL

node.js를 이용한 JWT 발급 과정 예제

1. 라이브러리 설치

# package.json 설치
npm init -y

# .env 파일 사용
npm install dotenv

# jwt 사용
npm install jsonwebtoken

# express 사용
npm install express

# mysql2 사용
npm install mysql2

2. 폴더 구조

controller: 메인 로직 작성
utils: 메인 로직에 필요한 모듈 작성
server.js: 라우터
.env: 시크릿 키 보관

mail과 관련된 파일은 회원가입 시 이메일 인증에 관한 로직으로 추후 글을 작성할 예정이다.

3. .env

ACCESS_TOKEN_SECRET=defaultkey

.env 파일에 SECRET_KEY를 저장한다. 시크릿 키로 사용자 정보를 변환할 수 있기 때문에 절대 외부로 유출되면 안된다.

4. server.js

const user = require('./controller/user'); # controller import
const express = require('express'); # express import

const app = express()
const port = 3000

// body 데이터를 json형식으로 사용
app.use(express.json())

// 3000번 포트로 서버 실행
app.listen(port, () =>{
    console.log(`app listening on port ${port}`)
})

// 기본 경로
app.get('/', (req, res) =>{
    res.send('Hello world!')
})

// 로그인 경로
app.post('/login',user.login)

// access 토큰 재발급 경로
app.get('/refresh',user.refresh)

로그인 시 IP/login 경로를 사용하고, 토큰 재발급 시 IP/refresh 경로를 사용한다.

5.utils/tokenUtils.js

require('dotenv').config(); # dotenv import
const getConnection = require('../utils/DbUtils');
const jwt = require('jsonwebtoken'); # jsonwebtoken(jwt) import
const JWT_KEY = process.env.ACCESS_TOKEN_SECRET # SECRET KEY import

// accessToken 발급 함수
exports.makeToken = (Object) =>{
    const token = jwt.sign(
        Object,  
        JWT_KEY, 
        {expiresIn: "2m"}
    );
    console.log(token)
    return token;
};

// refreshToken 발급 함수
exports.makeRefreshToken = () =>{
    const refreshToken = jwt.sign(
        {},  
        JWT_KEY, 
        {
            algorithm: "HS256",
            expiresIn: "10m"
        }
    );
    console.log(refreshToken)
    return refreshToken;
};

// refresh token 유효성 검사
exports.refreshVerify = async (token, userId) => {

  const sql = (email) =>{
    return `select token from token where Email = '${email}';`
  }
  try {
    // db에서 refresh token 가져오기(DB에 userID로 조회)
    const result = await getConnection(sql(userId));

    //받은 refreshToken과 DB에서 조회한 값이 일치하는지 확인
    if (token === result['row'][0].token) {
      try {
        jwt.verify(token, JWT_KEY);
        return true;

      // refreshToken 검증 에러
      } catch (err) {
        return false;
      }
    } else {
      return false;
    }
  // DB 에러
  } catch (err) {
    console.log(err);
    return false;
  }
};

// access token 유효성 검사
exports.verify = (token) => {
    try {
      const decoded = jwt.verify(token, JWT_KEY);
      return {
        ok: true,
        id: decoded.id
      };
    } catch (error) {
      return {
        ok: false,
        message: error.message,
      };
    }
  };

- makeAccessToken(Object)
AccessToken을 만드는 함수로 회원정보(Object)를 인자로 받아 시크릿 키, 유효기간을 인자로 jwt.sign() 함수를 호출한다.
jwt.sign() 함수는 jsonwebtoken 라이브러리의 토큰을 발급하는 함수이다.

- makeRefreshToken()
RefreshToken을 만드는 함수이다. RefreshToken은 회원 ID와 함께 DB에 저장되므로 payload에 빈 객체를 할당한다.
따라서 빈 객체, 시크릿 키, 해싱 알고리즘 정보와 유효기간을 인자로 jwt.sign() 함수를 호출한다.

- refreshVerify(token, userId)
refresh token의 유효성을 검사하는 함수이다. userID로 DB에서 refreshToken을 조회한 후 조회된 토큰값과 인자로 받은 토큰값을 비교하여 값이 일치하면 jwt.verify()를 통해 refreshToken이 유효한지 확인한다.

- verify(token)
access token의 유효성을 검사하는 함수이다. 인자로 받은 accessToken을 시크릿 키와 함께 jwt.verify에 넣어 호출하여 회원 정보를 얻는다. token값이 유효하다면 디코딩된 userID 를 리턴하고 유효하지 않다면 에러 메세지를 리턴한다.

6. utils/Dbutils.js

const config = require('../db_config.json')
const mysql = require('mysql2/promise');  

const pool = mysql.createPool(config);


async function getConnection(sql, params) {
    try{
      let result = {};
      const connection = await pool.getConnection(async conn => conn);
      try{
        const [rows] = await connection.query(sql, params);
        result.state = true;
        result.row = rows;  
        connection.release();
        return result;
      }
      catch (err){
        console.log(err);
        result.state = false;
        result.err = err;  
        connection.release();
        return result;
      }        
    }
    catch(err){
      console.log(err);
      result.state = false;
      result.err = err; 
      return result;
    }
}

  
module.exports = getConnection;

db_config.js

{
    "host": "127.0.0.1",
    "port": "3306",
    "user": "USER NAME",
    "password": "DB PW",
    "database": "DB NAME",
    "connectionLimit": 30
}

폴더의 최상위 위치해 있는 db_config.json 파일에 DB의 기본설정을 저장하고 불러와 pool을 생성한다.

- getConnection(sql, params)
실행될 sql문과 insert, update 시 사용할 파라미터를 인자로 받는다. pool에서 connecton을 하나 가져오고 인자로 받은 sql, params를 인자로 넣어 sql문을 실행한다. sql문이 정상적으로 실행되면 상태값과 반환된 rows를 결과값에 저장하여 클라이언트에게 보내고 connection을 닫는다. 정상적으로 실행되지 않는다면 상태값과 에러 메세지를 결과값에 저장하여 클라이언트에게 보내고 connection을 닫는다.

7. controller/user.js

require('dotenv').config();
const getConnection = require('../utils/DbUtils');
const { sendVerifyEmail } = require('../utils/mailUtils');
const TokenUtils = require('../utils/tokenUtils');
const jwt = require('jsonwebtoken');

exports.login = async (req, res) =>{
    const {userId, userpw} = req.body;

    const SelectUsersql = (userId) =>{
      return `select Email, PassWord, AuthStatus from user where Email = '${userId}'`;
    }
    
    const InsertTokenSql =  (token) =>{
      return `insert into token values(?, ?) ON DUPLICATE KEY UPDATE token='${token}';`
    }

    // [EXCEPTION] DB에서 ID 찾기
    const result_id = await getConnection(SelectUsersql(userId));

    // [EXCEPTION] DB 에러
    if (result_id.state === false) return res.status(401).send("DB 에러 관리자에게 문의하세요."); 

    // [EXCEPTION] ID 불일치
    if (result_id.row.length === 0) return res.status(401).send("아이디가 일치하지 않습니다.");

    // [EXCEPTION] PW 불일치
    if (userpw !== result_id.row[0].PassWord) return res.status(401).send("비밀번호가 일치하지 않습니다.");

    // [EXCEPTION] 이메일 인증이 완료되지 않았을 때
    if (result_id.row[0].AuthStatus !== 1) return res.status(401).send("이메일 인증을 완료해 주세요.");


    // ID, PW 같을 경우 토큰 발급
    const accessToken = TokenUtils.makeAccessToken({id: userId});
    const refreshToken = TokenUtils.makeRefreshToken();

    // refreshToken, id DB에 저장
    const result_insert = await getConnection(InsertTokenSql(refreshToken), [userId,refreshToken]);

    // [EXCEPTION] DB에 저장 실패
    if (result_insert.state === false) return res.status(401).send("DB 에러 관리자에게 문의하세요.");
    
    return res.status(200).send({userId,accessToken, refreshToken})

};

const successResponse = (code, data) =>{
  return({
    code: code,
    data: data,
  })
}

const failResponse = (code, message) =>{
  return({
    code: code,
    message: message,
  })
}

exports.refresh = async (req, res)=>{
    // access, refresh 토큰이 헤더에 담겨 온 경우
    if (req.headers["authorization"] && req.headers["refresh"]){
        const accessToken = req.headers["authorization"].split(" ")[1];
        const refreshToken = req.headers["refresh"];
        
        // access token 검증 -> expired여야 함.
        const authResult = TokenUtils.verify(accessToken);
 
        // access token 디코딩하여 userId를 가져온다.
        const decoded = jwt.decode(accessToken);

        // 디코딩 결과가 없으면 권한이 없음을 응답.
        if (!decoded) {
            res.status(401).send(failResponse(401,"No authorized!"));
        }
        
        // access 토큰 만료 시
        if (authResult.ok === false && authResult.message === "jwt expired") {
          // 1. access token이 만료되고, refresh token도 만료 된 경우 => 새로 로그인해야합니다.
          const refreshResult = await TokenUtils.refreshVerify(refreshToken, decoded.id);
          if (refreshResult === false) {
            res.status(401).send(failResponse(401,"No authorized! 다시 로그인해주세요."));
          } else {
            // 2. access token이 만료되고, refresh token은 만료되지 않은 경우 => 새로운 access token을 발급
            const newAccessToken = TokenUtils.makeAccessToken({ id: decoded.id });
     
            res.status(200).send(successResponse(
                200,{
                accessToken: newAccessToken,
                refreshToken,
                }
                ));
          }
        } else {
          // 3. access token이 만료되지 않은경우 => refresh 할 필요가 없습니다.
          res.status(400).send(failResponse(400,"Acess token is not expired!"));
        }
      } else {
        // access token 또는 refresh token이 헤더에 없는 경우
        res.status(401).send(failResponse(400,"Access token and refresh token are need for refresh!"));
      }
};

- login()
위에서 언급한 "JWT를 이용한 로그인 과정"에 대한 로직이다.
1. 클라이언트로부터 userId와 userPw를 받으면 DB에 userId와 userPw가 있는지 확인한다.
2. DB 에러, ID 불일치, PW 불일치, 이메일 미인증의 경우에 클라이언트에게 에러 메세지를 전송한다.
3. 위에서 언급한 에러가 없다면 accessToken과 refreshToken을 발급한다.
4. 발급된 refreshToken과 id를 DB에 저장한 후 클라이언트에게 accessToken과 refreshToken을 전송한다.

- refresh()
위에서 언급한 ""에 대한 로직이며 클라이언트가 헤더에 accessToken과 refreshToken을 담아 보내게 된다.
1. accessToken과 refreshToken이 헤더에 존재하면 TokenUtils.verify()를 이용하여 access토큰을 검증하고 jwt.decode()를 사용하여 accessToken을 디코딩한다.
2.1 디코딩 결과가 없다면 클라이언트에게 권한이 없다는 에러 메세지를 전송한다.
2.2 accessToken이 만료되지 않았으면 클라이언트에게 refresh할 필요 없다는 메세지를 전송한다.
2.3 accessToken이 만료되었고 refreshToken이 만료된 경우 클라이언트에게 새로 로그인해야 한다는 메세지를 전송한다.
2.4 accessToken이 만료되었지만 refresToken이 만료되지 않은경우 새로운 accessToken을 발급받아 클라이언트에게 전송한다.

시간이 얼마 남지 않아 급하게 코드를 작성하다 보니 코드가 더럽다... 나중에 시간이 남으면 코드를 한 번 정리해야겠다.
또한 코드 발급, 인증에 관한 코드는 아래 글을 참고했으니 아래 글을 한 번 보면 좋을 것 같다.

참고
[Node.js+Express] Refresh Token 구현