문제 상황

Zustand와 MMKV를 따로 사용하면서 Zustand 상태와 MMKV의 로컬 데이터를 일일이 연동시켜줘야 하는 불편함이 있었다.
첫 랜더링시 로컬 데이터를 불러와 Zustand에 저장하고, 앱 실행 과정에서 데이터가 바뀌면 그 때마다 Zustand 상태 변경과 직접 로컬에 반영하는 과정을 반복해야 했다.

const createUser = async () => {
  const newUser = await userDataAPI.createUser(); // 유저 생성

  // 데이터를 두 번씩 저장하는 번거로움 발생
  setLocalUserData(newUser); // MMKV 데이터 저장
  setUser(newUser); // Zustand 상태 저장
};

useEffect(() => {
  // 직접 데이터를 불러와야 함
  const currentUser = getLocalUserData();
  if (currentUser) {
    setUser(currentUser);
  } else {
    createUser();
  }
}, []);

시도한 방법

MMKV에 데이터를 저장할 때 JSON 파싱이 필요했기 때문에 간단한 사용을 위해서 데이터 저장하고 불러오는 함수를 따로 만들어 사용해왔다.

// User 데이터를 저장하는 함수
export function setLocalUserData(userData: UserDataType) {
  const dataString = JSON.stringify(userData);
  mmkvStorage.set('userData', dataString);
}
// User 데이터를 불러오는 함수
export function getLocalUserData(): UserDataType | undefined {
  const dataString = mmkvStorage.getString('userData');
  if (dataString) return JSON.parse(dataString) as UserDataType;
}

상태가 변경되는 것을 감지해 자동 저장을 하는 커스텀 훅을 만들어 사용하는 생각도 해봤지만 근본적으로 달라지는건 없으니 마음에 들지 않았다.
리서칭을 하다가 Zustand Persist 미들웨어를 발견했고 MMKV에서도 지원한다는것을 알게되었다.

해결 방법

MMKV 문서에 나와있는 Zustand persist 연결 방법을 찾아서 연결했다.

연결을 위한 Custom Storage 생성

• 기존의 mmkvStorage를 createJSONStorage로 감싸 JSON 데이터로 사용할 수 있도록 만들어줬다.
• createJSONStorage : 로컬 스토리지 데이터를 JSON 형태로 직렬화/역직렬화해서 Zustand Persist 미들웨어가 사용할 수 있게 변환하는 함수
• 인자로 데이터를 관리하는 객체 StateStorage ({ setItem, getItem, removeItem })를 반환하는 함수를 받는다.

Zustand #persist-middleware 문서에서는 createJSONStorage를 persist 미들웨어 안에서 사용하지만 localStorage는 persist로 연결해서만 사용하기 때문에 미리 감싸주었다.

// 기존에 사용하던 기본 로컬 저장소
export const mmkvStorage = new MMKV({
  id: 'STORAGE ID',
  encryptionKey: MMKV_KEY,
});

// MMKV를 Zustand persist로 연결하기 위한 Custom Storage 객체
export const localStorage = createJSONStorage(() => ({
  setItem: (name, value) => {
    return mmkvStorage.set(name, value);
  },
  getItem: (name) => {
    const value = mmkvStorage.getString(name);
    return value ?? null;
  },
  removeItem: (name) => {
    return mmkvStorage.delete(name);
  },
}));

Persist 미들웨어로 연결한 스토어 생성

persist 미들웨어를 사용해 각각 데이터 별로 상태 스토어를 만든다.

• 인자로 스토어 생성 함수, 저장소 설정 객체를 넣어준다.
• 스토어 생성 함수 : 기본적인 Zustand 스토어를 만드는 생성 함수
• 저장소 설정 객체 : 로컬 저장소 연결을 위한 정보 객체
  • name : MMKV에 저장되는 키를 말함 → 해당 키를 통해서 JSON 데이터가 저장됨
  • storage : 위에서 만든 Custom Storage

import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import { localStorage } from './mmkvStorage';
import { UserDataType } from './dataTypes';

type UserStoreType = {
  user: UserDataType;
  setUser: (state: UserDataType) => void;
};

const userLocalStore = create<UserStoreType>()(
  persist(
    (set) => ({
      user: { _id: undefined, nickname: '', tag: 0, rank: 0, topScore: 0 },
      setUser: (state) => set({ user: state }),
    }),
    {
      name: 'userStore',
      storage: localStorage,
    }
  )
);

스토어를 불러와 사용 + useShallow

기존 Zustand 스토어를 사용하듯이 생성한 스토어를 사용하면 자동으로 데이터를 불러오고 동기화시켜준다.

import userLocalStore from '@/stores/userStore';

const user = userLocalStore((state) => state.user);

useShallow를 사용하면 여러개의 상태를 한번에 불러올 수 있다.

import { useShallow } from 'zustand/react/shallow';

const [user, setUser] = userLocalStore(
  useShallow((state) => [state.user, state.setUser])
);

배운점

이미 있는 기능을 다시 만드는 것은 시간낭비고 제작자가 만든 기능이 훨씬 사용성이 좋을 수 있기 때문에 내 생각대로 작업하기 전에 라이브러리 제작자가 의도한 기능이 있는지 먼저 확인하는게 좋을 것 같다.

참고

• MMKV storage (react-native-mmkv)
• Zustand - Persisting store data
• MMKV persist-middleware wrapper
• Zustand - useShallow [velog@ony_]

랭킹 기능을 위해서는 백앤드 서버가 필요했고 가장 많이 사용해 익숙했던 Express.js를 선택해 만들었다.

AWS를 사용해본적이 단 한번이 없었기 때문에 이번 기회에 사용해보자 하고 어려운길을 선택하였다.

이번 글에서는 익숙하지 않은 배포과정을 더 기억하고 배우자는 마음으로, Express.js 백앤드 서버를 AWS EC2를 통해 배포하는 과정을 정리해보았다.

프로젝트 구성

사용한 기술 스택

• Express.js : 배포 대상 서버 프레임워크, 가장 익숙한 프레임워크라서 선택했다.
• Node.js : AWS 리눅스와의 버전 호환 문제로 16 버전을 사용했다.
• AWS EC2 : 클라우드 서버 환경, 가장 유명하지만 사용해본 적이 없어서 이번에 사용하기로 했다. (+ 프리티어 무료!)
• Nginx : 리버스 프록시 설정 (포트 노출 X, 로드 밸런싱, 트래픽 관리)
• PM2 : Node.js 프로세스 관리

• MongoDB Atlas : 클라우드 DB (서버 배포 불필요)
• SSL(HTTPS) : 도메인 필요, 이번 프로젝트는 보안 중요도가 낮아 미사용

구조 설명

기본적으로 EC2 클라우드 컴퓨터에 Express.js 서버를 실행하고 요청/응답을 처리한다.

Nginx를 사용하여 포트를 숨겼고, 사용자가 EC2의 Public IP로 요청을 보내면 Nginx가 자동으로 Express.js서버의 포트로 요청을 넘겨준다.

아직 로그인 기능 같은게 없어 보안이 중요하지 않기 때문에 Nginx의 보안적 기능들은 나중에 필요하게 되면 추가할 예정이다.

Node.js는 프로세스를 하나만 돌릴 수 있기 때문에 필요시 프로세스를 추가하기 위해 PM2를 추가해 관리하게 했다.

배포

배포 과정

1. EC2 인스턴스 생성 (AWS 계정 생성은 스킵!)
2. Node.js 설치(NVM 사용) 및 코드 가져오기 (git pull → npm install → .env 세팅)
3. PM2설치 및 앱 실행 (pm2 start app.js)
4. Nginx 설치 → 리버스 프록시 설정 → Nginx 시작
5. 배포 작동 테스트

EC2 인스턴스 생성

AMI

AMI는 프리티어를 사용하기 위해서 무료 요금제의 모델을 찾아 선택했다.
AWS Marketplace AMI → 요금 모델 : 무료 선택 → Amazon Linux 무료 모델 선택 (요금에서 프리티어 확인)
(모든 AMI가 프리티어로 사용 가능한지도 모르겠다. 초보자 이슈)

(25년 7월부터는 프리티어 방식이 변경되었다고 한다. 이제 $200 크래딧으로 주나보다. AWS Free Tier)

인스턴스 유형

클라우드 컴퓨터의 성능을 선택해주어야 하는데 이번 프로젝트에서 크게 중요하지는 않으니 기본값 t3a.medium을 선택했다.

키 페어

로그인 보안을 위해 키 페어 파일을 생성해주어야 한다.
SSH로 연결해 사용하기 위해 .pem으로 새 키페어를 생성했다.

네트워크 설정

모든 사용자들이 EC2에 요청을 보낼 수 있게 만들기 위해서 HTTP/HTTPS 트래픽을 허용해줘야 한다. 추가로 SSH로도 접속하기 위해 SSH 허용도 해주었다.

보안 그룹 생성 → SSH, HTTP, HTTPS 트래픽 허용

탄력적 IP (고정 IP)

EC2 인스턴스는 기본적으로 시작할 때마다 IP가 변경된다.
인스턴스 재부팅과 상관 없이 IP를 고정해서 사용하기 위해서는 탄력적 IP 설정이 필요하다.
왼쪽 탭에서 탄력적 IP 주소로 들어가 탄력적 IP를 할당해준다.
생성한 IP 주소를 선택해 작업에서 탄력적 IP 주소 연결로 인스턴스와 연결해준다.

인스턴스 연결 테스트

이제 인스턴스를 시작하고 연결 테스트 해보자. 인스턴스 상태를 시작으로 바꾸고 연결에 들어간다.
EC2 인스턴스 연결 기본 상태로 연결을 누르면 터미널 페이지로 이동할 것이다. 👏👏

SSH 연결 및 설정 (옵션)

iTerm을 통해서 SSH의 별칭을 설정해 간편하게 EC2에 접속할 수 있다.

1. 권한 설정

생성한 키페어 파일을 소유자만 읽을 수 있도록 권한 변경한다.

chmod 400 my-key.pem

2. 일반 접속

ssh -i <'.pem' FilePath> <EC2_UserName>@<EC2_PUBLIC_IP>

• 인스턴스를 생성하며 만들었던 키페어 파일 경로 (.pem)
• EC2_UserName : 인스턴스 연결을 선택하면 설정할 수 있는 유저명 (기본 ec2-user)
• EC2_Public_IP : 탄력적 IP에서 설정한 IP 주소 혹은 퍼블릭 DNS

3. SSH 별칭 설정

.ssh/config 파일에 별칭 설정을 한다.

vim ~/.ssh/config

Host <별칭>
HostName <EC2_PUBLIC_IP>
User <EC2_UserName>
IdentityFile <'.pem' FilePath>

• Host : 별칭으로 사용할 이름
• HostName : EC2에서 설정한 퍼블릭 IP or DNS
• User : EC2에서 설정한 유저명 (기본 ec2-user)
• IdentityFile : 키페어 파일 경로 (.pem)

SSH 접속

ssh <별칭>

Node.js 설치 (NVM)

Node.js를 설치해야 하는데 버전 관리의 편의성을 위해서 NVM(Node Version Manager)를 사용했다.
(설치 후 터미널 재시작이 필요하다.)

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

nvm --version

프리티어 AWS Linux 2버전에서는 상위 버전의 Node를 설치하지 못하는 문제가 있어서 16버전으로 설치했다.
(상위 버전이 필요하다면 AL2023 버전이나 도커를 사용해야 할 것 같다.)

항상 동일한 Node 버전으로 사용하기 위해서 설치한 Node 버전을 기본값으로 고정해줘야 한다.

nvm install 16

nvm use 16 # 현재 터미널 세션의 node 버전 설정
nvm alias default 16 # 터미널이 열릴 때 기본값 설정

코드 가져오기, 환경변수 설정

깃을 설치하고 깃허브에 올려놓은 프로젝트 파일을 불러오자.

# GIT 설치
sudo yum update -y
sudo yum install -y git
git --version

# 프로젝트 클론
git clone https://github.com/itismilob/GooApp.git

.env 파일을 생성하고 환경변수를 추가해주었다.

vim .env

이제 npm install 한 번 때려주고 테스트로 실행해보자.
퍼블릭 DNS:서버 포트로 접속하면 잘 작동 할 것이다.

PM2 설치 & 실행

Node를 멀티프로세스로 돌려주고 로그도 편리하게 확인 가능한 기능들을 가진 PM2를 설치해 사용했다.
지금은 사용자가 매우 적으니 프로세스는 당연히 하나만 돌리고있다.

npm install -g pm2 # pm2 글로벌 설치
$ pm2 -version # pm2 버전 확인
$ pm2 update # pm2 업데이트

pm2 start build/app.js # 프로젝트 시작

이제 우리는 프로세스 CPU, 메모리 사용 상태 등을 볼 수 있고 로그도 에러와 정상 로그로 분리해서 확인할 수 있게 되었다.

pm2 monit # 프로세스 상태 보기
pm2 log # 로그 확인

Nginx 설치 & 리버스 프록시 설정

마지막으로 Nginx를 추가해 리버스 프록시로 포트를 감추고 그냥 DNS 주소로 접속할 수 있도록 만들었다.

(설치 후 nginx를 한 번 실행해 정상적으로 연결되는지 확인하자.)

sudo amazon-linux-extras install -y nginx1 # nginx 설치

nginx -v # nginx 버전 확인

Nginx 설정 파일을 생성해서 포트가 없는 기본 요청에 리버스 프록시 설정을 해주었다.

/etc/nginx/conf.d/default.conf 커스텀 설정 파일 생성

server {
	listen  80;
	listen  [::]:80;
	
	access_log /var/log/nginx/reverse-access.log;
	error_log /var/log/nginx/reverse-error.log;
	
	location / {
		proxy_pass http://127.0.0.1:<PORT>;
	}
}

기본 설정 파일 /etc/nginx/nginx.conf에서 커스텀 설정 파일 include

http {
	include /etc/nginx/conf.d/*.conf;
}

이렇게 해주면 EC2로 들어가는 기본 요청이 Nginx를 통해 localhost:서버 포트로 전달된다.

sudo systemctl start nginx

배포 후 점검

Postman을 사용해서 EC2 퍼블릭 DNS로 요청을 보내서 제대로 처리되는지 확인했다.

배포 성공 👏👏

API 요청과 응답 과정에서 원하는 데이터가 전달되지 않거나 예상치 못한 에러가 발생할 경우 앱이 강제종료되지 않도록 핸들링을 해줘야 한다.
에러의 유형은 각 API의 목적에 따라 달라지는데 유저 생성 API에서 생성이나 저장에 실패하거나 점수 갱신 API에서 갱신할 유저 ID를 받지 못해 갱신에 실패하는 등 다양한 상황이 발생한다.
대표적으로 발생할 수 있는 에러들을 정리해서 문서화했고, 요청을 재시도 하거나 예상 못한 사소한 에러들은 에러 메시지만 띄우는 방식으로 처리해줬다.

에러 및 에러 코드 정의

각 API 기능마다 발생할 경우 기능에 문제가 생기는 에러들을 정의했다.
API 명세서에도 해당 기능에서 어떤 에러가 발생하는지를 명시해 바로 확인할 수 있도록 했다.
명세서에 없는 예외적인 에러는 시스템에 치명적인 영향을 주지 않도록 기본적인 로깅 및 알림을 통해 대응하며, 필요 시 명세에 반영한다.

커스텀 에러 정의

기본 에러에 HTTP 상태코드와 에러코드를 넣어 사용하기 위해서 커스텀 에러를 선언했다.

export class CustomError extends Error {
  statusCode: number;
  errorCode: string;

  constructor(statusCode: number, errorCode: string, message: string) {
    super(message);
    this.statusCode = statusCode;
    this.errorCode = errorCode;
  }
}

선언한 커스텀 에러를 바탕으로 에러 상황마다 반복적으로 사용하는 에러를 추가로 만들어 사용했다.

export class UserCreateFail extends CustomError {
  constructor() {
    super(500, 'USER_CREATE_FAIL', '유저 생성에 실패했습니다.');
  }
}

export class UserNotFound extends CustomError {
  constructor() {
    super(404, 'USER_NOT_FOUND', '유저 검색에 실패했습니다.');
  }
}

백엔드(Express.js) 에러 처리

서버에서 요청을 처리하며 에러가 발생하면 에러 코드 등의 정보와 함게 응답을 보낸다.

Express.js에서는 미들웨어를 사용하여 요청 처리 과정에 함수를 끼워 넣어 데이터를 변환하는 등의 기능이 있다.
미들웨어에 에러 핸들러와 유효성 검사를 넣어서 요청 데이터를 가로체 확인하도록 만들었다.

에러 처리를 하기 위한 작업 과정은 다음과 같다.

1. 에러 핸들러 생성
2. 요청 유효성 검사 : express-validator
3. 정상적인 요청과 에러 상황을 테스트

에러 핸들러 생성

공통적인 에러 처리와 에러 로깅을 위해 errorHandler 함수를 만들어 미들웨어로 사용했다.
errorHandler는 요청 처리중에 에러가 발생하면 자동으로 실행된다.

정의되지 않은 에러라면 기본 500 - Internal Server Error 를 응답하고, 정의된 CustomError라면 그 정보를 응답한다.

// 에러 처리 미들웨어
export default function errorHandler(err: unknown, req: Request, res: Response, _next: NextFunction,
) {
  // 기본값
  let errorStatus = 500;
  let errorCode = 'INTERNAL_SERVER_ERROR';
  let message = '서버 내부 오류가 발생했습니다.';

  // 커스텀 에러 처리
  if (err instanceof CustomError) {
    errorStatus = err.statusCode;
    errorCode = err.errorCode;
    message = err.message;
  }

  // 에러 로깅 - 에러 내용과 요청 정보를 띄운다.
  console.error(err);
  console.error(`[${req.method} ${req.url} - ${message}]`);

  // 에러 정보 응답
  res.status(errorStatus).json({ message, errorCode });
}

app의 마지막 미들웨어로 errorHandler를 넣어서 모든 API에서 발생하는 에러를 공통으로 처리하게 만든다.

// app.js
import express from 'express';
const app = express();
  
app.use('/users', userRouter);
app.use(errorHandler);

app.listen(PORT, () => {
	console.log(`http://localhost:${PORT}`);
});

express-validator

express-validator 라이브러리를 통한 유효성 검사로 요청속에 잘못된 데이터가 있는지 확인한다.
API 라우터에 validator를 넣고 validateRequest미들웨어를 통해서 에러가 있으면 커스텀 에러를 생성한다.

express-validator의 param 함수로 요청의 path-parameter속 데이터가 MongoDB 아이디 값이 맞는지 유효성 검사를 진행한다.
검사 후 validateRequest 함수에서 에러가 발생했는지 확인하고 에러 핸들러로 넘긴다.

router.get(
	'/:userID', // 요청 Path
	param('userID').isMongoId(), // 유효성 검사 - userID 데이터가 MongoId 인지 확인
	validateRequest, // 유효성 검사에서 에러가 있는지 확인해 에러 핸들러로 넘긴다.
	getUser // 정상적인 요청일 때 넘어가는 Controller 미들웨어
);

export default function validateRequest(
  req: Request,
  res: Response,
  next: NextFunction,
) {
  // 유효성 검사의 결과를 가져온다.
  const errors = validationResult(req);

  // 에러가 있는지 확인하고 커스텀 에러를 발생시킨다.
  if (!errors.isEmpty()) {
    throw new CustomError(
      400,
      'INVALID_VALUE',
      '요청의 형식이 잘못되었습니다.',
    );
  }

  // 에러가 없다면 다음 미들웨어 함수를 실행하도록 넘긴다.
  next();
}

프론트엔드(React-native) 에러처리

React Native 에서는 Axios 라이브러리를 통해 API 요청을 보내고 요청 과정에서의 에러를 처리할 수 있게 만들었다.
Axios의 Interceptor를 통해서 요청/응답을 가로체 데이터 변환, 에러 처리 등을 할 수 있다.

1. Axios Interceptor를 사용한 커스텀 에러 생성과 에러 Alert
2. 각 상황에 맞는 개별 에러 처리

Axios 에러 처리

Axios의 Interceptor를 사용해 응답 데이터를 확인하고 에러가 발생한 경우 에러처리를 수행한다.
발생한 에러를 백엔드와 동일한 CustomError로 변환하여 같은 방식으로 처리한다.
응답 에러가 발생하면 사용자에게 알려주기 위해서 react native의 Alert를 사용해서 알려준다.
마지막으로 Promise.reject를 반환하여 axios 요청을 실행했던 코드에서 개별 처리를 하도록 넘겨준다.

// 응답 에러를 처리하는 헨들러 정의
function resErrorHandler(error: unknown) {
  // 기본 에러 데이터
  let status = 500;
  let code = 'UNKNOWN';
  let message = '알 수 없는 에러입니다.';

  // axios 에러일 때
  if (axios.isAxiosError(error)) {
    // 에러 상황에 맞는 데이터 입력
    if (!error.response) {
      status = 503;
      code = 'NETWORK_ERROR';
      message = '네트워크 오류가 발생했습니다.';
    } else if (error.code === 'ECONNABORTED') {
      status = 408;
      code = 'TIMEOUT';
      message = '요청 시간이 초과되었습니다.';
    } else {
      status = error.response.status;
      code = error.response.data.errorCode;
      message = error.response.data.message;
    }
  }

  // 커스텀 에러로 만들어 모든 에러를 같은 방식으로 처리할 수 있도록 제작
  const customError = new CustomError(status, code, message);

  // react native - Alert 알림
  showErrorAlert(customError);
  // Promise 에러를 반환하여 axios 요청을 실행한 코드에서 처리하도록 넘김
  return Promise.reject(customError);
}

axios.interceptors.response.use(res => res, resErrorHandler);

개별 에러 처리

API 요청을 실행하던 함수에서 요청 에러가 발생하면 실행 과정을 되돌리거나 페이지를 이동시키는 등의 개별 에러 처리 기능들을 선언해서 처리할 수 있다.

try{
	const newUser = await axios.post(/.../);
	if(newUser){
		saveUserData(newUser);
	}else{
		throw new Error('유저 생성에 실패했습니다.')
	}
} catch(error) {
	// 요청 에러가 발생했거나 유저가 생성되지 않으면 화면을 이동시킨다.
	navigation.replace('UserNotCreated');
}

마무리

에러 처리 부분에서는 정형화된 작업 방식을 찾기 어려웠기 때문에 가장 고민도 많았고 시간도 많이 들어간 작업이었다. 이번 작업을 통해서 에러가 발생하는 다양한 상황을 생각하고 에러 처리를 하는 흐름을 배웠다.

백엔드에서는 요청을 검증하고(validation) 처리하며, 에러 발생 시 에러 핸들러를 통해 에러 정보를 담은 응답을 반환하고 로그를 남긴다.
프론트엔드에서는 요청과 응답 전반에 대해 에러를 감지하고 처리하며, 사용자에게 알림을 통해 문제를 전달하고, 개발자가 이를 확인할 수 있도록 돕는다.

express-validation과 axios interceptor 같은 기능들은 단순하지만 사용 방법이 자유로워서 더 어렵게 느껴졌다. API를 사용하는 백앤드, 프론트의 에러를 전체적으로 통일하기 위해서 커스텀 에러를 사용해보니 가독성이 향상되고 디버깅을 하며 알아보기 편해졌다.
다음번에는 Jest 같은 테스트 라이브러리를 통해 발생하는 에러 상황들을 전부 테스트해보는 것도 좋을 것 같다.

MongoDB를 Node.js에서 사용할 수 있도록 하는 모듈이다.

스키마와 모델로 데이터를 불러와 객체화 시킨 후 빠르게 수정, 데이터 접근을 가능하게 만들어준다.

MongoDB와 연결하기

서버와 MongoDB(혹은 MongoDB Atlas)를 연결해야 사용 가능하다.

서버 실행 전에 한 번 연결하고 계속 사용한다.

import mongoose from 'mongoose';

async function connectDB() {
  try {
    await mongoose.connect('MongoDB_URL');
    console.log('MongoDB 연결 성공');
  } catch (err) {
    console.error('MongoDB 연결 실패:', err.message);
  }
}

스키마

데이터의 구조(필드)를 정의하는 객체

필드와 타입, 기본값, 제한 조건 등을 설정한다.
MongoDB에는 스키마가 없지만, Mongoose에서는 명확한 구조를 위해 사용한다.

스키마 필드의 데이터 타입

필드의 데이터로 사용할 수 있는 타입 목록.
Javascript의 타입을 확장한 Mongoose의 자체적인 타입이다.

• String
• Number
• Boolean
• Date
• Array
• Buffer : 이진 데이터 (이미지, 파일 등)
• ObjectId : 다른 문서의 ID (ref)
• Map : Key-Value 쌍 객체
• Mixed : 타입 검사를 하지 않음, any 타입
• Decimal128 : 고정 소수점 숫자
• UUID : 고유한 값을 만들기 위한 128비트 숫자

스키마 제네릭 타입

스키마를 생성할 때 명시적으로 타입을 선언하며 사용되는 제네릭 타입들이다.
공식 문서 →

• RawDocType : DB에 저장되는 원시 데이터 타입 (userSchemaType)
• TModelType : 모델 타입, 보통 Model 타입 상속
  query helpers, static methods 함께 지정 ([[Mongoose#Query Helpers]], [[Mongoose#Statics]])
  Model<DocType, QueryHelpers, InstanceMethods>
• TInstanceMethods : 도큐먼트 인스턴스에 붙이는 커스텀 메서드 타입 ([[Mongoose#Methods]])
• TQueryHelpers : query helper 정의용 인터페이스 ([[Mongoose#Query Helpers]])
• TVirtuals : virtual로 정의한 필드들의 타입 ([[Mongoose#Virtuals]])
• TStaticMethods : 모델에 붙는 static 메서드의 정의 타입 ([[Mongoose#Statics]])
• TSchemaOptions : 스키마 옵션 타입
• DocType : 스키마에서 추론되는 문서 타입 (RowDocType, InstanceMethods, Virtuals로 자동 생성됨)
• THydratedDocumentType : hydrated doc 타입, Model.findOne(), Model.hydrate() 등의 기본 반환 타입

InferSchemaType

스키마에 정의된 필드를 기반으로 실제 DB에 저장될 데이터 타입을 추론해준다.

const userSchema = new Schema({
  userID: String,
  nickname: String,
  topScore: Number,
});

type User = InferSchemaType<typeof userSchema>;
/* User 타입은 다음과 같이 정의된다.
User = {
	userID?: String,
	nickname?: String,
	topScore?: Number
}
*/

모델

실제 데이터베이스와 연결되는 객체

스키마를 바탕으로 MongoDB의 컬렉션과 연결한다.
모델이 데이터 쿼리(CRUD) 기능을 제공한다.

스키마, 모델 만들기

스키마 정의

• 첫 인자 : 스키마 필드 정의
• 두번째 인자 : 스키마 옵션 설정
  timestamp, _id 자동 생성 등 - 옵션 더보기 →

import { Schema, Model, model } from 'mongoose';

// 필드의 타입 (따로 정의하지 않아도 자동 추론된다.)
interface User {
  userID: string;
  nickname: string;
  topScore: number;
}
// User 모텔 타입 - Model을 상속받는다.
// Static 함수가 없다면 불필요함
interface UserModel extends Model<User> {
  // Static 함수들이 정의된다.
}

const UserSchema = new Schema<User, UserModel>({
  userID: {
    required: true,
    unique: true,
    type: String,
  },
  nickname: {
    required: true,
    unique: true,
    type: String,
  },
  topScore: {
    type: Number,
    default: 0,
  },
});

// 스키마를 바탕으로 모델 생성
const userModel = model<User, UserModel>('userModel', UserSchema);
export { userModel };

모델의 인스턴스(새로운 문서)를 만들어 값을 담아 저장할 수 있다.

const newUser = new userModel();
newUser.nickname = 'testUser';
newUser.userID = 'userID';

await newUser.save();

CRUD

Mongoose를 통해 MongoDB 문서에 대한 CRUD 작업을 할 수 있다.

Create

문서 생성

인스턴스를 생성해 데이터 create

const newUser = new userModel({
  userID: 'userID',
  nickname: 'testUser',
});
await newUser.save();

인스턴스 없이 데이터 create

await userModel.create({
  userID: 'userID',
  nickname: 'testUser',
});

Read

문서 데이터 불러오기

전체 데이터 불러오기
(MongoDB의 비교 연산자를 사용했다. 공식 문서 →)

const users = await userModel.find();

// 조건으로 검색
const scores = await scoreModel.find({
  correct: { $gte: 5 },
  wrong: { $lte: 2 },
});

하나의 데이터 불러오기

const user = await userModel.findOne({ userID: 'userID' });

아이디로 데이터 불러오기

const user = await userModel.findById('userID');

Update

문서 데이터 업데이트 (두 번째 인자로 변경할 값을 입력)

하나의 데이터만 업데이트

await userModel.updateOne({ userID: 'userID' }, { nickname: 'changed' });

아이디로 찾아서 업데이트

await userModel.findByIdAndUpdate('userID', { nickname: 'changed' });

Delete

문서 삭제

문서 하나 검색해 삭제

await userModel.deleteOne({ userID: 'userID' });

문서를 아이디로 검색해 삭제

await userModel.findByIdAndDelete('userID');

쿼리 메소드

CRUD 이외에 데이터를 검색하거나 수정하기 위해 사용되는 메소드

Sort

데이터 정렬

const first = await userModel.findOne().sort({ _id: 1 }); // 생성 순서 오름차순
const last = await userModel.findOne().sort({ _id: -1 }); // 생성 순서 내림차순

Where

쿼리에 조건을 체이닝 형식으로 추가할 수 있다.

const scores = await scoreModel.where('correct').gt(3).lt(30);

Limit

쿼리 결과 개수 제한

const users = await userModel.find().limit(5);

Skip

앞에서 몇 개를 건너뛰고 검색 (페이징에서 주로 사용)

const users = await userModel.find().skip(10).limit(10);

Select

스키마의 필드를 선택해 특정 값들만 검색한다.

const userNicknames = await userModel.find().select('userID nickname'); // userID, nickname만 가져옴
const userWithoutNicknames = await userModel.find().select('-nickname'); // nickname 제외

CountDocuments

문서 개수 세기

const count = await scoreModel.countDocuments({
  correct: { $gte: 5 },
  wrong: { $lte: 2 },
});

Distinct

특정 필드에서 중복 제거된 값만 불러온다.

const nicknames = await userModel.distinct('nickname');

Lean

결과 문서를 Mongoose Doc이 아닌 Plain Object로 변환해 검색 속도를 빠르게 한다.

const users = await userModel.find().lean();

Transform

문서의 출력 결과를 가공한다.

lean 메소드를 앞에 먼저 사용해야 타입스크립트에서 타입을 추론할 수 있다.

const result = await userModel
  .find()
  .lean()
  .transform((docs) => {
    return docs.map((doc) => ({
      id: doc._id,
      name: doc.nickname.toUpperCase(),
    }));
  });

Populate

한 문서에서 참조한 ObjectId로 다른 문서의 데이터를 찾아 불러온다.

스키마에 참조할 필드 정의 (참조할 모델을 정의할 때 사용한 명칭으로 연결한다.)

const scoreSchema = new Schema({
  user: { type: mongoose.Schema.Types.ObjectId, ref: 'userModel' },
  correct: Number,
  wrong: Number,
  accuracy: Number,
});

const scoreModel = mongoose.model('scoreModel', scoreSchema);

populate로 user정보도 같이 불러온다.

const score = await scoreModel.findById('userID').populate('userModel');
console.log(score.user.nickname);

에러 처리 방식

1. async/await + try/catch

가독성이 좋아 주로 사용한다.

try {
  const users = await userModel.find();
  // 정상 작동 처리
} catch (error) {
  // 에러 핸들링
}

2. .then().catch() 프로미스 체이닝

채이닝이 길어질 수 있어 가독성이 떨어진다.

userModel
  .find()
  .then((users) => {
    // 정상 작동 처리
  })
  .catch((error) => {
    // 에러 핸들링
  });

3. 콜백 방식

요청 인자의 가장 마지막에 에러 처리 콜백을 넣는다.
레거시 스타일로 거의 사용되지 않는다.

userModel.findById(userID, (error, user) => {
  if (error) {
    // 에러 핸들링
  }
  // 정상 작동 처리
});

API

Methods

문서(검색 결과) 인스턴스에서 호출하는 메소드를 정의할 수 있다.

• 메소드 타입을 정의해서 스키마에 추가한다.
• 스키마에 메소드를 정의한다.

// 메소드 타입을 따로 정의
interface userMethods {
	sayHi(): string;
}

// 스키마에 메소드 타입 추가
const userSchema = new Schema<User, userModel, userMethods>({...});

// 스키마에 메소드 정의
userSchema.methods.sayHi = ()=>{
	return `Hello I'm ${this.nickname}`;
};

const userModel = mongoose.model('userModel', userSchema);

const user = await userModel.findById('userID');
// 메소드 사용
console.log(user.sayHi());

Statics

모델에서 호출하는 메소드를 정의할 수 있다.

• 모델의 타입에 메소드를 정의한다.
• 스키마에 스테틱 메소드를 추가한다.

// 모델 타입에 스테틱 메소드 정의
interface UserModel extends Model<UserSchemaType> {
	findByNickname(): UserSchemaType;
}

const userSchema = new Schema<User, userModel>({...});

// 스키마에 스테틱 메소드 정의
userSchema.statics.findByNickname = (nickname)=>{
	return this.findOne({nickname});
};

const userModel = mongoose.model('userModel', userSchema);
// 스테틱 메소드 사용
const user = await userModel.findByNickname('testUser');

Query Helpers

모델에 커스텀 쿼리 함수를 추가해 사용한다.
복잡한 쿼리 로직을 캡슐화해 만들어 사용할 수 있다.

const userSchema = new Schema(
  {
    userID: String,
    nickname: String,
    topScore: Number,
  },
  {
    // query helpers 정의
    query: {
      byNickname(nickname: string) {
        return this.find({ nickname });
      },
    },
  }
);
//... 모델 정의

const testUser = await userModel.find().byNickname('testUser');

Virtuals

가상 필드, DB에 저장하지 않지만 문서에 포함되는 계산된 필드를 추가한다.

const userSchema = new Schema(
  {
    userID: String,
    nickname: String,
    topScore: Number,
  },
  {
    // Virtual 정의
    virtuals: {
      // 아이디와 닉네임을 연결한 가상 필드 추가
      id_nickname: {
        get() {
          return this.userID + '_' + this.nickname;
        },
      },
    },
  }
);
//... 모델 정의

const user = await userModel.findOne({ userID: 'userID' });
// 아이디와 닉네임이 연결된 virtual 필드가 출력된다.
console.log(user.id_nickname);

스키마 InferSchemaType는 실제 데이터 구조만 나타내고 virtual는 포함되지 않는다.

필요하다면 hydrate를 이용해 타입을 추론해야 한다.
type userDocument = ReturnType<(typeof userModel)['hydrate']>;

Subdocuments

문서 안에 다른 문서를 넣는 구조 (populate와 다르게 문서를 직접 넣음)

// 스키마 필드 타입 정의
interface Child {
  name: string;
}
interface Parent {
  children: Child[];
}

// 모델에 사용할 타입 정의
type ParentModel = Model<Parent>;

// 스키마 생성
const childSchema = new Schema<Child>({
	name: String;
})
const parentSchema = new Schema<Parent, ParentModel>({
  children: [childSchema]
});

// 모델 생성
const parentModel = model<Parent, ParentModel>('Parent', parentSchema);

// parent 문서 생성, child 값 생성
const parent = new parentModel();
const child = {name: 'child1'};
// child 추가
parent.children.push(child);
await parent.save();

hydrate

Plain object를 mongoose document로 바꿔주는 함수다.

const user = { userID: 'userID', nickname: 'testUser' };
const doc = userModel.hydrate(user);

이 글은 디자인을 적용하면서 실제로 앱에서 UI를 구현할 때 마주한 3가지 문제를 정리했다.
React Native + TailWind(NativeWind) 환경에서 발생한 스타일링 이슈와 실용적인 해결 방법에 대해 공유한다.

크게 3가지 문제가 있었다.

1. 동적으로 클래스 변경이 안 되는 문제
2. 폰트 크기에 따른 레이아웃 깨짐
3. 스크롤 디자인 문제

각각 문제 상황 → 시도했던 방법 → 최종 해결책 순서로 정리한다.

1. Tailwind의 동적 스타일링 적용

컴포넌트마다 배경색 등 스타일이 바뀌는 상황에서 Tailwind에 동적으로 적용한 클래스가 적용되지 않았다.

버튼의 색상 코드만 클래스에 bg-${color}로 넣었지만 Tailwind가 인식 하지 못해서 적용되지 않았다.
해결 방법은 tailwind.config.js에서 필요한 색상을 정의하거나, 변수 조각이 아닌 완성된 변수로 관리하는 방식이었다.

❌ 안 되는 상황

• 색상 코드만 동적으로 넣어줬다.
• Tailwind는 빌드 타임에 정적으로 탐지되는 클래스명만 인식해서 적용한다.

export default button(){
	const green = '#00FF00';
	<View className={`bg-[${green}] flex-1 items-center justify-center`}/>
}

✅ 해결한 코드

• 클래스 전체를 상수로 선언하고 넣어줬다.
• 반복되는 스타일 전체를 선언해 사용이 가능하다.

export default button(){
	const greenBg = 'bg-[#00FF00] flex-1 items-center justify-center';
	return <View className={greenBg}/>
}

✅ tailwind.config.js에 색상을 선언하는 방법

• tailwind.config.js에 colors: { default-green: '#00FF00' }처럼 선언해두면 bg-default-green처럼 바로 사용 가능하다.

module.exports = {
  theme: {
    extend: {
      colors: {
        'default-green': '#00FF00',
      },
    },
  },
};

export default button(){
	return <View className='bg-default-green flex-1 items-center justify-center'/>
}

2. 폰트 문제

폰트 하단 짤림

폰트 크기 때문에 글자가 짤리는 문제가 생겼다.

Pretendard 폰트를 사용하면서 폰트가 커졌을 때 g, y, j 같은 문자 하단에서 잘렸고, 여백 설정이 필요했다.
해결을 위해 텍스트 크기에 맞춰 leading(line-height)을 조정했다.

글자 비율 문제

랭킹 리스트에서 닉네임이 차지하는 비율이 너무 넓어서 줄바꿈이 일어나는 문제가 있었다.

리스트의 배치와 글자 크기를 변경해서 해결했다.

• 랭킹은 최대한 왼쪽으로 밀기
• 닉네임은 왼쪽 정렬로 랭킹에 붙임
• 점수는 오른쪽 정렬

스크롤 디자인 구현

기록과 랭킹 화면에서 리스트 스크롤이 사용자 정보를 덮고 위로 올라와야 했다.

구현

• 상단 헤더 컴포넌트에 absolute를 적용해서 위치 점유를 없앴다.
• ScrollView에는 flex-1을 적용해 스크롤이 화면 전체를 뒤덮게 했다.
• 스크롤 내부 View 에 헤더 컴포넌트의 높이 margin-top을 적용해 리스트가 아래에서 시작하도록 했다.
• 마지막으로 해당View 에 min-h-screen을 적용해서, 리스트 내용이 비어있어도 스크롤이 화면 끝까지 닿도록 처리했다.

구현한 코드

export default function Rank(){
	return (
		{/* 유저 랭킹, 최고점수 표시 */}
		<View className="absolute h-header">...</View>
		{/* 랭킹 상위 100명 표시 */}
		<ScrollView className="flex-1">
			<View className="mt-header min-h-screen">
				{/* 랭킹 리스트 컴포넌트들 */}
			</View>
		</ScrollView>
	)
}

마무리

Tailwind는 빠르고 직관적인 스타일링 도구지만, React Native에서 사용할 땐 몇 가지 제약을 이해하고 대응하는 것이 중요했다.
이번 경험을 통해 Tailwind의 동작 방식, 폰트와 레이아웃의 관계, 스크롤 UI 구성법을 더 깊이 이해하게 되었다.

Zustand는 작고 빠르며 확장 가능한 React 등에서 사용하는 상태 관리 라이브러리이다.

설치 : npm install zustand

기본 사용방법

create를 사용해 만들어진 Store를 통해서 상태를 관리한다.

import { create } from 'zustand';

// Store에 저장할 상태의 타입 선언
type CountState = {
  count: number;
  increase: () => void;
  decrease: () => void;
};

// Store 생성 - 타입을 지정하지 않으면 state는 any타입이 된다.
const useStore = create<CountState>()((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
}));

// Store 사용
function Screen() {
  const count = useStore((state) => state.count);
  const increase = useStore((state) => state.increase);
  const decrease = useStore((state) => state.decrease);

  return (
    <>
      <h1>{count}</h1>
      <button onClick={increase}>INCREASE</button>
      <button onClick={decrease}>DECREASE</button>
    </>
  );
}

useStore

create를 통해 만들어진 useStore는 커스텀 훅으로 useState처럼 작동한다.
상태를 컴포넌트에 넣어 사용하면 자동으로 리랜더링이 적용된다.

create()

create는 Store를 만드는 핵심 함수로 커스텀 훅을 만들어 반환한다.
반환된 훅을 사용하여 useState와 비슷하게 리렌더링을 할 수 있다.

type storeType = {
  count: number;
  increase: () => void;
};

const useStore = create<storeType>((set, get) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
}));

create 함수의 타입
function create<T>(stateCreatorFn: StateCreator<T>): UseBoundStore<StoreApi<T>>

• T : 정의하는 스토어 전체의 상태 타입
• StateCreator<T> : 스토어를 생성하는 함수
• UseBoundStore<StoreApi<T>> : 반환 타입, 우리가 사용하는 useStore 훅

더 정확한 타입 ([[커링 패턴]])
create<T>()(stateCreatorFn: StateCreator<T, [], []>): UseBoundStore<StoreApi<T>>

제네릭 타입으로 타입을 명시적으로 전달하고, 상태 생성 함수를 나중에 만들어 전달하게 되어있다.
create 함수가 반환한 상태 생성 함수 (storeCreator)를 곧바로 실행시킨다.

풀어서 설명한다면 흐름이 이런식이다.

1. create<T>() 호출 → storeCreator 함수 생성
2. storeCreator(stateCreatorFn) 호출 → userStore 생성

const storeCreator = create<T>();
const userStore = storeCreator(stateCreatorFn);

즉, 아래 한 줄은 위 두 줄과 같다.

const userStore = create<T>()(stateCreatorFn);

create의 사용 방식들

• create<T>(...) : 미들웨어를 사용하지 않을 때
• create<T>()(...) : 미들웨어를 사용하며, 타입을 명시적으로 지정할 때
• create(...) : 미들웨어를 사용하지만 타입 추론에 의존할 때 (combine)

• set : 상태를 변경하는 함수 (setState)
• get : 현재 상태를 가져오는 함수 (getState)

아래 두 set 함수는 동일하게 작동한다.

set((state) => ({ count: state.count + 1 }));
set({ count: get().count + 1 });

• state => ({}) : set() 내부에서만 사용하며 상태가 이전과 달라질 때 사용한다.
• get() : set() 외부에서도 사용 가능하며 여러 상태를 조합할 때 사용한다.

set()

set 함수는 상태를 업데이트 하는 핵심 함수다.
현재 상태를 받아서, 새 상태로 갱신하거나 부분적으로 병합한다.

set 함수의 타입
set: (partial: Partial<State> | (state: State) => Partial<State>, replace?: boolean) => void

partial은 상태 객체나 상태를 변경하는 함수를 받는다. (useState와 방식이 동일함)

• 직접 상태 객체 입력 : set({count: 5});
• 이전 상태를 기반으로 새 객체 반환 : set(state => ({count: state.count + 1}));

replace 옵션은 기존 상태와 병합하지 않고 ‘완전히 새 상태로 교체’ 한다.

+ {}를 ()로 감싸는 이유는 객체를 반환하기 위해서. ()=>{}로 사용하면 단순한 함수가 된다.

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

const b = () => ({});

Middlewares

combine

combine은 상태(state)와 액션(actions)를 분리해 구성할 때 사용하는 함수다.
두 개의 객체(초기 상태 객체, 액션 함수 객체)를 하나로 결합해 stateCreatorFn으로 만들어준다.
액션 함수는 set을 사용해 기존 상태를 업데이트 한다.

combine은 상태와 액션을 결합하며 타입을 자동 추론하기 때문에 제네릭을 통한 명시가 필요 없어진다.

type CountState = { count: number };
type CountActions = { increase: () => void };
type CountStore = CountState & CountActions;

// combine을 사용하지 않음
const useStore1 = create<CountStore>((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
}));

// combine을 사용해 상태와 액션을 분리함
const useStore2 = create<CountStore>( // 제네릭 <CountStore> 불필요함
  combine({ count: 0 }, (set) => ({
    increase: () => set((state) => ({ count: state.count + 1 })),
  }))
);

subscribe, subscribeWithSelector

스토어의 상태 변경사항을 감지해 등록된 리스너를 실행시켜주는 리스너 구독 함수이다.

// 리스너 함수 구독
const unsubscribe = useStore.subscribe((state) => {
  console.log('state has changed', state);
});
// 리스너 구독 해제
unsubscribe();

특정 상태값만 감시하고 싶거나 이전 상태와 변경된 상태를 비교할 때는 subscribeWithSelector미들웨어를 사용한다.

create로 스토어를 생성하며 subscribeWithSelector 미들웨어 등록해준다.

const useStore = create<CountState>()(
  subscribeWithSelector((set) => ({
    count: 0,
    increase: () => set((state) => ({ count: state.count + 1 })),
    decrease: () => set((state) => ({ count: state.count - 1 })),
  }))
);

미들웨어를 사용하면 subscribe 사용방식이 변화한다.

• selector : 전체 상태에서 특정 값만 선택하는 선택자 함수
  • 선택된 상태값의 변경에만 리스너가 실행된다.
• listener : 상태 변경시 실행되는 리스너 함수
  • 이전값과 변경값을 인자로 받는다.

// 특정 상태값만 선택해주는 선택자
const selector: (state: CountState) => number = (state) => state.count;
// 이전값과 변경값을 비교해주는 리스너
const listener = (newCount: number, oldCount: number) => {
  console.log(`${newCount} -> ${oldCount}`);
};

// 선택자, 리스너 구독
const unsubscribe = useStore.subscribe(selector, listener);

persist

persist는 스토어의 상태를 브라우저/디바이스의 로컬 저장소(localStorage 등)에 자동으로 저장하고 복원시켜주는 미들웨어이다.
복원(Rehydration) : 로컬 저장소의 데이터를 앱 실행시 자동으로 store에 불러오는 과정

인자로 stateCreatorFn과 persistOptions를 받는다.

const useStore = create<CountStore>()(
  persist(
    (set) => ({
      count: 0,
      increase: () => set((state) => ({ count: state.count + 1 })),
    }),
    {
      name: 'count-storage', // localStorage 키 이름
    }
  )
);

persistOptions 주요 옵션

• name : 필수, 저장소의 키 이름
• storage : 저장소 선택 (기본값 : createJSONStorage(()=>localStorage)) -> MMKV 사용
• partialize : 저장할 필드(상태)만 선택적으로 지정
• onRehydrateStorage : 복원 이벤트 핸들러 설정
• version : 상태 버전 지정 (마이그레이션)
• migrate : 버전 불일치 시, 저장 상태를 새로운 구조로 변환
• merge : 복원 시 저장 상태와 초기 상태를 어떻게 병합할지 지정
• skipHydration : 자동으로 상태를 복원하지 않음

Zustand persist + MMKV

persist 미들웨어를 이용해 Zustand와 MMKV 로컬 스토리지를 연결해 앱 실행시 자동으로 데이터를 불러올 수 있다.

• MMKV 사용을 위한mmkvStorage 인스턴스를 만든다.
• Zustand의 persist 미들웨어에 사용할 수 있는zustandStorage 인터페이스 객체를 만든다.
  • createJSONStorage()를 통해 JSON처리와 티입 호환을 맞춘다.

import { MMKV } from 'react-native-mmkv';

const mmkvStorage = new MMKV();

const zustandStorage = createJSONStorage(() => ({
  setItem: (name, value) => {
    return mmkvStorage.set(name, value);
  },
  getItem: (name) => {
    const value = mmkvStorage.getString(name);
    return value ?? null;
  },
  removeItem: (name) => {
    return mmkvStorage.delete(name);
  },
}));

이제 create를 통해 저장할 데이터에 맞는 커스텀 훅을 생성해 사용한다.

type UserStore = {
  userData: UserDataType;
  setUserData: (data: Partial<UserDataType>) => void;
  // Partial : 부분적인 업데이트를 위해서 UserDataType의 부분만 가진 객체를 받는다.
};

export const useUserStore = create<UserStore>()(
  persist(
    (set) => ({
      userData: {
        userID: '',
        nickname: '',
        rank: 0,
        topScore: 0,
      },
      setUserData: (data) =>
        set((state) => ({
          ...state,
          ...data,
        })),
    }),
    {
      name: 'user-store',
      storage: zustandStorage,
      partialize: (state) => ({ ...state.userData }), // userData만 저장, setUserData 저장X
    }
  )
);

퍼즐을 만들면서 교착상태에 빠져 더이상 진행할 수 없는 문제가 발생했다.

원하는 기능은 5:5로 문제와 정답을 연결하는 기능이다.

• 문제, 정답이 이전과 다른 랜덤한 위치에 떠야 한다.
• 항상 연결할 수 있는 문제-정답 조합이 하나 이상 남아있어야 한다.

첫 접근 방식

처음에는 문제-정답이 모두 이어지는 그룹을 계속 쌓아가는 스택 방식을 생각했다.

• 버튼의 개수대로 문제들을 모아놓은 그룹을 만든다. - 이 그룹이 1개 층이 된다.
• 문제를 맞추면 다음 스택에 있는 문제가 올라온다.
• 윗층을 모두 맞추면 아래층으로 완전히 넘어가면서 항상 조합이 나오도록 유지된다.

시각화 예시

• 맞춘 문제는 사라진다.
• 다음 스택의 문제들이 보여진다.

예시 상황

하나의 정답에 연결될 수 있는 두 개의 정답이 존재할 수 있다.

다른 층의 조합을 연결한다면 교착상태가 발생해 더이상 진행할 수 없어진다.

문제와 정답에 중복이 없다면 교착이 발생하지 않지만 구구단의 특성상 중복을 제거할수는 없다.
ex) 6x4, 4x6, 8x3, 3x8 = 24

해결

Queue에서 문제를 생성해서 List로 이동해 보여지는 방식을 떠올렸다.
문제Queue, 정답Queue / 문제List, 정답List 두 종류씩 만든다.

알고리즘

문제List 채우기

1. 문제List 빈 칸에 문제Queue의 문제를 채운다. (문제Q -> 문제L)
2. 빈 칸으로 이동시킬 문제가 없다면 새로운 문제를 생성하고, 정답을 정답Queue 랜덤 위치에 추가한다.
   (문제L : 문제 생성 / 정답Q : 정답 생성)

정답List 채우기

1. 정답List 빈 칸에 정답Queue의 정답을 채운다. (정답Q -> 정답L)
2. 빈 칸으로 이동시킬 정답이 없다면 새로운 문제를 생성하고, 문제는 문제Queue 랜덤 위치에 추가한다.
   (정답L : 정답 생성 / 문제Q : 문제 생성)

-> 문제List, 정답List가 모두 채워졌고, List들을 화면에 보여준다.

게임을 진행하며 반복한다.

설명

먼저 문제List를 모두 채우고, 조합이 생성될 때 정답Queue를 랜덤하게 채운다.
그 다음 정답List를 모두 채우고 마찬가지로 조합이 생성될 때 문제Queue를 랜덤하게 채운다.

• 초기 상태
  

1. 문제 이동
   

2. 문제 채우기
   

3. 정답 이동
   

4. 정답 채우기
   

코드

export const queueAlgorithm = (
  questQueue: QuestArray[],
  questList: QuestArray[]
): [QuestArray[], QuestArray[]] => {
  // 큐와 리스트를 분할해 사용함
  const QQueue = [...questQueue[0]];
  const AQueue = [...questQueue[1]];
  const QList = [...questList[0]];
  const AList = [...questList[1]];

  // 문제_리스트의 빈칸을 모두 채운다.
  QList.forEach((Q, i) => {
    if (Q === null && QQueue[i] === null) {
      // 문제가 비어있고 문제_큐의 해당 칸이 비어있다면 - 문제를 생성한다.
      const [newQuest, newAnswer] = questGenerator();
      // 문제의 정답을 정답_큐의 랜덤 위치에 추가한다.
      insertRandom(AQueue, newAnswer);
      QList[i] = newQuest;
    } else if (Q === null && QQueue[i] !== null) {
      // 문제가 비어있고 문제_큐의 해당 칸이 존제한다면 - 문제를 채운다.
      const temp = QQueue[i];
      QQueue[i] = null;
      QList[i] = temp;
    }
  });

  // 정답_리스트의 빈칸을 모두 채운다.
  AList.forEach((A, i) => {
    if (A === null && AQueue[i] === null) {
      // 정답이 비어있고 정답_큐의 해당 칸이 비어있다면 - 문제를 생성한다.
      const [newQuest, newAnswer] = questGenerator();
      // 문제를 문제_큐의 랜덤 위치에 추가한다.
      insertRandom(QQueue, newQuest);
      AList[i] = newAnswer;
    } else if (A === null && AQueue[i] !== null) {
      // 정답이 비어있고 정답_큐의 해당 칸이 존제한다면 - 정답을 채운다.
      const temp = AQueue[i];
      AQueue[i] = null;
      AList[i] = temp;
    }
  });

  // 큐와 리스트 다시 병합해서 반환함
  const newQueue = [QQueue, AQueue];
  const newList = [QList, AList];
  return [newQueue, newList];
};

결론

알고리즘을 만들 때는 개발을 편하게 하기 위해서 노트에 그림을 그려가며 흐름을 정해놔야겠다.
그래도 문제를 빨리 발견해서 바로 해결할 수 있었다.

문제가 생기고 막힐 때는 잠시 쉬어가며, 어쩌다 이 지경이 되었는지 복기해보자.
일단 밥을 먹다보면 해결 방법이 떠오를 것이다.

react-native-mmkv ->

ReactNative를 위한 로컬 저장소
WeChat앱의 저장소로 쓰이는 Tencent/MMKV를 기반으로 만들어졌다.

• C++을 기반으로 만들어져 속도가 매우 빠르다.
• 동기적으로 작동해서 프로미스를 사용하지 않는다!
• 암호화 (secure storage)를 지원한다.
• 저장소 위치를 지정할 수 있다.

시작하기

npm install react-native-mmkv

재사용 가능한 MMKV의 인스턴스를 생성해서 사용한다.
기본 MMKV 스토리지 아이디로 인스턴스가 생성된다. storage ID : mmkv.default

import {MMKV} from 'react-native-mmkv';

export const storage = new MMKV();

커스텀 스토리지

커스텀 스토리지 아이디를 통해 커스텀 스토리지를 생성한다.

import {MMKV, Mode} from 'react-native-mmkv';

export const storage = new MMKV({  
  id: `user-${userId}-storage`,
  path: `${USER_DIRECTORY}/storage`,
  encryptionKey: 'hunter2',
  mode: Mode.MULTI_PROCESS,
  readOnly: false
});

• id : 스토리지 인스턴스의 ID
• path : 스토리지의 루트 위치. 기본으로는 $(Documents)/mmkv/~ 위치로 저장된다.
• encryptionKey : 암호/복호화 키. 기본으로 일반 텍스트로 저장, 암호화를 하지 않는다.
• mode : MMKV 프로세스의 동작. MULTI_PROCESS로 설정하면 외부 앱에서 데이터를 수정할 수 있다고 본다.
• readOnly : 읽기 전용 모드

앱을 다시시작할 때 항상 같은 키로 저장소를 초기화 해야 데이터를 읽을 수 있다.
암호화 키는 Android Keystore, IOS Keychain 등을 사용

사용하기

저장할 수 있는 데이터 타입은 String, Number, Boolean 3가지가 있다.

Set

데이터 저장하기 (저장할 때는 타입 명시 X)

storage.set('user.name', 'Marc')
storage.set('user.age', 21)
storage.set('is-mmkv-fast-asf', true)

Get

데이터 불러오기 (특정 타입을 명시해 불러와야 한다.)

const username = storage.getString('user.name') // 'Marc'
const age = storage.getNumber('user.age') // 21
const isMmkvFastAsf = storage.getBoolean('is-mmkv-fast-asf') // true

Hooks

React Hook과 연결된 방식으로 사용한다.
[불러올 State 변수, 저장하는 함수]

const [username, setUsername] = useMMKVString('user.name')
const [age, setAge] = useMMKVNumber('user.age')
const [isMmkvFastAsf, setIsMmkvFastAf] = useMMKVBoolean('is-mmkv-fast-asf')

Keys

키를 통해서 값을 확인하고 삭제할 수 있다.

// 특정 키가 있는지 확인
const hasUsername = storage.contains('user.name')

// 모든 키 가져오기
const keys = storage.getAllKeys() // ['user.name', 'user.age', 'is-mmkv-fast-asf']

// 특정 키와 연결된 값 삭제
storage.delete('user.name')

// 모든 키/데이터 삭제
storage.clearAll()

Objects

Object형 데이터를 저장하기 위해 JSON.stringify을 사용해 String으로 변환해서 저장한다.
불러올 때도 JSON.parse로 변환해 사용한다.

const user = {
  username: 'Marc',
  age: 21
}

// JSON string으로 변환
storage.set('user', JSON.stringify(user))

// string 값을 불러오며 다시 오브젝트로 변환
const jsonUser = storage.getString('user') // { 'username': 'Marc', 'age': 21 }
const userObject = JSON.parse(jsonUser)

Encryption

이미 존제하는 스토리지의 암호 재설정 및 암호 제거
보안 정책 변경, 키 교체 등에 사용함

// 모든 값을 프라이빗 키로 암호화
storage.recrypt('hunter2')

// 암호 삭제
storage.recrypt(undefined)

Buffers

성능과 압축이 필요할 때 Buffer를 사용하지만 주로 JSON 문자열을 사용해 저장한다.

ArrayBuffer : 원시 바이너리 데이터 버퍼를 표현한다.
ArrayBuffer(버퍼 크기)

Uint8Array : TypedArray로 8비트의 부호 없는 정수 배열이다.
길이, 배열, TypedArray, ArrayBuffer 등으로 만들 수 있다.

TypedArray : 타입이 있는 배열, 모든 원소는 동일한 타입이고 만들면 길이를 수정할 수 없다.
배열의 읽기/쓰기를 위해서 사용한다.

// 3 크기의 ArrayBuffer 생성
const buffer = new ArrayBuffer(3)
// ArrayBuffer로 Uint8Array 생성
const dataWriter = new Uint8Array(buffer)
// dataWriter를 사용하여 buffer 값 작성
dataWriter[0] = 1
dataWriter[1] = 100
dataWriter[2] = 255
// 스토리지에 데이터 저장
storage.set('someToken', buffer)

//---------
const buffer = storage.getBuffer('someToken')
console.log(buffer) // [1, 100, 255]

Size

스토리지 크기 확인

// 스토리지 크기를 byte로 가져옴
const size = storage.size
if (size >= 4096) {
  // 사용하지 않는 키와 캐시를 삭제함
  storage.trim()
}

Zustand와 연동해서 사용

Zustand persist-middleware ->
Zustand와 연동해서 하나의 storage로 편하게 관리할 수 있다.

import { StateStorage } from 'zustand/middleware'
import { MMKV } from 'react-native-mmkv'

const storage = new MMKV()

const zustandStorage: StateStorage = {
  setItem: (name, value) => {
    return storage.set(name, value)
  },
  getItem: (name) => {
    const value = storage.getString(name)
    return value ?? null
  },
  removeItem: (name) => {
    return storage.delete(name)
  },
}

React Navigation

React Navigation은 React Native에서 화면 이동(네비게이션)을 쉽게 구현할 수 있도록 도와주는 라이브러리다.
화면 이동, Tab, Drawer, Modal 메뉴, 웹 페이지의 URL params처럼 데이터를 전달하는 기능 등을 지원한다.

네비게이터 종류

• Stack Navigator : 한 화면씩 쌓이는 방식
• Tab Navigator : 하단 탭 메뉴로 화면 전환
• Drawer Navigator : 옆에서 슬라이드해 나오는 메뉴 (햄버거 메뉴)
• Nested Navigator : 하나의 화면에 여러 네비게이터를 중첩해 사용 (Tab + Stack 등)
• Modal : 모달을 띄우는 네비게이터 옵션

패키지

• @react-navigation/native : 핵심 라이브러리 - 네비게이션 컨텍스트 제공 (필수)
• @react-navigation/native-stack : 네이티브 느낌의 스택 네비게이터
• @react-navigation/bottom-tabs : 탭 네비게이터
• @react-navigation/drawer : 드로어 네비게이터
• @react-navigation/elements : 네비게이션에 필요한 UI 컴포넌트를 모아놓은 패키지

Static vs Dynamic

React Navigation에는 두가지 사용 방식 Static/Dynamic이 있다.

장단점

React Navigation에서 추천하는 기본적인 방식은 Static 방식이고 동적 구성이 필요하다면 Dynamic 방식을 사용하면 된다.

Tutorial

React Navigation - Getting started

설치 및 네이티브 세팅

React Navigation 설치 : npm install @react-navigation/native
추가 유틸리티 설치 : npm install react-native-screens react-native-safe-area-context

네이티브 세팅

IOS : npx pod-install ios
Android : android/app/src/main/java/<your package name>/ 수정

Stack Navigator

createNativeStackNavigator : Stack Navigator 생성 (Drawer, Tab 등 사용 가능)
createStaticNavigation : Navigator를 가져와 앱에 랜더링하는 컴포넌트를 반환, 앱에서 한 번만 호출

import { createStaticNavigation } from '@react-navigation/native';  
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './screens/HomeScreen';

// Stack Navigator 생성
const RootStack = createNativeStackNavigator({
	screens: {
		Home: HomeScreen,
	}
});

// 네비게이션 컴포넌트 생성
const Navigation = createStaticNavigation(RootStack);

export default function App(){
	return <Navigation />
}

화면 이동

• navigation.navigate('Details') : 해당 스크린으로 이동, 이미 스택에 있으면 기존 화면으로 이동 (중복 방지)
• navigation.push('Details') : 해당 스크린을 새로 하나 더 스택에 쌓음 (중복 가능)
• navigation.goBack() : 뒤로가기, 히스토리 pop
• navigation.popTo('Home') : 히스토리에 Home 화면으로 이동
• navigation.popToTop() : 최상위로 이동

// 화면 이동에 담을 props 데이터의 타입을 지정
export type RootStackParams = {
	Home: undefined; //param
	Details: undefined; //param
};

export default function HomeScreen(){
	// 네비게이션 생성
	// 네비게이션에서 전달할 props 데이터 타입을 지정, 타입을 사용하는 화면 명시
	type NavigationProp = NativeStackNavigationProp<RootStackProps, 'Home'>;
	const navigation = useNavigation<NavigationProp>();
	
	return <Pressable onPress={()=>{
		navigation.navigate('Details');
	}}>
		Go Details!
	</Pressable>
}

Params 데이터 전달

Params : React Navigation을 통해서 데이터를 전달한다. (웹에서의 URL Params처럼 작동)
Props : JSX 컴포넌트를 통해서 데이터를 전달한다.

React Navigation에서 화면의 Props로 Params 데이터인 route와 navigation 데이터를 넣어준다.

// 화면 이동에 담을 props 데이터의 타입을 지정
export type RootStackParams = {
	Home: undefined;
	Details: { pageID: string };
};

// 해당 화면 컴포넌트의 props 타입 설정
type DetailsScreenProps = NativeStackScreenProps<RootStackParams, 'Details'>;

// prop 으로 param route를 받아서 데이터 사용
function DetailsScreen({ route }: DetailsScreenProps) {
	// 네비게이션 생성
	type NavigationProp = NativeStackNavigationProp<RootStackParams, 'Details'>;
	const navigation = useNavigation<NavigationProp>();

	// route 에서 데이터 꺼내서 사용
	const { pageID } = route.params;

	return <Text>{pageID}</Text>
}

// Stack Navigator에서 Props 기본값 설정
const RootStack = createNativeStackNavigator<RootStackParams>({
	screens: {
		Details: { 
			screen: DetailsScreen,
			// Props 기본값 설정
			initialParams: { pageID: '29809' } 
		},
	},
});

1. navigation.navigate('RouteName', {params object}) : navigation 메소드에 param 전달
2. navigation.popTo('BeforeScreen', {params object}) : popTo를 통해 이전 화면에 param을 전달
3. route.params : 전달된 param 불러옴
4. navigation.setParams({params object}) : 현재 화면의 param 데이터 변경

중첩 화면(Nested navigator)에서 스크린을 명시해서 데이터 전달

// More 화면으로 이동, More 화면 안의 Settings 화면에 데이터 전달
navigation.navigate('More', {
  screen: 'Settings',
  params: { user: 'jane' },
})

추가 규칙

• 너무 많은 데이터를 담아서는 안된다.
• Webpage의 URL과 마찬가지로 ID, sort, keywords 등의 간단한 정보만 전달한다.

Nested Navigator - 중첩 화면

네비게이터 안에 네비게이터를 넣어서 사용할 수 있다. (일반 컴포넌트와 동일)
자식 네비게이터에서 Navigation Actions를 버블업 해서 부모 네비게이터의 Action을 사용할 수 있다.

• Stack Navigator
  • Home screen
  • Drawer Navigator
    • User screen
    • Setting screen

Drawer Navigator 의 화면에서는 Stack Navigator의 메소드 push, replace 등을 사용 가능하다.
반대로 Stack Navigator의 화면에서는 openDrawer, closeDrawer 등의 Drawer Navigator의 메소드를 사용 불가능하다.

만약 부모 네비게이터에서 자식의 액션을 사용하려면 dispatch를 사용해야 한다.
dispatch : navigation state(상태)를 업데이트 한다.

navigation.dispatch(DrawerActions.openDrawer())

Navigation Lifecycle

화면을 이동해도 기존의 화면이 Unmount 되지 않고 계속 위로 쌓인다. (화면이 추가되어도 이전 화면의 cleanup 함수가 실행되지 않음) 뒤로가기로 이전 화면에 돌아오면 남아있던 화면이 계속 보여진다.

Home (Home Mount) -> Details (Details Mount, Home remain) -> Home (Details Unmount)

유저가 특정 화면에 들어오고 나가는 걸 확인하기 위해서 focus, blur 이벤트를 확인한다.

useEffect(() => {  
	// 화면에 들어올 때 호출
	const unsubscribe = navigation.addListener('focus', () => {  
		console.log('ProfileScreen focused');  
	});
  
	return unsubscribe;  
}, [navigation]);  

useEffect(() => {  
	// 화면에서 나갈 때 호출
	const unsubscribe = navigation.addListener('blur', () => {  
		console.log('ProfileScreen blurred');  
	});  
	  
	return unsubscribe;  
}, [navigation]);

+ useEffect의 의존성으로 navigation 객체를 넣어야 네비게이션 이동시 변화를 반영할 수 있다.

Modal

화면을 모달로 띄우기 위해서는 네비게이터 설정에서 화면의 presentation 옵션으로 modal을 설정해준다.
만약 배경이 투명한 모달을 사용하고 싶다면 transparentModal로 설정하면 된다.

const RootStack = createStackNavigator({
	Modal: {
		screen: ModalScreen,
		options: {
			presentation: 'modal'
		}
	}
})

장단점 정리

프로젝트에 적용될 장단점

React Native CLI

장점

• 내 컴퓨터를 사용해 로컬 빌드가 가능하다.
• 필요한 것들만 설치해서 빌드해 앱 용량 최적화에 유리하다.
• 일부 Expo SDK 라이브러리를 사용 가능하다.

단점

• 초기 설정이 복잡하고 추가 툴(Xcode, Android Studio)가 필요하다.
• 테스트를 위해 빌드와 설치 과정이 필요하다.

Expo

장점

• Expo Go 앱을 통해 편리한 테스트가 가능하다.
• Expo SDK에서 다양한 모듈, 라이브러리를 지원한다.
• Expo Updates를 통한 OTA를 기본 지원한다.

단점

• EAS를 통한 클라우드 서버를 통해서만 빌드가 가능하다. (대기열)
• ReactNative의 세부 구조를 알기 어렵다.

CLI를 선택한 이유

React Native를 제대로 이해하고 구조를 파악하기 위해서 CLI를 선택했다.

1. 초기 설정을 직접 할 수 있다.
   • Expo에서는 설정이 되어있어서 알기 어렵지만, CLI는 필요한 설정을 직접 구성하면서 구조를 익힐 수 있다.
2. React Native의 기본 API들을 사용한다.
   • Expo SDK는 API를 수정한 버전을 사용하기 때문에 원래의 RN 기능을 다루기 위해서는 CLI를 사용해야 한다.
3. 확장성에 제한이 없다.
   • Expo는 일부 네이티브 모듈에 사용 제약이 있지만 CLI는 자유롭게 연동 가능하다.
4. 로컬에서 직접 빌드가 가능하다.
   • Expo는 빌드 서버에서 대기열이 발생하지만 CLI는 직접 컴퓨터에서 바로 빠르게 빌드할 수 있다.
5. 앱 용량 최적화
   • Expo는 여려 기능을 기본적으로 포함해 앱 용량이 커질 수 있다. CLI는 필요한 모듈만 설치해 가볍고 단순한 앱을 만들 수 있다.

Expo는 빠른 개발과 테스트에 유리하지만, React Native의 구조와 작동 방식을 깊이 있게 이해하기에는 한계가 있었다. CLI 환경에서는 직접 구조를 설계하고 다양한 네이티브 기능을 다뤄볼 수 있어, React Native를 더 깊이 배우기에 적합하다고 느꼈다.Expo Go를 사용하지 못하는게 최대 단점… 😅