Test

이 페이지는 블로그/노트용으로 스택을 한곳에 모아 둔 실험 메모다. 본격 가이드라기보다, 프론트엔드 쪽에서 자주 붙이는 도구를 “왜 후보로 두지?” 수준으로만 적어 둔다.

• 테스트는 Jest, UI 확인은 Storybook, GraphQL을 붙이면 Apollo Client를 후보로 둔다.
• 전역 상태는 처음엔 Recoil을 봤지만 저장소가 보관 처리돼서 지금은 Zustand를 쓴다.
• 모션은 Reanimated, 배포는 GitHub Actions로 트리거하고 Fastlane으로 스토어까지 올린다.

Jest

유닛·스냅샷용. React(와 React Native) 쪽에서 기본처럼 쓰이는 편이라, 컴포넌트나 유틸이 깨졌는지 빠르게 볼 때 둔다. 처음엔 설정만 해도 시간이 갔는데, 스냅샷이 의도치 않게 바뀌는 걸 몇 번 겪고 나서부터는 “무엇을 스냅샷으로 둘지”를 더 가린다. 요즘은 화면 전체 스냅샷보다 Testing Library로 “버튼을 누르면 문구가 바뀐다” 같은 동작을 확인하는 쪽이 덜 깨졌다.

// formatPrice.test.js
import { formatPrice } from './formatPrice'

describe('formatPrice', () => {
  it('천 단위 쉼표를 붙인다', () => {
    expect(formatPrice(12000)).toBe('12,000원')
  })
  it('null이면 빈 문자열', () => {
    expect(formatPrice(null)).toBe('')
  })
})

Storybook

UI를 화면 단위로 따로 띄운다. 앱 전체 플로우를 안 타고도 버튼·카드·모달 상태를 맞춰 볼 수 있어서, 디자인 확인이나 회귀 체크할 때 편했다.

Apollo Client

GraphQL 클라이언트. 쿼리/뮤테이션과 캐시를 묶어 다룬다. REST만 쓰는 프로젝트면 필수는 아니고, GraphQL API를 붙일 때 로딩·캐시를 한곳에서 관리하고 싶을 때 후보로 둔다.

Recoil

React 전역 상태. Context만으로 깊어지는 전달이 거슬릴 때 atom 단위로 쪼개 보는 식으로 접근한다. 팀 표준이 Redux나 Zustand면 굳이 새로 안 넣어도 된다. 그리고 Recoil 저장소가 2025년 초에 보관(archive) 처리돼서, 새 프로젝트에는 더 안 넣는다. 같은 자리에 지금은 Zustand를 쓴다.

Reanimated 2 계열 애니메이션

네이티브 스레드 쪽에서 모션을 돌리는 쪽. 스크롤·제스처와 맞물릴 때 Animated만으로 버벅이면 여기를 본다. API는 메이저마다 갈린다. 2에서 들어온 useSharedValue, useAnimatedStyle, withTiming은 지금도 그대로고, 4부터는 New Architecture가 필수라 RN 버전부터 확인한다.

Github Actions + Fastlane

빌드·스토어 배포를 손으로 반복하지 않으려는 조합. Actions로 트리거하고 Fastlane으로 서명·업로드를 묶는 식이 흔하다. 키스토어와 인증서 경로는 프로젝트마다 다르니 Android, iOS 배포 메모와 같이 맞춘다.

태그를 밀면 Actions가 돌고, 그 안에서 Fastlane lane 하나만 부르는 식으로 두면 로컬에서도 같은 lane을 돌려 볼 수 있어서 편했다.

# .github/workflows/ios-beta.yml
on:
  push:
    tags: ['v*']
jobs:
  beta:
    runs-on: macos-latest
    steps:
      - uses: actions/checkout@v4
      - uses: ruby/setup-ruby@v1
        with:
          bundler-cache: true
      - run: bundle exec fastlane ios beta
        env:
          MATCH_PASSWORD: ${{ secrets.MATCH_PASSWORD }}
          APP_STORE_CONNECT_API_KEY: ${{ secrets.ASC_API_KEY }}

위 여섯 가지는 유닛·UI·GraphQL·상태·모션·CI까지 한 바퀴 도는 실험 스택이다.