기본 테스트 라이브러리

• vitest: 빠르고 가벼운 JavaScript 테스트 프레임워크
• eslint-plugin-vitest: Vitest 관련 ESLint 규칙 제공
• happy-dom: 가벼운 가상 DOM 구현체 (GUI 없는 브라우저 환경 제공)
  • 테스트, 웹 스크래핑, SSR 환경에서 활용 가능
• @testing-library/user-event: 사용자의 실제 브라우저 이벤트를 시뮬레이션하는 라이브러리
• @testing-library/jest-dom: Jest 전용 매처 제공
• Vitest에서도 Jest 매처를 지원하므로, 이를 활용해 직관적인 테스트 코드 작성 가능

Nuxt/Vue 테스트 관련 라이브러리

• @testing-library/vue: Vue 컴포넌트 테스트를 쉽게 작성할 수 있도록 지원 (@vue/test-utils 기반)
  • 내부적으로 @testing-library/dom을 사용해 DOM 요소 탐색 및 테스트 가능 (별도 설치 필요 없음)
• @vue/test-utils: Vue 3 컴포넌트 테스트를 위한 유틸리티 제공
• @nuxt/test-utils: Nuxt 앱의 테스트 환경을 설정하고 실행할 수 있도록 지원

2. Nuxt 런타임 환경 설정

Nuxt 환경을 추가해야 아래의 요소들을 정상적으로 테스트할 수 있다.

• Nuxt 전용 API: useNuxtApp(),useFetch() 등
• Nuxt 플러그인,미들웨어,자동 주입된 함수: useRoute(),useCookie() 등
• Nuxt 파일 기반 구조
  • 파일 기반 라우팅: pages/ 디렉터리를 통한 자동 라우팅
  • 기타 디렉터리 자동 처리: layouts/, server/ 등

Nuxt 환경 활성화

1. 부분적 Nuxt환경 활성화하는 방법 2가지

1. .nuxt.가 포함된 파일명 ex) my-file.nuxt.test.ts
2. 테스트 파일에 // @vitest-environment nuxt 주석 추가

2. 모든 테스트 Nuxt 환경 기본 설정하는 방법

vitest.config.ts에서 environment: 'nuxt’ 설정

// vitest.config.ts
import { defineVitestConfig } from '@nuxt/test-utils/config'

export default defineVitestConfig({
  test: { environment: 'nuxt' }
})

3. 특정 테스트 파일에서 Nuxt 환경을 제외하는 방법

// @vitest-environment node 주석 추가해 Nuxt환경 비활성화

3. Nuxt Dev Tools에서 테스트 (선택 사항)

export default defineNuxtConfig({
  modules: ['@nuxt/test-utils/module']
})

nuxt.config 파일에 @nuxt/test-utils/module을 추가하면 Nuxt DevTools에서 단위 테스트를 실행할 수 있으며, 추가적으로 @vitest/ui 가 필요하다.

로딩 표시 최적화를 위해 로딩이 1초 이상일 때만 useLoadingStore().show()로 로딩 스피너를 표시하였다.

문제는 새로고침을 하면(SSR) Nuxt의 $fetch API에 문제가 생겨서 데이터 요청을 하지 않는다. ⬇️에러 메시지⬇️

[nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function.

2. 디버깅 과정

최적화 후 문제가 생겨서 이전 코드와 비교를 진행했다. 전에는 onRequest에서 스토어 초기화 및 실행을 반드시 진행하였다.

// before
onRequest({ options }) {        
 useLoadingStore().show() 🚩
 options.headers = {생략}      
},      
onResponse() {        
 useLoadingStore().hide()      
},

// after
onRequest({ options }) {        
    options.headers = {생략}
    if (timer) clearTimeout(timer)        
    timer = setTimeout(() => {          
        useLoadingStore().show() 🚩   
    }, 1000)      
},      
onResponse() {        
    if (timer) clearTimeout(timer)        
    useLoadingStore().hide()      
},

하지만 현재 코드는 요청이 1초가 지나지 않으면 스토어 초기화 및 실행을 하지 않는다. onResponse에서 초기화가 되면 문제가 생기는 것이였다.

• useLoadingStore() 호출: 스토어 인스턴스 생성 혹은 가져옴
• SSR) onResponse에서는 인스턴스 가져오기 가능, 생성은 불가

$fetch 외부와 onRequest에서 초기화하니 정상 동작하였다. 또는 runWithContext를 사용해 Nuxt 컨텍스트를 복원할 수 있다.

서버에서 사용할 필요가 없는 경우 클라이언트에서만 스토어에 접근하게 하면 된다.

onResponse에서 Nuxt 컨텍스트 사용하는 방법 4가지

1. $fetch 외부에서 초기화
2. onRequset에서 초기화
3. runWithContext 사용
4. 서버에서 렌더링 필요 없으면) import.meta.client로 분기처리

로딩은 서버에서 렌더링될 필요가 없어서 분기처리 하면 해결된다. 하지만 서버 렌더링에서 Nuxt컨텍스트가 필요하다면 1~3번 방식을 이용하면 된다.

3. 결론

onResponse에서 Nuxt 컨텍스트와 Nuxt 컴포저블 참조는 가능하나, 이를 생성하면 SSR 환경에서 오류가 발생할 수 있다.

setup(), useFetch(), useAsyncData() 등은 클라이언트와 서버에서 실행될 때 Nuxt 컨텍스트에 접근할 수 있다. 하지만 Nitro 미들웨어(onRequest, onResponse 등)에서는 SSR 환경에서 실행될 때 Nuxt 컨텍스트를 유지하지 않는다.

• Nitro 미들웨어는 Nuxt가 아닌 Nitro 실행 컨텍스트에서 동작하기 때문에 Nuxt 컨텍스트에 접근할 수 없다.

따라서 useFetch() 내부에서 인터셉터(onRequest, onResponse…)를 사용할 경우, 클라이언트와 서버에서 동작 방식이 다르다는 것을 인지하고 개발해야 한다.

useNuxtApp은 클라이언트 및 서버 측에서 모두 사용할 수 있는(Nitro 라우트 내에서는 사용할 수 없음) Nuxt의 공유 런타임 컨텍스트에 액세스하는 방법을 제공하는 내장 컴포저블입니다(Nuxt 컨텍스트라고도 함). Vue 앱 인스턴스, 런타임 훅, 런타임 구성 변수 및 내부 상태(예: ssrContext 및 페이로드)에 액세스하는 데 도움이 됩니다.

https://nuxt.com/docs/api/composables/use-nuxt-app

const $customFetch = async (url, opts) => {
  const loadingStroe = useLoadingStore() 🚩
  let timer: NodeJS.Timeout | null = null

  return await $fetch({생략}, {
    ...opts,
    onRequest() {
        if(import.meta.client){ 🚩
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => useLoadingStore().show(), 1000)}
    },
    onResponse() {
      if(import.meta.client){ 🚩
        if (timer) clearTimeout(timer)
        useLoadingStore().hide()
      }
    },
  })
}

참고

• https://github.com/nuxt/nuxt/discussions/22615
• https://nuxt.com/docs/api/composables/use-nuxt-app#runwithcontext
• https://github.com/nuxt/nuxt/discussions?discussions_q=is%3Aopen+onResponse+Vue+instance+

쿼리 키는 각 쿼리를 식별하는 역할을 하며 캐싱, 데이터 동기화, 리페칭에 사용된다.

배열 또는 문자열로 정의하며, 같은 키를 가진 쿼리는 같은 데이터로 인식된다.

아래의 쿼리는 다른 키를 가지고 있어 따로 관리된다.

useQuery({ queryKey: ['todos'], queryFn: fetchTodos })
useQuery({ queryKey: ['todos', userId], queryFn: fetchUserTodos })

2. 쿼리 키 네이밍 패턴

2-1. 기본적으로 배열 사용

쿼리 키는 배열로 작성하는 것이 권장된다.

이유는 계층적 구조를 가져 더 세밀한 관리가 가능하다. 또 검색 및 필터링에 유리하다.

useQuery({ queryKey: ['todos', {userId: 1}], queryFn: fetchUserTodos })

queryKey: ['todos', {userId: 1}] 를 사용하면 특정 사용자만 조회하는 쿼리로 관리가 가능하다.

2-2 객체는 마지막에 넣기

쿼리 키에 객체도 포함이 가능하다. 하지만 마지막 요소로 두는 것이 좋다.

이유는 배열의 앞부분을 기준으로 더 쉽게 필터링이 가능하기 때문이다.

useQuery({ queryKey: ['todos', { userId: 1, status: 'done' }] })

위처럼 하면 [’todos’] 쿼리와 구분이 가능하면서, queryClient.invalidateQueries({ queryKey: ['todos'] })로 모든 todos 쿼리를 한 번에 무효화할 수 있다.

2-3 필터링 정보 포함

쿼리 키에 필터링 정보를 넣어 필터링이 변경될 때마다 새 데이터를 가져오게 할 수 있다.

useQuery({ queryKey: ['todos', { userId, status }], queryFn: fetchTodos })
// ['todos', { userId:1, status:done }] ≠ ['todos', { userId:1, status:pending }]

status가 done이면 완료된 할 일, pending이면 진행중인 할 일을 가져온다. 상태가 다르면 다른 키로 구분되어 각가 캐시된다.

2-4 객체 사용 주의사항

키 순서가 달라도 동일한 쿼리로 인식된다.

useQuery({ queryKey: ['todos', { status, page }] }) 
useQuery({ queryKey: ['todos', { page, status }] }) 
useQuery({ queryKey: ['todos', { page, status, other: undefined }] }) 

하지만 객체 내부의 값이 다르면 별개의 쿼리로 취급된다.

useQuery({ queryKey: ['todos', { page: 1 }] }) 
useQuery({ queryKey: ['todos', { page: 2 }] }) 

3. 쿼리 키 관리 예제

// Todo 목록 조회
useQuery({ queryKey: ['todos'], queryFn: fetchTodos })
// 특정 사용자 Todo 조회
useQuery({ queryKey: ['todos', { userId }], queryFn: fetchUserTodos })
// 특정 필터 적용된 Todo 조회
useQuery({ queryKey: ['todos', { userId, status: 'done' }], queryFn: fetchUserTodos })
// 모든 Todo 캐시 무효화
queryClient.invalidateQueries({ queryKey: ['todos'] })
// 특정 유저의 Todo 캐시 무효화
queryClient.invalidateQueries({ queryKey: ['todos', { userId }] })

4. ['todos', 1] VS ['todos', { userId: 1 }]

두 방식은 모두 특정 데이터를 조회할 때 사용하는 패턴이지만, 목적과 사용 범위가 다르다.

['todos', 1]

이 패턴은 특정 단일 항목을 조회할 때 사용한다. 보통 GET /todos/1 같은 요청에 해당한다.

예를 들면 특정 할 일의 상세정보, 특정 게시글 조회 등이 있다.

['todos', { userId: 1 }]

이 패턴은 여러 데이터를 조회할 때 사용한다. 보통 GET /todos?userId=1 같은 요청에 해당한다.

예를 들면 특정 사용자의 모든 할 일 목록, 특정 카테고리의 게시글 목록 등이 있다.

정리하면 ['todos', id]는 단일 리소스 조회, ['todos', { 필터 }]는 조건부 목록 조회에 활용된다.

쿼리 캐시는 이전에 가져온 데이터를 저장하여, 동일한 요청이 발생할 때 네트워크 요청 없이 빠르게 반환할 수 있도록 하는 기능이다.

TanStack Query는 기본적으로 쿼리 키를 기준으로 데이터를 캐싱한다.

특징

1. staleTime (신선도 시간)

이 시간이 지나기 전까지는 캐시된 데이터를 신선한(fresh) 상태로 간주한다.

stale상태는 새로운 데이터를 가져와도 되는 상태로 이때 리패치가 발생하면 새로 요청한다.

별다른 설정을 하지 않았다면 컴포넌트 마운트, 윈도우 포커스, 네트워크 재연결 등 발생하면 자동 리패치가 일어난다.

• 기본값: 0ms (즉시 stale 상태가 됨)

2. gcTime (가비지 컬렉션 시간)

캐시 데이터가 메모리에서 삭제되기까지의 시간이다.

• 기본값: 5분

3. 캐시된 데이터를 바로 반환

쿼리 요청 시 캐시 데이터가 있다면 바로 반환을 한다.

staleTime이 지나지 않았다면 추가 요청 없이 그대로 사용한다.

4. 쿼리 키가 동일하면 캐시 공유

동일한 쿼리 키를 가진 useQuery들은 같은 캐시 데이터를 참조한다.

2. queryClient

쿼리 캐시는 queryClient로 관리할 수 있고, useQueryClient()로 접근 가능하다.

기본적으로 특정 쿼리 키의 캐시 데이터 가져오기, 삭제, 갱신이 가능하다.

import { useQueryClient } from '@tanstack/vue-query'
const queryClient = useQueryClient()

// 캐시 데이터 가져오기
const userCache = queryClient.getQueryData(['user', userId])
// 캐시 삭제
queryClient.removeQueries(['user', userId])
// 데이터 강제 갱신 (리페치)
queryClient.invalidateQueries(['user', userId])

추가 메서드 소개

자세한 사용법은 아래 주소에 있다.

https://tanstack.com/query/v5/docs/reference/QueryClient

3.  데이터 프리패칭

프리패칭이란 사용자가 요청하기 전에 미리 데이터를 가져와서, 요청 시 더 빠르게 응답하는 기법이다.

prefetchQuery와 prefetchInfiniteQuery를 활용해서 미리 데이터를 가져올 수 있다.

queryClient.prefetchQuery: 특정 queryKey의 데이터를 미리 가져오고, useQuery가 실행될 때 캐시에서 즉시 반환한다.

queryClient.prefetchInfiniteQuery: useInfiniteQuery에 사용할 데이터를 미리 가져온다.

useQuery + staleTime: staleTime이 0이면 프리패칭을 해도 상세페이지로 가면 다시 새 데이터를 요청을 한다. 적절한 staleTime 설정을 해야 프리패칭 효과를 얻을 수 있다.

• useQuery의 staleTime이 5초라면 프리패칭 후 5초 동안 fresh상태다. 그래서 5초 전에 해당 쿼리가 있는 페이지로 이동하면 프리패칭된 데이터를 사용한다. 하지만 5초후에 이동하면 새 데이터를 요청한다.

프리패칭

<!-- 사용자 목록 페이지 -->
<script setup>
import { useQueryClient } from '@tanstack/vue-query'
const queryClient = useQueryClient()

const prefetchUserDetail = (userId) => {
    queryClient.prefetchQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId),
    gcTime: 1000 * 60 * 1
  })
}
</script>
<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      <!-- 마우스를 올리면 프리패칭 실행 -->
      <router-link to="`/user/${user.id}`"
        @mouseenter="prefetchUserDetail(user.id)"
      >
        {{ user.name }} 상세보기
      </router-link>
    </li>
  </ul>
</template>

프리패칭 데이터 사용

<!-- 사용자 상세보기 페이지 -->
<script setup>
import { useRoute } from 'vue-router'
import { useQuery } from '@tanstack/vue-query'
const route = useRoute()
const userId = route.params.id

const { data: user } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId),
    staleTime: 5000
  })
</script>
<template>
  <div>
    <h2>{{ user.name }}의 상세 정보</h2>
    <p>이메일: {{ user.email }}</p>
    <p>나이: {{ user.age }}</p>
  </div>
</template>

결과 예상

1. 목록 페이지에서 링크에 마우스를 올리면 프리패칭 된다.
2. 사용자 상세 페이지로 이동하면 useQuery가 실행된다.
3. 데이터 요청 없이 프리패칭한 데이터를 사용한다.

useInfiniteQuery는 목록 데이터를 점진적으로 불러와 ‘더 보기’ 또는 ‘무한 스크롤’을 구현할 때 사용되는 훅이다. useQuery와 유사하지만, 여러 페이지의 데이터를 효율적으로 관리할 수 있도록 추가 기능을 제공한다.

const {
  data,
  error,
  fetchNextPage,
  hasNextPage,
  isFetching,
  isFetchingNextPage,
  status,
} = useInfiniteQuery({
  queryKey: ['projects'],
  queryFn: fetchProjects,
  initialPageParam: 0,
  getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
})

2. useInfiniteQuery의 추가 기능

데이터 구조 변화

data.pages: 불러온 모든 페이지 데이터를 포함하는 배열 data.pageParams: 각 페이지를 가져오는 데 사용된 매개변수를 포함하는 배열

추가 메서드

fetchNextPage: 다음 페이지 데이터를 불러오는 함수

fetchPreviousPage: 이전 페이지 데이터를 불러오는 함수

추가 옵션

initialPageParam: 초기 페이지 매개변수 (필수)

getNextPageParam: 다음 페이지를 불러올 수 있는 기준 정의

getPreviousPageParam: 이전 페이지를 불러올 수 있는 기준 정의

추가 상태값

hasNextPage: 다음 페이지가 존재하는지 여부 (getNextPageParam이 null/undefined가 아니면 true) hasPreviousPage: 이전 페이지가 존재하는지 여부 (getPreviousPageParam이 null/undefined가 아니면 true) isFetchingNextPage: 다음 페이지 데이터를 요청 중인지 여부 isFetchingPreviousPage: 이전 페이지 데이터를 요청 중인지 여부

3. ‘더 보기’ 예제

getNextPageParam

getNextPageParam을 보면 lastPage.nextPage값을 통해 다음 페이지가 있는지 설정한다.

{"items": [...], "nextPage": 3 } 서버에서 이런 형식의 데이터를 받았을 때의 상황이다.

만약 totalCount 정도만 받는다면 직접 계산을 해서 getNextPageParam에 넣으면 된다.

pageParam

useInfiniteQuery에서 queryFn의 인자로 pageParam를 자동으로 전달해준다.

<script setup>
import { useInfiniteQuery } from '@tanstack/vue-query'

const fetchPosts = async ({ pageParam = 0, limit = 10 }) => {
  const res = await fetch(`/api/posts?page=${pageParam}&limit=${limit}`)
  return res.json()
}

const {
  data,
  fetchNextPage,
  hasNextPage,
  isFetchingNextPage,
} = useInfiniteQuery({
  queryKey: ['posts'],
  queryFn: fetchPosts,
  initialPageParam: 1, // 초기 페이지
  getNextPageParam: (lastPage) => lastPage.nextPage, // 다음 페이지 번호 반환
})
</script>

<template>
  <div>
    <Post v-for="post in data?.pages.flatMap((group) => group.items)" :key="post.id" :post="post" />
    <button v-if="hasNextPage" @click="fetchNextPage" :disabled="isFetchingNextPage">
      {{ isFetchingNextPage ? '로딩 중...' : '더 보기' }}
    </button>
  </div>
</template>

queryKey와 enabled를 사용해 어떤 데이터가 다른 데이터에 의존할 때, 올바른 순서로 요청하고 관리할 수 있다.

const { data: user } = useQuery({
  queryKey: ['user', userId],
  queryFn: () => fetchUser(userId),
  enabled: Boolean(userId), // userId가 있어야 실행
});

const { data: posts } = useQuery({
  queryKey: ['posts', user?.id],
  queryFn: () => fetchPosts(user?.id), // user가 있어야 실행
  enabled: Boolean(user), // user 데이터가 존재할 때만 실행
});

결과 예상

1. userId가 있을 때 user 쿼리가 실행되어 fetchUser(userId)를 호출하고, user 데이터를 가져온다.
2. user 데이터가 존재하면 posts 쿼리가 실행되어 fetchPosts(user.id)를 호출하고, posts 데이터를 가져온다.
3. queryKey에 user?.id를 포함했기 때문에, user 데이터가 변경되면 posts 쿼리가 자동 갱신된다. userId가 변경된다면 user 쿼리가 자동 갱신된다.
4. 따라서 userId가 없으면 user 쿼리가 실행되지 않고, user 쿼리가 실행되지 않으면 posts 쿼리도 실행되지 않는다.

2. 여러개의 API 요청 병합 : useQueries

useQueries

여러개의 useQuery를 한번에 실행시켜주는 훅이다. 각 요청을 병렬로 실행해서 성능 최적화가 가능하다.

기본 사용법

useQueries는 배열로 쿼리들을 받고 배열로 결과를 반환한다.

results는 각 useQuery의 반환값을 포함한 배열이라서 아래처럼 접근할 수 있다.

results[0].data → user 데이터 results[1].data → posts 데이터

const results = useQueries({
  queries: [
    {
      queryKey: ['user', userId],
      queryFn: () => fetchUser(userId)
    },
    {
      queryKey: ['posts', userId],
      queryFn: () => fetchPosts(userId)
    },
  ],
});

동적 개수의 useQuery 실행하기

useQueries는 배열을 받기 때문에, 동적인 개수의 쿼리도 실행할 수 있다.

const userIds = [1, 2, 3]; // 여러 개의 userId

const userQueries = useQueries({
  queries: userIds.map((id) => ({
    queryKey: ['user', id],
    queryFn: () => fetchUser(id),
    enabled: !!id,
  })),
});

응답 상태 다루기

some 메서드로 하나라도 로딩중/에러 라면 isLoading/isError를 true로 설정한다.

const isLoading = userQueries.some(query => query.isLoading);
const isError = userQueries.some(query => query.isError);
const users = userQueries.map(query => query.data).filter(Boolean);

3. useQueries결과 하나의 객체로 변환 : combine

useQueries의 combine 옵션으로 여러개의 쿼리 결과를 하나의 객체로 합칠 수 있다.

여러개의 쿼리 데이터를 원하는 형식으로 변환하고, isPending, isError 등의 상태도 원하는 대로 계산할 수 있다.

const ids = [1, 2, 3];

const combinedQueries = useQueries({
  queries: ids.map(id => ({
    queryKey: ['post', id],
    queryFn: () => fetchPost(id),
  })),
  combine: (results) => {
    return {
      data: results.map(result => result.data),  // 각 쿼리의 데이터를 배열로 정리
      pending: results.some(result => result.isPending), // 하나라도 로딩 중이면 true
      // 모든 데이터를 성공적으로 받아오면 true
      allSuccess: results.every(result => result.status === 'success') 
    };
  },
});

useQuery는 데이터 요청 상태를 나타내는 여러 값을 제공한다.

아래 예제처럼 요청 상태에 따라 별도 동작을 시킬 수 있고, 템플릿에 사용해 요청 상태에 따른 화면을 표시할 수 있다.

const { data, isLoading, isFetching, isError, error } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers,
});
if(isLoading) console.log('데이터 로딩 중...');
if(isFetching) console.log('새로운 데이터를 가져오는 중...');
if(isError) console.error('에러 발생:', error);

2. 에러 핸들링 : onError & retry

onError와 retry로 API 요청이 실패했을 때 에러를 처리할 수 있다.

onError

const { data } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers,
  onError: (error) => {
    console.error('에러 발생:', error);
  },
});

retry

네트워크 오류 등으로 요청이 실패했을 때 자동으로 재요청한다.

const { data } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers,
  retry: 3, // 최대 3번 재시도
  retryDelay: 3000, // 실패 시 3초 후 재시도
});

3. 초기 데이터와 Placeholder 데이터

데이터 로드 전까지 초기 데이터를 표시할 수 있다. initialData

쿼리의 초기 데이터를 설정한다.

const { data, isLoading } = useQuery({
  queryKey: ['userProfile'],
  queryFn: fetchUserProfile, // 사용자 프로필 API 호출
  initialData: {name: '알 수 없음', age: 0},
  staleTime: 1000 * 60 * 5, // 5분 동안 데이터를 fresh 상태로 유지
});

placeholderData

쿼리의 임시 데이터를 설정한다.

const { data, isLoading } = useQuery({
  queryKey: ['posts', page], // 현재 페이지 번호
  queryFn: () => fetchPosts(page), // 페이지별 게시글 불러오기
  placeholderData: { id: 0, title: '로딩 중...', content: '게시글을 불러오는 중입니다.'}
});

initialData와 placeholderData의 차이

둘다 로딩 중에 보일 데이터를 설정하는 건 비슷하지만 캐싱 차이가 있다.

initialData는 값이 캐싱되고, placeholderData는 캐싱되지 않는다.

그래서 staleTime이 0이면 initialData도 placeholderData처럼 동작하는 것처럼 보인다.

initialData

staleTime 동안 새 데이터를 불러오지 않고 initialData를 사용한다.

이후 staleTime이 지나 새 데이터를 받으면 새 데이터가 캐싱된다.

gcTime이 지나면 캐시가 삭제되기 때문에, 다시 initialData를 캐싱한다.

placeholderData

캐싱되지 않기 때문에 staleTime과 관계없이 새 데이터를 불러온다.

캐시 데이터가 없는 상태에서 로딩중일 때만 보여진다.

정리

초기값이 “진짜 데이터”여야 하고, 캐싱이 필요하다면 → initialData

초기값이 “임시 데이터”여도 되고, 캐싱이 필요 없다면 → placeholderData

아하!

브라우저 새로고침 시 설정한 placeholderData가 계속 나와서 찾아봤는데, 탄스택 쿼리는 새로고침을 하면 캐시와 stale상태의 데이터가 초기화된다고 한다. 새로고침을 해도 캐시가 남아서 캐시가 없는 처음에만 placeholderData가 보일 거라 생각했다.

참고

https://careerly.co.kr/qnas/1034

리페치는 이미 존재하는 쿼리의 데이터를 다시 가져오는 것을 의미한다.

invalidateQueries(): 쿼리를 무효화

refetch(): 즉시 데이터 다시 불러오기

1. 수동 데이터 갱신 : refetch()

useQuery의 refetch 메서드를 사용해 원하는 시점에 데이터를 갱신할 수 있다.

const { data, refetch } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers,
})
// 버튼 클릭 시 리페치 실행
const handleRefresh = () => {
  refetch()
}

2. 특정 조건에 데이터 가져오기 : enabled

useQuery는 일반적으로 마운트 될 때 자동으로 실행된다.

하지만 enabled옵션을 설정해 특정 조건에서만 실행 시킬 수 있다.

const isReady = ref(false)

const { data } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers,
  enabled: isReady, // isReady가 true일 때만 실행
})
// 버튼 클릭 시 쿼리 활성화
const enableFetching = () => {
  isReady.value = true
}

3.  브라우저 포커스 시 자동 리페치 : refetchOnWindowFocus

refetchOnWindowFocus 옵션을 설정해 사용자가 브라우저 탭을 다시 활성화할 때 자동으로 데이터를 다시 가져온다.

다른 작업 후 복귀 시 최신 데이터를 보여줄 수 있다.

const { data } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers,
  refetchOnWindowFocus: true, // 기본값: true
})

4. 일정 시간마다 데이터 새로고침 : refetchInterval

refetchInterval옵션을 설정하면 일정 주기마다 자동으로 데이터를 갱신할 수 있다.

그래서 실시간 데이터를 보여줄 때 유용하다.

const { data } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers,
  refetchInterval: 5000, // 5초마다 자동 리페치
})

• useMutation을 사용해 데이터를 추가,수정,삭제를 할 수 있다.

1. Mutation 기본 개념

mutationFn: 실행할 API 요청 (POST, PUT, DELETE) onSuccess: 요청 성공 시 실행할 로직 onError: 요청 실패 시 실행할 로직

2. 기본 사용

const addPost = async (newPost) => {
  const { data } = await axios.post(`${api_url}/posts`, newPost);
  return data;
};

const mutation = useMutation({
  mutationFn: addPost,
  onSuccess: (data) => {
    console.log("✅ 게시글 추가 성공:", data);
  },
  onError: (error) => {
    console.error("❌ 게시글 추가 실패:", error);
  },
});

// 버튼 클릭 시 Mutation 실행 
const addPost = () => {
  mutation.mutate(newPost);
};

3. Mutation 후 데이터 갱신

데이터를 추가/수정/삭제 했다면 기존 데이터를 최신 상태로 유지해야 한다.

queryClient.invalidateQueries()를 사용해 자동으로 쿼리를 재실행해 최신 데이터를 유지한다.

const queryClient = useQueryClient();
const mutation = useMutation({
  mutationFn: addPost,
  onSuccess: () => {
    queryClient.invalidateQueries({queryKey: ["posts"]}); // 게시글 목록 갱신
  },
});

• invalidateQueries:  v5에서는 객체 형태로 전달해야 함

결과 예상

1. 새 게시글이 추가되면 ["posts"] 키를 가진 쿼리를 무효화 (invalidateQueries)
2. 기존 게시글 목록이 자동으로 최신 데이터로 갱신된다.

쿼리 무효화: 특정 쿼리의 캐시가 유효하지 않다고 선언하는 것

무효화된 쿼리는 다음에 자동으로 최신 데이터를 가져오게 된다.

4.  옵티미스틱 업데이트

서버 응답을 기다리지 않고, UI를 먼저 업데이트하는 걸 옵티미스틱 업데이트라고 한다.

이를 통해 더 나은 UX를 제공할 수 있다. 하지만 관리가 어렵기 때문에  UI 반응성을 높여야 할 곳 일부에 사용하는 것이 좋다.

queryClient.setQueryData: 쿼리의 캐시 데이터를 직접 수정하는 함수 (옵티미스틱 업데이트에 필요)

onMutate: Mutation이 실행되기 직전에 호출되는 함수 (옵티미스틱 업데이트에 필요)

onSettled: Mutation이 성공/실패하든, 요청이 끝나면 실행되는 함수

const mutation = useMutation({
  mutationFn: deletePost,
  onMutate: async (postId) => {
    // 기존 데이터 백업
    const prevPosts = queryClient.getQueryData(["posts"]);

    // UI에서 삭제된 것처럼 보이게 처리
    queryClient.setQueryData(["posts"], (oldPosts) =>
      oldPosts.filter((post) => post.id !== postId)
    );

    return { prevPosts }; // 에러 발생 시 기존 상태로 롤백
  },
  onError: (error, postId, context) => {
      // 기존 상태로 복구
      queryClient.setQueryData(["posts"], context.prevPosts);
  },
  onSettled: () => {
    // 서버와 동기화 (쿼리 무효화)
    queryClient.invalidateQueries(["posts"]);
  },
});

const handleDelete = (postId) => {
  mutation.mutate(postId);
};

결과 예상

1. 삭제 버튼 클릭 시 UI에서 먼저 삭제됨
2. 실제 API 요청을 보냄
3. 요청이 실패하면 기존 데이터로 복구
4. 요청이 끝나면 쿼리 무효화

5. Mutation 상태 관리 (isLoading, isSuccess, isError)

Mutation 사용 시 상태도 함께 사용하면 더 좋은 UX를 제공할 수 있다.

<script setup>
const updatePost = async ({ id, title }) => {
  const { data } = await axios.put(`${api_url}/posts/${id}`, { title });
  return data;
};

const mutation = useMutation(updatePost);
const editPost = () => {
  mutation.mutate({ id: 1, title: "업데이트된 제목" });
};
</script>

<template>
  <div>
    <button @click="editPost">게시글 수정</button>
    <p v-if="mutation.isLoading">수정 중...</p>
    <p v-else-if="mutation.isError">오류 발생: {{ mutation.error.message }}</p>
    <p v-else-if="mutation.isSuccess">수정 완료</p>
  </div>
</template>

정리

useMutation을 사용하면 데이터를 추가/수정/삭제 가능

invalidateQueries를 사용하면 데이터 변경 후 최신 상태 유지 가능

옵티미스틱 업데이트를 적용하면 UI를 빠르게 반영 가능

isLoading, isError, isSuccess를 활용하면 UX 개선 가능

궁금

context.previousPosts 활용 VS oldUsers 그대로 반환

context.previousPosts는 저장해뒀던 값을 다시 설정하는 거니까 이해가 간다. 하지만 oldUsers도 users쿼리의 현재 변경된 값의 이전 값이니까 반환하면 첫번째 방식이랑 같다고 생각했다.

그런데 oldUsers는 변경 전 데이터가 아니라, 이미 변경된 캐시 데이터라고 한다.

onError: (error, postId, context) => {
  queryClient.setQueryData(["posts"], context.previousPosts);
},

onError: () => {
  queryClient.setQueryData(["users"], (oldUsers: User[]) => {
    return oldUsers;
  });
},

useQuery는 데이터를 가져올 때 아래 순서로 동작한다.

1. 캐시 확인 → 기존 데이터가 있으면 재사용
2. stale 상태 확인 → staleTime 이내면 캐시 사용, 넘어가면 서버 재요청
3. 서버 요청 → 데이터가 없거나 staleTime이 지나면 API 호출
4. 자동 갱신 → refetchInterval, enabled 옵션 등으로 새 데이터 가져오기

staleTime과 gcTime의 차이

2. staleTime과 gcTime 비교

<script setup lang="ts">
import { getUsersApi } from '@/apis/users'
import { useQuery } from '@tanstack/vue-query'

const {data, isLoading, isFetching, error,} = useQuery({
  queryKey: ['users'],
  queryFn: getUsersApi, 
  staleTime: 5000, // 5초 동안 캐시된 데이터 사용
  gcTime: 10000,   // 10초 후 캐시 삭제
})
</script>

staleTime

해당 시간 동안 캐시된 데이터를 사용한다.

상태: fresh → stale

gcTime

해당 시간 동안 캐시를 유지, 시간이 지나면 삭제

페이지를 벗어나면 inactive 상태가 되고, gcTime이 지나면 사라진다.

inactive 상태에 해당 페이지로 돌아갔는데 fresh상태라면 재요청 없이 캐시된 데이터를 사용, stale 상태라면 새 데이터를 가져오는 동안 캐시 데이터 표시

상태: inactive → (삭제)

staleTime과 gcTime 조합 정리

변형 케이스

일반적으로 일어나지 않는다. 특정 설정을 일부러 넣어야만 발생한다.

3. 자동 새로고침 : refetchInterval

<script setup lang="ts">
import { getUsersApi } from '@/apis/users'
import { useQuery } from '@tanstack/vue-query'

const {data, isLoading, isFetching, error,} = useQuery({
  queryKey: ['users'],
  queryFn: getUsersApi, 
    refetchInterval: 5000, // 5초 후 자동 새로고침
})
</script>

데이터를 가져오는 즉시 fresh→stale이 되고 5초 마다 새로 데이터를 가져온다.

대부분의 상태 관리 라이브러리는 클라이언트 상태 작업에는 좋다. 하지만 클라이언트와 서버의 상태가 다르기 때문에 비동기 및 서버 상태 작업에는 좋지 않다.

서버 상태

• 내가 통제/소유할 수 없는 위치에 원격으로 유지된다.
• 가져오기,업데이트를 위해 비동기 API가 필요하다.
• 공유 소유권을 의미하며 나의 지식 없이 다른 사람이 변경할 수 있다.
  • 공유 소유권: 한 컴포넌트가 데이터를 요청했을 때, 그 데이터를 다른 컴포넌트 및 사용자가 수정할 수 있는 것
• 조심하지 않으면 잠재적으로 APP에서 "오래된" 상태가 될 수 있다.
  • 서버와 클라이언트 간 상태를 동기화하는 것이 중요하다는 의미이다.
  • ex) 변경된 데이터를 APP에 반영하지 않아 오래된 데이터를 보여주는 경우

APP에서 서버 상태의 특성을 파악하며 작업을 하면 아래의 과제들이 발생할 수 있다.

이 문제들을 해결하는 것은 쉽지 않지만 탄스택 쿼리를 쓰면 쉽게 해결 가능하다.

• 캐싱
• 동일한 데이터에 대한 여러 요청을 단일 요청으로 중복 제거
• 백그라운드에서 "오래된" 데이터 업데이트
• 데이터가 "오래된" 시점을 아는 방법
• 가능한 빨리 데이터 업데이트를 반영
• 페이지 분할 및 지연 로딩 데이터와 같은 성능 최적화
• 서버 상태의 메모리 관리 및 가비지 수집
• 구조적 공유를 통한 쿼리 결과 메모

기본 개념

2. 설치

Tanstack Query

1. 라이브러리 설치

$ yarn add @tanstack/vue-query axios

2. 등록

// main.ts
import { createApp } from 'vue'
import { VueQueryPlugin } from '@tanstack/vue-query'

import App from './App.vue'

const app = createApp(App)

app.use(VueQueryPlugin)
app.mount('#app')

3. 기본 동작 설정

defaultOptions 옵션으로 queryClient를 생성할 때 기본 옵션을 지정하면 모든 useQuery와 useMutation에 적용된다. 하지만 기본 옵션을 지정했어도 개별 useQuery에서 옵션을 변경할 수 있다.

// App.vue, VueQuery 설정
const vueQueryPluginOptions: VueQueryPluginOptions = {
  queryClientConfig: {
    defaultOptions: {
      queries: {
        queryFn: defaultQueryFn, // 기본 queryFn 적용
        staleTime: 1000 * 60, // 1분 동안 fresh 상태 유지
        cacheTime: 1000 * 60 * 5, // 5분 후 캐시 삭제
        refetchOnWindowFocus: false, // 창 포커스 시 자동 리패치 비활성화
      },
    },
  },
};

app.use(VueQueryPlugin, vueQueryPluginOptions); // VueQueryPlugin 등록

DevTools

탄스택 쿼리 DevTools로 쿼리 상태를 쉽게 확인하고 디버깅할 수 있다.

1. 설치

$ yarn add @tanstack/vue-query-devtools

2. 등록

 VueQueryDevtools는 컴포넌트라서 app.use()로 등록하지 않는다.

<!-- App.vue -->
<script setup lang="ts">
import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
</script>
<template>
  <RouterView />
  <VueQueryDevtools />
</template>

주요 기능

캐시된 쿼리 확인: 현재 캐시에 저장된 쿼리 목록과 상태를 확인 가능

쿼리 상태 변경: 강제 리페치, 무효화 등 실시간으로 상태 변경 가능

네트워크 요청 확인: 요청과 응답 데이터를 확인하고 성능 분석 가능

캐시 타이머 확인: staleTime, gcTime 등 타이머 정보 확인 가능

table_calendar 라이브러리가 3.0.0 버전에서 큰 업데이트를 하면서 기존의 속성들이 대부분 삭제되고 새로운 속성들이 등장했다. 문제는 이전 속성들의 이름이 뭘로 바뀌었다는 내용이 없다는 것이다.

그래서 3.0.0이전 버전에서 쓰던 속성들의 역할과 3.0.0이후 버전의 속성들의 역할을 비교해 최대한 유사한 것들로 대체를 해주었고 없는 것들은 코드를 새로 작성하였다.

기본설정

firstDay& lastDay

3.0.0부터 firstDay, lastDay가 추가 되었고 필수이기 때문에 꼭 넣어줘야 한다. 이 속성값 이외 범위의 날짜는 확인할 수 없다. focusedDay는 첫 화면에서 보여줄 날짜이며 이 3가지는 필수다.

Widget build(BuildContext context) {
    return TableCalendar(
        firstDay: DateTime.utc(2010, 01, 01),
        lastDay: DateTime.utc(2030, 12, 31),
        focusedDay: focusDate,
    )
};

daysOfWeekHeight

이전에는 요일의 높이를 변경하려면 dowWeekdayBuilder나 dowWeekendBuilder의 높이를 변경해야 했는데 이제는 변경해도 적용이 안되고 daysOfWeekHeight의 값을 변경해야 한다.

Widget build(BuildContext context) {
    return TableCalendar(
        daysOfWeekHeight: 40;
    )
}

UI 커스텀 (CalendarBuilders)

CalendarBuilders를 사용해 UI를 변경할 수 있다. 각 빌더를 사용해 선택적으로 UI를 변경할 수 있다.

dayBuilder → defaultBuilder

dayBuilder에서 defaultBuilder로 이름이 변경됐고 모든 날짜의 빌더라 변경하면 모두 적용된다.

outsideDayBuilder → outsideBuilder

outsideDayBuilder에서 outsideBuilder로 이름이 변경됐다. 하얀 날짜 박스 바깥의 뒤부분이다.

todayDayBuilder → todayBuilder

todayDayBuilder는 todayBuilder로 이름이 변경됐다. 오늘 날짜 빌더이다.

dowWeekdayBuilder, dowWeekendBuilder → dowBuilder

위의 3개는 단순히 이름만 바뀌었지만 요일관련 빌더는 펼일과 주말로 나뉘었던 것이 하나로 통합됐다. 만약 일요일의 색상을 바꾸고 싶다면 아래와 같이 요일을 다 정해줘야 한다. 바꾸지 않는다면 하나하나 정의하지 않아도 요일이 잘 나온다.

calendarBuilders: CalendarBuilders(
    dowBuilder: (context, day) {
      late String dayStr;
      switch(day.weekday){
        case 1: dayStr = '월'; break;
        case 2: dayStr = '화'; break;
        case 3: dayStr = '수'; break;
        case 4: dayStr = '목'; break;
        case 5: dayStr = '금'; break;
        case 6: dayStr = '토'; break;
        case 7: dayStr = '일'; break;
      }
      return Container(
        child: Text(
          '$dayStr', style: TextStyle().copyWith(
              color: dayStr == '일' ? Color(0xffff0000) : Color(0xff000000),
          ),
        ),
      );
    },
);

방금 공식문서를 보다 알게된 것인데 저렇게 하나를 바꾸기 위해 전체를 정의할 필요가 없었다! 아래 코드처럼 day.weekday가 일요일일 때만 검증하고 색상을 바꿔주면 된다.

calendarBuilders: CalendarBuilders(
  dowBuilder: (context, day) {
    if (day.weekday == DateTime.sunday) {
      final text = DateFormat.E().format(day);
      return Center(
        child: Text(
          text,
          style: TextStyle(color: Colors.red),
        ),
      );
    }
  },
),

References

• https://velog.io/@adbr/flutter-tablecalendar-builders-example
• https://velog.io/@jun7332568/플러터flutter-달력-구현하기-TableCalendar-라이브러리-활용

Git 커밋 메시지 컨벤션(이하 커밋 컨벤션)은 일관된 형식의 커밋 메시지를 작성하기 위한 규칙이다.

프로젝트 상황에 맞게 수정할 수 있다.

• 커밋 메시지: 코드 변경 사항을 요약하는 역할

도입 이유

한 프로젝트에 여러 개발자가 서로 다른 방식의 커밋 메시지를 작성한다면 여러 문제를 겪게 된다. 하지만 커밋 컨벤션을 도입함으로 아래의 이득을 얻을 수 있다.

1. 가독성

   가독성 향상으로 소스 변경 이력을 쉽게 파악할 수 있다.

2. 커뮤니케이션

   버그 수정 과정에서 타 개발자와의 불필요한 의사소통을 줄일 수 있다.

3. 변경 이력 추적

   문제 발생 시 변경 이력을 효율적으로 추적하여 대처할 수 있고 이로인해 프로젝트 안정성을 향상시킬 수 있다.

4. 문서화 기능

   소스 변경 내역을 제공하는 문서 역할을 하여 효율적인 소스 코드 분석이 가능하다.

5. 자동화

   특정 태그 및 내용을 기반으로 버전 릴리즈, 머지, 통계, 분석 등 다양한 작업을 자동화할 수 있다.

Conventional Commits

다양한 커밋 컨벤션이 존재하지만 이 문서는 가장 대중적인 커밋 컨벤션인 Udacity Git Commit Message Style Guide🔗 를 기반으로 한다.

(이모티콘을 사용한 gitmoji 컨벤션도 존재한다.)

메시지 구조

메시지 구조는 제목, 본문, 꼬리말로 나뉘고 한 줄을 띄워 서로 구분한다.

본문, 꼬리말은 선택사항이다.

type: Subject  -> 제 목  
(한칸 띄우기)
body(option)   -> 본 문  
(한칸 띄우기)
footer(option) -> 꼬리말

아래는 각 부분을 어떻게 작성하는지 설명한다.

Type

태그를 통해 어떤 유형의 변경 사항이 도입되었는지 식별한다.

만약 사용할 태그가 2개 이상이라면 커밋을 더 작게 나눌 필요가 있다.

1. 타입은 태그와 제목으로 구성되고 콜론(: )을 통해 구분한다. (콜론 뒤 띄어쓰기)
2. 첫글자는 대문자로 작성한다.

Subject

1. 개조식 구문으로 작성한다.
2. 명령형으로 작성한다.
3. 글자 수는 50자를 넘기지 않는다.
4. 마지막에 특수문자는 삽입하지 않는다.

영어의 경우

• 첫글자는 대문자로 작성한다.
• 동사 원형을 작성한다.

Body

1. 한 줄 당 72자를 넘기지 않는다.
2. 길이 상관없이 최대한 상세히 작성한다.
3. 어떻게 변경했는지 보다 무엇을 또는 왜 변경했는지 설명한다.

Footer

1. 이슈 트래커 ID를 작성한다.
2. 유형: #이슈 번호 형식이다.
3. 이슈가 여러개면 쉼표로 구분한다.
4. 이슈 트래커 유형은 아래와 같다.

| 유형 | 내용 |
| --- | --- |
| Fixes | 이슈 수정중 |
| Resolves | 이슈 해결 |
| Ref | 참고할 이슈  |
| Related to | 해결되지 않은 관련된 이슈 |

예) `Fixes: #5 Related to: #2, #3`

예제

Feat: 로그인 함수 추가

로그인 API 개발

Resolves: #123
Ref: #456
Related to: #48, #45

마치며

우선 커밋 컨벤션 관련 글을 쓰게된 이유는 현회사에서 커밋 컨벤션이 존재하지 않아 대표님과 이야기하여 도입하기로 하였다. 지금까지 제목만 사용했는데 조사하면서 본문, 꼬리말이 있는 것도 처음 알았다. 또한 단순 가독성 뿐 아니라 여러 장점이 많아서 신기하기도 했다.

아직은 완벽히 활용하지는 못하지만 차츰 완벽에 가깝게 사용할 수 있으면 좋겠다.

참고 자료

https://github.com/slashsbin/styleguide-git-commit-message#tools

https://overcome-the-limits.tistory.com/entry/협업-협업을-위한-기본적인-git-커밋컨벤션-설정하기#타입

https://www.conventionalcommits.org/ko/v1.0.0/

https://insight.infograb.net/blog/2023/04/21/why-commit-convention-is-important/

타입과 함께 매개변수를 선언한다. 해당 매개변수는 함수내에서만 사용된다.

void main() {
    introduce('Tom', 30); //hello my name is Tom i am 30 years old
}

introduce(String name, int age){
    print('hello my name is $name i'm $age years old');
}

함수 타입

함수가 반환하는 값이 없을 때 함수 앞에 void 키워드를 붙인다. 함수가 값을 반환한다면 값의 타입을 함수 앞에 작성하면 된다.

void printStr() {
    print('string');
}
int getThree() {
    return 3;
}

화살표 함수

화살표 함수를 사용하면 화살표 다음이 반환되는 값이된다.

int getThree() {
    return 3;
}
// ⬆️ 똑같다.
int getThree() => 3; //화살표 함수

선택적 매개변수

함수 호출 시 인수를 다 넘기지 않으면 에러가 난다. 매개변수를 함수내에서 선택적으로 사용한다면 선택적 매개변수를 사용해야 한다.

대괄호안에 매개변수를 선언하면 된다. 이때 변수값이 없으면 함수내에서 에러가 발생하기에 기본값을 설정해줘야 한다. 함수 호출시 넘어온 인수가 없다면 기본값을 사용한다.

void main() {
    addNum(20); //30
    addNum(20,20); //40
}

addNum(int num, [int num2 = 10]){
    print(num + num2);
}

네임드 매개변수

기본적으로 매개변수는 순서가 중요하다. 하지만 네임드 매개변수는 순서가 중요하지 않다.

매개변수 자리에 중괄호를 넣고 타입 앞에 required 키워드를 작성한다. 만약 선택적 매개변수를 사용하고 싶다면 required를 안쓰면 된다. 함수를 호출할 때 매개변수 : 값 이러한 형태로 인자를 넘기면 된다. 순서가 바뀌어도 아무 상관 없다.

void main() {
    addNum(num:20); //30
    addNum(num2:30, num:10); //40
}

addNum({
    required int num,
    int num2 = 10,
}){
    print(num + num2);
}

typedef

typedef로 body가 없는 함수를 선언하면 해당 함수와 형태가 같은 함수들을 하나의 typedef로 선언할 수 있다

아래처럼 변수 앞에 typedef를 선언하고 Operation타입에 해당하는 함수를 할당하면 앞으로 oper란 변수는 add함수의 역할을 수행한다.

void main() {
    Operation oper = add;
    print(oper(20,10);) //30
    operation = subtract;
    print(oper(20,10);) //10
}

typedef Operation = int Function(int num, int num2);
int add(int num, int num2) => num + num2;
int subtract(int num, int num2) => num - num2;

응용

typede를 사용한다면 보통 이런식으로 자주 사용한다고 한다.

void main() {
    print(calculate(30, 20, add)); //50
}

typedef Operation = int Function(int num, int num2);
int add(int num, int num2) => num + num2;
int subtract(int num, int num2) => num - num2;
int calculate(int num, int num2, Operation oper) => oper(num, num2);

if, else if, else

if문의 조건식에 부합하면 if문 안의 결과를 실행, 아니라면 else if문으로 넘어가고 else if문의 조건식에도 부합하지 않다면 else문의 결과를 실행한다.

void main() {
    int num = 5;
    if(num >= 20) {
        print('20 이상');    
    }else if(num >= 10) {
        print('10이상');    
    }else {
        print('10이하');
    }
}

switch

switch 문은 하나 이상의 case문으로 구성되며 default문은 필수가 아니다.

void main(){
    String browser = 'safari';

    switch(browser){
        case 'chrome':
            print('크롬 사용중');
            break;
        case 'safari':
            print('사파리 사용중');
            break;
        default:
            print('타 브라우저 사용중');
            break;
    }
}

반복문 (loop)

for 반복문

for 문의 초기식은 사용할 변수를 선언하고 초기값을 할당한다. 조건식은 언제까지 실행할지를 결정한다. 증감식은 반복문이 한번 종료될 때 어떤 코드를 실행할지 결정한다.

조건식이 참일 경우 중괄호 속 코드가 실행된다. 아래 코드의 경우 0부터 9까지 출력될 것이다.

void main(){
    for(int i = 0; i < 10; i++){ //(초기식; 조건식; 증감식)
        print(i)        //조건식이 참일 때 실행할 코드
    }
}

for in 반복문

for in 문은 List의 요소를 순회할 수 있는 반복문이다. 아래의 경우 nums List를 하나씩 출력한다. (Map X)

void main(){
    List<int> nums = [1,2,3,4,5];
    for(int num in nums){
        print(num);
    }
}

while 반복문

while 문은 조건식이 거짓일 때 까지 코드를 실행한다. 만약 계속 참인 조건식을 넣으면 계속 실행되어 컴퓨터에 문제가 발생한다.

void main(){
    int total = 0;
    while(total <= 10){
        total += 2;
    }
}

do while 반복문

do while문은 while문과 비슷하지만 do while의 경우 조건에 상관없이 우선적으로 코드를 실행하고 그 다음에 조건이 맞는지 확인한다. (잘 사용하지 않음)

void main(){
    int total = 0;
    do {
        total += 2;
    }    while(total <= 10);
}

break 문

break문을 사용하면 현재 반복문에서 나간다. 따라서 if문을 통해 특정 조건에 반복문을 중단할 수 있다.

while문 뿐 아니라 for문에서도 가능하다.

void main(){
    int total = 0;
    while(total <= 10){
        total += 2;
        if(total == 6){
            break;
        }
    }
}

continue 문

continue문은 break와 달리 조건에 해당하면 현재 식을 종료하고 다음 식으로 넘어간다. 아래의 경우 1,2,4,5가 출력되고 3은 출력되지 않는다.

void main(){
    for(int i = 1; i < 5; i++){ //(초기식; 조건식; 증감식)
        if(i == 3) continue;
        print(i);
    }
}

enum

enum은 상수값을 나열한 형태로 타입 사용을 강제하고 싶을 경우 사용한다. enum의 이름은 첫글자를 대문자로 작성한다. (TS의 enum과 비슷하다.)

enum Fruits{
    apple,
    banana,
    kiwi,
}

void main() {
    Fruits fruits = Fruits.kiwi;
    if(fruits == Fruits.apple) print("사과");
    else if(fruits == Fruits.banana) print("바나나");
    else print("키위");
}

print()

print 함수를 통해 콘솔을 찍을 수 있다.(JS의 console.log)

dart는 뒤에 꼭 세미콜론을 붙여야 한다.

void main(){
    print('hello world!'); //hellog world
}

타입 추론 변수, 동적 타입 변수

var (타입 추론 변수)

var는 모든 타입을 할당할 수 있고 재할당 또한 가능하다. 하지만 첫 할당한 타입과 다른 타입으로 재할당이 불가능하다.

void main(){
    var name = 'simon';
    print(name); //simon
    name = 1; //error🚨
}

dynamic (동적 타입 변수)

dynamic은 어떤 타입이건 할당할 수 있다. 첫 할당한 타입과 다른 타입으로 재할당이 가능하다.

void main(){
    dynamic text = 'hello';
    text = 1;
    text = true;
} 

둘의 차이

var와 dynamic은 모든 타입을 할당할 수 있는 공통점이 있다.

하지만 var는 초기화 시 타입을 추론하여 재할당 시 다른 타입으로 변경이 불가능하다.

dynamic은 동적으로 타입이 변경되어 재할당 시 다른 타입으로 변경이 가능하다.

+ runtimeType

runtimeType을 통해 변수의 타입을 확인할 수 있다.

void main(){    
    var idk = true;
    print(idk.runtimeType); //bool
}

기본 타입

String

String 타입은 문자열만 할당할 수 있다. 문자를 더하면 문자가 합쳐진다.

${}안 혹은 $뒤에 변수를 넣어서 사용할 수도 있다. JS의 백틱(````)과 유사한것 같다.

void main(){
    String text = 'hello';
    String text2 = 'world'
    print(text + ' ' + text2); //hello world
    print('${text} ${text2}'); //hello world
    print('$text $text2'); //hello world
}

Int (integer)

int 타입은 정수만 할당할 수 있다.

void main(){
    int num = 1;
    print(num + num); //2
}

double

double 타입은 실수만 할당할 수 있다.

void main(){
    double num = 0.5;
    print(num + num); //1
}

bool

bool 타입은 true, false만 할당할 수 있다.

void main(){    
    bool t = true;
    bool f = false;
}

nullable

변수에 null을 할당하면 에러가 발생한다. 하지만 타입뒤에 ?를 붙이면 null도 할당할 수 있게된다.

void main(){
    String text = 'hello';
    text = null; //error🚨
    String? text2 = 'hello';
    text2 = null; 
}

non-nullable

타입 앞에 ?를 사용하는 경우, 변수와 !를 호출하면 현재 값이 null이 아니라는 뜻이다.

void main(){
    String? text = 'hello';
    print(text!); //hello
}

컬렉션 타입

List

List 타입은 <>안에 나열할 값의 타입을 적어주면 된다. 만약 List에 설정한 타입과 다른 값이 있으면 에러가 발생한다. JS의 배열과 비슷하다.

void main() {
    List<String> alphabet = ['a','b','c'];
    pring(alphabet[1]); //b
}

List) add 메소드

add 메소드를 이용해 List에 값을 추가할 수 있다.

void main() {
    List<String> alphabet = ['a','b','c'];
    alphabet.add('d');
    pring(alphabet); // [a, b, c, d]
}

List) remove 메소드

remove 메소드를 이용해 특정 값을 제거할 수 있다.

void main() {
    List<String> alphabet = ['a','b','c'];
    alphabet.remove('a')
    pring(alphabet); // [b, c, d]
}

List) indexOf 메소드

indexOf 메소드를 통해 원하는 값의 인덱스를 구할 수 있다.

void main() {
    List<String> alphabet = ['a','b','c'];
    pring(alphabet.indexOf('c')); // 2
}

Map

Map의 꺽쇠안에는 <key, value>의 타입을 넣어주면 된다. 대괄호를 통해 특정 값에 접근할 수 있다. (JS의 객체)

void main() {
    Map<String, int> price = {
        'staek': 120,
        'pasta': 30,
    };
    print(price); //{staek: 120, pasta:30}  
    print(price['staek']); // 120
}

Map) addAll 메소드

addAll 메소드로 Map안에 프로퍼티를 추가할 수 있다. 또는 그냥 할당해서 추가할 수도 있다.

void main() {
    Map<String, int> price = {
        'staek': 120,
        'pasta': 30,
    };

    price.addAll({
        'pizza': 20,    
    })
    print(price); //{staek: 120, pasta: 30, pizza: 20}  

    price['soup'] = 5;
    print(price); //{staek: 120, pasta: 30, pizza: 20, soup: 5}  
}

Map) remove 메소드

remove 메소드로 특정 프로퍼티를 삭제할 수 있다.

void main() {
    Map<String, int> price = {
        'staek': 120,
        'pasta': 30,
    };

    price.remove('pizza')
    print(price); //{staek: 120}  
}

Map) keys, values 메소드

keys 메소드로 Map의 keys만 얻을 수 있고, value 메소드로는 values를 얻을 수 있다.

void main() {
    Map<String, int> price = {
        'staek': 120,
        'pasta': 30,
    };
    print(price.keys); // (staek, pasta)
    print(price.values); // (120, 30)
}

Set

List 처럼 값들을 나열할 수 있지만 다른점은 중복값이 포함 될 수 없다. 포함시켜도 자동으로 제거해준다. 대부분의 메소드는 List와 비슷하다.

void main() {
    Set<int> price = {1,2,3};
    print(price); // {1,2,3}

    price.add(1);
    print(price); // {1,2,3}

    price.remove(3);
    print(price); // {1,2}
}

Set) contains 메소드

contains 메소드로 Set내부에 특정값이 있는지 확인할 수 있다.

void main() {
    Set<int> price = {1,2,3};
    print(price.contains(1)); // true
}

상수

const, final

타입 앞에 const 혹은 final을 붙이면 상수가 되어 재할당이 불가능해진다. 또한 식별자 앞에 타입을 쓰지 않아도 된다.

void main(){
    const String text2 = 'text2';
    text2 = 'string'; //error🚨

    final String text = 'text';
    text = 'string'; //error🚨

    const text3 = 'ABC';
}

const, final 차이점

const: 컴파일 타임에 값 결정

final: 런타임에 값 결정

• 컴파일 타임: 소스코드에서 기계어로 변환되는 과정
• 런타임: 컴파일 종료 후 프로그램이 실행되는 때

void main(){
    const DateTime time1 = DateTime.now(); //error🚨
    final DateTime time2 = DateTime.now();
}

DateTime.now()는 함수를 실행한 순간의 시간을 반환한다. 그래서 컴파일 타임에 값이 결졍되는 const는 에러가 발생한다.

연산자

산술/ 할당/ 비교 연산자는 다른 언어들과 동일하다.

null 병합 연산자

null 병합 연산자는 왼쪽 값이 null이 아니면 왼쪽 값을 반환, null이면 오른쪽 값을 반환한다.

void main(){    
    int? x;
    int y = 10;
    int z = x ?? y;
  print(z); //10
}

null 병합 할당 연산자

null 병합 할당 연산자는 변수의 값이 null이면 오른쪽 값을 할당한다.

// null일 경우
void main(){
  double? number = 2;
  print(number); //2

  number = null;
  print(number); // null

  number ??= 100;
  print(number); //100
}
// null이 아닐 경우
void main(){
  double? number = 2;
  print(number); //2

  number ??= 100;
  print(number); //2
}

타입 검사 연산자

is앞에 변수가 is뒤의 타입이면 true를 아니면 false를 반환한다. is뒤에 !를 붙이면 반대값이 나온다.

void main(){
    String text = 'a';
    print(text is String); //true
    print(text is int); //false
    print(text is! int); //true
}

왜 Dart인가

왜 많고 많은 언어중에 flutter는 Dart를 선택했을까?

초기 플러터 팀은 12개 이상의 언어중 UI 구축 방식이 일치하는 dart를 선택했다.

dart는 아래의 기준에서 높은 점수를 받았다.

1. 개발자 생산성
   1. 플러터는 동일한 코드 베이스로 개발해 개발 속도를 높인다.
   2. 플러터는 dart로 구축되어 가독성, 접근 가능성을 높여 코드 생산성을 유지한다.
2. 객체 지향
   1. 객체 지향 언어는 UI 프레임워크를 구축한 오랜 경험이 있다.
   2. 객체 지향 개발 경험이 있다면 플러터를 쉽게 배울 수 있다.
3. 예측 가능한 고성능
   1. 화면 끊김 현상 없이 고성능과 예측 가능한 성능을 제공하는 언어가 필요하다.
4. 빠른 할당
   1. 플러터는 기본 메모리 할당자에 의존하여 작은 객체의 할당, 해제를 효율적으로 하여 메모리 사용량을 최소화한다.
   2. 위의 기능을 제공하는 언어에서 효율적으로 작동한다.

• 기본 메모리 할당자: 프로그램에서 메모리를 동적으로 할당/ 해제하는 작업을 관리하는 시스템의 일부

dart의 주요 기능

이제 dart의 주요 기능들에 알아보자!

• 두 가지 컴파일 지원(JIT, AOT)
• Hot Reload
• 초당 60 프레임의 애니메이션
• 통합 레이아웃

두 가지 컴파일 지원

Dart는 JIT과 AOT 두가지 컴파일을 지원한다.

JIT(Just In Time): 프로그램을 실행하는 동안 기계어를 생성한다.

AOT(Ahead Of Time): 프로그램을 실행하기 전에 기계어를 생성한다.

두가지를 사용해 얻을 수 있는 이점은 아래와 같다.

• 개발과 디버깅 동안 JIT 컴파일러를 사용해 실시간으로 코드 수정사항을 확인할 수 있다.
• AOT 컴파일러를 사용해 미리 실행파일을 컴파일하여 변환 과정 없어 빠른 실행 시간, 성능 향상을 얻는다.

따라서 Dart는 JIT을 통한 빠른 개발 주기, AOT를 통한 빠른 실행 속도 두 가지 이점을 제공한다.

핫 리로드

핫 리로드는 앱 개발 중 코드 변경을 바로 적용해 앱을 빠르게 리로드하는 기능이다.

일반적으로 수정한 코드를 적용하기 위해 앱을 다시 빌드하여 실행하는 단점이 있지만 핫 리로드를 사용하면 코드를 수정해도 다시 빌드할 필요 없이 실시간으로 수정 사항 확인이 가능하다.

이처럼 수정 코드를 실시간 반영하여 개발 생산성 향상으로 개발과 디버깅 시간을 단축할 수 있다.

초당 60프레임의 애니메이션

플러터의 Skia 그래픽 엔진은 하드웨어 속도를 높여 애니메이션 그리기와 처리를 최적화해서 초당 60프레임의 애니메이션을 구현한다. 이를 통해 jank는 최소화되고 사용자들에게 부드러운 애니메이션을 제공한다.

따라서 플러터의 그래픽 엔진, dart의 JIT, AOT를 통한 성능 최적화로 초당 60프레임의 애니메이션 구현이 가능하다.

• Jank: 사이트 혹은 앱이 주사율에 맞추지 못해 버벅거리거나 잠시 정지한 상태를 사용자가 보는 것.

통합 레이아웃

dart로 플러터가 별도의 프로그램, 추가 템플릿, 레이아웃 언어 없이 레이아웃을 구성할 수 있다.

이외에도 “선제적 스케줄링, 타임 슬라이싱 및 공유 리소스”, “할당 및 가비지 수집” 등 몇가지 주요 기능들이 존재하지만 이는 추후에 다루도록 하겠다.

References

https://docs.flutter.dev/resources/faq#why-did-flutter-choose-to-use-dart

https://hackernoon.com/why-flutter-uses-dart-dd635a054ebf

https://beomseok95.tistory.com/315

링크에 접속해 자신의 OS에 맞게 다운로드를 진행하면 된다.

2. Android Studio 설치

링크로 접속해 밑으로 내리다 보면 OS 버전에 맞게 다운로드 할 수 있는 화면이 나온다.

• apple silicon인 경우 Mac(64-bit, ARM)을 선택하면 된다.

설치가 됐다면 flutter 확장 프로그램을 설치한다.

3. 환경변수 등록

// zsh
$ touch ~/.zshrc
$ open ~/.zshrc
// bash
$ touch ~/.bash_profile
$ open ~/.bash_profile

터미널을 열고 자신의 터미널 이름에 맞는 명령어를 입력하면 된다. 그럼 텍스트 편집기가 열린다.

export PATH="$PATH: (플러터 파일 경로) /bin"

위의 텍스트가 소괄호를 제외하고 적혀있을텐데 소괄호 부분에 다운받은 플러터 파일 경로를 작성하고 저장하면 된다. 이로써 환경변수 등록이 끝났다.

• PATH 환경 변수는 실행 파일의 경로를 지정하는 데 사용되고, 운영 체제는 실행 파일을 어디에서 찾아야 하는지 알 수 있다.

4. 기타

마지막으로 터미널에 flutter doctor를 입력해 flutter 개발에 필요한 것들이 잘 있는지 확인한다.

필자의 경우 위와 같은 결과가 나왔고 !가 있는 부분들은 해당 글의 마지막의 명령어를 입력하면 된다.

Xcode는 필요에 따라 설치하면 된다. 그 다음 Accept?(y/N)가 나오는데 다 yes 해주면된다.

SSH는 “원격 접속 프로토콜”로 원격지 컴퓨터에 접속하기 위해 사용되는 인터넷 프로토콜이다.

따라서 이를 이용해 다른 지역의 컴퓨터 또는 서버를 관리할 수 있고 파일 공유도 가능하다.

SSH는 대표적으로 데이터 전송(ex: github), 원격 제어(ex: AWS)에 사용된다.

SSH 말고도 Telent, Rlogin, VNC 등과 같은 다양한 원격 접속 프로토콜들이 존재하지만 그 중 SSH가 가장 보편적이고 보안적으로 안전하다.

• Telent와 Rlogin은 SSH와 달리 데이터를 평문으로 전송해 보안 측면에서 취약하다.

동작 방식

SSH key는 연결 상대를 인증하고 안전하게 데이터를 교환할 수 있게 해준다.

SSH key는 공개키와 개인키로 구성되어있다. 공개키는 암호화에 사용되고, 개인키는 복호화에 사용된다. 그리고 이름에서도 알 수 있듯 공개키는 외부에 공개되어도 안전하지만 개인키는 절대 노출되어서 안된다.

SSH에서는 대칭키 방식과 공개키(비대칭키) 방식을 사용하여 인증과 암호화를 하게 되는데 비대칭키를 통해서 서버 인증과 클라이언트 인증을 하고, 대칭키(세션키)를 통해 데이터를 암호화 한다.

SSH key 인증 과정

• 최초 접속 시 비대칭키 방식으로 클라이언트와 서버간의 인증을 진행한다.

1. 클라이언트 혹은 서버는 키 쌍을 생성한다.
2. 클라이언트는 서버에 자신의 공개키를 전송한다.
3. 서버는 공개키를 받아 랜덤한 값을 클라이언트의 공개키로 암호화해 전송한다.
4. 클라이언트는 개인키를 이용해 복호화해 서버에 다시 전송한다.
5. 서버는 자신이 보낸 값과 받은 값을 비교해 같다면 접속을 허용한다.

• 서로의 신원을 확인하고, 이제 대칭키를 만들어 정보를 교환한다.

1. 클라이언트 혹은 서버는 대칭키를 만들어 공유한다.
2. 공유된 대칭키를 통해 암호화, 복호화하여 정보를 교환한다.
3. 접속 종료시 대칭키는 폐기되어 재 접속시 새로 생성한다.

SSH key 생성

위와 같은 과정을 통해 원격지의 서버를 관리하고 파일을 공유할 수 있다. 이제 key를 생성하는 방법에 대해 알아보자.

• 위 과정을 통해 알 수 있듯 우리의 공개키를 서버에 보내줘야 원격 접속이 가능하다.

1. key 확인

우선 이전에 생성한 공개키가 있는지 확인할 필요가 있다. 생성한 공개키가 없다면 다음 단계로 넘어간다.

cat ~/.ssh/id_rsa.pub

2. key 생성

아래의 명령어를 통해 key를 생성한다.

ssh-keygen

3. 비밀번호 설정

key 생성을 하면 비밀번호를 설정하라는 문구가 나올텐데 이때 비밀번호 없이 사용하고 싶다면 enter키를 누르면 된다.

References

• https://library.gabia.com/contents/infrahosting/9002/
• https://velog.io/@skyepodium/Github-SSH-Key-등록하기
• https://thisblogfor.me/web/ssh/

응답은 5개의 그룹으로 나뉜다.

1XX 정보 응답

요청을 받았고 처리 중이다. 100번대 코드는 HTTP 1.0에서 지원되지 않는다.

2XX 성공

200 OK

서버가 요청을 성공적으로 처리했다.

201 Created

요청을 성공했고 결과로 새 리소스가 생성되었다. 이 응답은 일반적으로 POST 요청 또는 일부 PUT 요청 이후에 온다.

204 No Content

요청은 성공했으나 제공할 콘텐츠가 없다.

ex) PUT 요청을 했지만 수정할게 없는 경우

3XX 리다이렉션

301 Moved Permanently

요청한 리소스의 URI가 영구적으로 변경되었다. 응답에 새 URI가 주어질 수 있다.

302 Found

요청한 리소스의 URI가 일시적으로 변경되었다.

304 Not Modified

캐시를 목적으로 사용된다. 클라이언트에게 응답이 수정되지 않았음을 알려줘서 클라이언트는 응답의 캐시된 버전을 사용할 수 있다.

4XX 클라이언트 에러

400 Bad Request

잘못된 문법으로 요청해 서버가 이해할 수 없다.

ex) 누락된 데이터, 도메인 유효성 검사 및 잘못된 형식

401 Unauthorized

인증이 필요한 리소스에 인증 없이 접근하다. (비인증)

403 Forbidden

콘텐츠 접근 권한이 없다. 401과 다른점은 서버가 클라이언트가 누군지 알고있다.

404 Not Found

요청한 리소스를 서버에서 찾을 수 없다.

409 Conflict

요청이 현재 서버의 상태와 충돌하다.

ex) 서버에 이미 있는 파일보다 오래된 파일을 업로드하면 버전 제어 충돌이 발생한다.

5XX 서버 에러

500 Internal Server Error

서버가 처리 방법을 모르는 상황이다.

503 Service Unavailable

서버가 요청을 처리할 준비가 되지 않았다. 흔히 서버가 점검을 위해 다운되거나 과부하로 발생한다. Retry-After HTTP 헤더는 가능한 서비스 복구 예상 시간을 포함해야 한다.

References

https://developer.mozilla.org/ko/docs/Web/HTTP/Status

https://en.wikipedia.org/wiki/List_of_HTTP_status_codes

https://www.dotcom-monitor.com/blog/the-10-most-common-http-status-codes/

CORS는 Cross Origin Reasource Sharing의 약자로 직역하면 교차 출처 리소스 공유라는 뜻이다.

CORS는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.

쉽게 말해 다른 출처의 리소스 공유에 대한 허용/비허용 정책이다.

여기서 교차 출처는 다른 출처를 말한다. 그럼 출처(Origin)는 무엇일까?

URL은 하나의 문자열이 아닌 여러 구성요소로 이루어져있다. 출처(Origin)는 Protolcol, Host, Port를 합친 URL을 의미한다.

SOP(Same-Origin Policy)

SOP는 동일 출처 정책이란 뜻으로 ‘동일한 출처에서만 리소스를 공유할 수 있다’ 라는 규칙을 가지고있다. 따라서 브라우저는 다른 출처의 자원에 접근 하는 것을 차단한다.

만약 SOP 정책이 없다면 해커가 CSRF나 XSS 등의 방법을 이용해 개인 정보를 탈취할 수 있다. 하지만 그렇다고 다른 출처로 리소스를 요청할 수 없는건 아니다. CORS 정책만 지킨다면 가능하다.

• 출처 비교 로직은 서버가 아닌 브라우저에 구현된 스펙이다. 따라서 브라우저 없이 서버 간 통신하면 CORS 정책이 적용되지 않는다.

➕ CSRF (cross site request forgery attack) 사용자의 의지와 무관하게 공격자가 의도한 행동을 특정 웹페이지에 요청하게 하는 공격 방법이다. ➕ XSS (Cross-site Scripting) 공격자가 상대방의 웹 사이트에 악의적 스크립트를 삽입하는 공격 방법이다.

CORS 기본 동작

1. 클라이언트에서 HTTP요청 헤더에 Origin필드에 출처를 담아 전달한다.
2. 서버는 응답헤더에 Access-Control-Allow-Origin 필드를 추가하고 값으로 '이 리소스를 접근하는 것이 허용된 출처 url'을 전달한다.
3. 응답 받은 브라우저는 요청 Origin과 응답 받은 Access-Control-Allow-Origin을 비교해 차단 여부를 결정한다. a. 유효하면 다른 출처의 리소스를 가져온다. b. 유효하지 않다면 응답을 사용하지 않고 버린다. (CORS 에러)

결론은 서버에서 Access-Control-Allow-Origin 헤더에 허용할 출처를 기재해서 클라이언트에 응답하면 된다.

CORS 작동 방식 3가지

CORS 동작 방식은 한가지가 아니라 3가지 시나리오 따라 변경된다.

예비 요청 (Preflight Request)

브라우저는 본 요청 전 예비 요청을 통해 이 요청을 보내는 것이 안전한지 확인한다.

• 예비 요청의 메소드는 OPTIONS 요청이 사용된다.

1. JS fetch 메서드를 통해 리소스를 받아오려고 한다.
2. 브라우저는 서버로 HTTP OPTIONS 메소드로 예비 요청을 먼저 보낸다.
   • Origin 헤더: 자신의 출처
   • Access-Control-Request-Method 헤더: 실제 요청에 사용할 메소드
   • Access-Control-Request-Headers 헤더: 실제 요청에 사용할 헤더들
3. 서버는 예비 요청 응답으로 어떤 것을 허용/ 금지하고 있는지에 대한 헤더 정보를 담아서 브라우저로 보낸다.
   • Access-Control-Allow-Origin 헤더: 허용되는 Origin들의 목록
   • Access-Control-Allow-Methods 헤더: 허용되는 메소드들의 목록
   • Access-Control-Allow-Headers 헤더: 허용되는 헤더들의 목록
   • Access-Control-Max-Age 헤더: 해당 예비 요청이 브라우저에 캐시 가능한 시간(초 단위)
4. 브라우저는 요청과 응답 정책을 비교해 요청이 안전한지 확인하고 본 요청을 보낸다.
5. 서버가 본 요청에 응답하면 최종적으로 이 응답 데이터를 JS로 넘겨준다.

문제점

예비 요청으로 인해 실제 요청 시간 증가와 서버 요청이 배로 발생해 비용, 성능 문제가 생긴다.

하지만 이는 서버로 부터 Access-Control-Max-Age 응답 헤더를 받아 해당 시간동안 브라우저 캐시에 결과를 저장해 해결할 수 있다.

단순 요청 (Simple Request)

단순 요청은 예비 요청 없이 본 요청을 보낸 후, 서버가 이에 대한 응답의 헤더에 Access-Control-Allow-Origin 헤더를 보내주면 브라우저가 CORS정책 위반 여부를 검사하는 방식이다.

하지만 단순 요청은 3가지 경우를 만족해야 한다.

1. 요청 메소드가 GET, HEAD, POST 중 하나
2. Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width 헤더일 경우
3. Content-Type 헤더가 application/x-www-form-urlencoded, multipart/form-data, text/plain 중 하나

위 조건은 까다롭고 대부분 HTTP API 요청은 text/xml 이나 application/json 으로 통신해서 Content-Type에 위반된다. 따라서 대부분 예비 요청이 일어난다.

인증된 요청 (Credentialed Request)

인증된 요청은 클라이언트가 서버로 자격 인증 정보(쿠키, 토큰 등)를 실어 요청할때 사용되는 요청이다.

또한 예비 요청 처럼 preflight가 먼저 일어난다.

기본적으로 브라우저가 제공하는 요청 API 들은 인증 관련된 데이터를 요청 데이터에 담지 않도록 되어있지만 credentials 옵션으로 요청에 인증과 관련된 정보를 담을 수 있다.

이 옵션은 3가지의 값을 사용할 수 있다. 별도 설정을 하지 않으면 인증 정보는 서버에 자동 전송되지 않는다.

• same-origin(기본값) : 같은 출처 간 요청에만 인증 정보를 담을 수 있다.
• include : 모든 요청에 인증 정보를 담을 수 있다.
• omit : 모든 요청에 인증 정보를 담지 않는다.

인증된 요청을 보내는 방법은 fetch 메서드나 axios, jQuery 라이브리리 등이 있다.

서버도 인증된 요청에 대해 일반적인 CORS 요청과는 다르게 대응해야 한다.

1. 응답 헤더의 Access-Control-Allow-Credentials 항목을 true로 설정해야 한다.
2. 응답 헤더의 Access-Control-Allow-Origin 값에 와일드카드 문자("*")는 사용할 수 없고 분명한 Origin으로 설정해야 한다.
3. 응답 헤더의 Access-Control-Allow-Methods, Access-Control-Allow-Headers 값에 와일드카드 문자("*")는 사용할 수 없다.

CORS 해결 방법

BEST👍🏻) Access-Control-Allow-Origin 응답 헤더 세팅

서버측에서 Access-Control-Allow-Origin 헤더에 유효한 값을 포함해 브라우저에 응답하면 된다.

또한 Access-Control-Allow-Origin 값에 와일드카드 문자("*")를 사용하면 모든 출처의 요청을 받아 보안적 이슈가 발생하기에 분명한 Origin을 설정해야 한다.

• 서버측 응답에서 접근 권한을 주는 헤더를 추가하여 해결한다.

// CORS관련 HTTP 헤더 값
Access-Control-Allow-Origin
Access-Control-Request-Methods
Access-Control-Allow-Headers
Access-Control-Max-Age
Access-Control-Allow-Credentials
Access-Control-Expose-Headers

프록시 사이트 이용하기

요청해야 하는 URL 앞에 프록시 서버 URL을 붙여서 요청하게 된다. 프록시 서버를 사용하면 중간에 요청을 가로채서 HTTP 응답헤더에 Access-Control-Allow-Origin : * 를 설정해준다.

// heroku 프록시 서버 URL
https://cors-anywhere/herokuapp.com
// 요청
axois({
  method: "GET",
  url: `https://cors-anywhere/herokuapp.com/{주소}`,
  header:{
    'APIKey': ${API_key}
  }
})

현재 무료 프록시 서비스들은 모두 악용 사례로 api 요청 횟수 제한을 두어 실전이 아닌 테스트용으로 사용해야 한다. 실전에서는 프록시 서버를 구축하여 사용해야 한다.

Webpack Dev Server로 리버스 프록싱하기

webpack-dev-server가 제공하는 프록시 기능을 사용한다. 이는 로컬에서만 가능하다.

아래의 설정을 하면 /api로 시작하는 URL로 보내는 요청을 브라우저는 localhost:8000/api로 요청한줄 알지만 실은 웹팩이 target값인 URL로 요청을 프록싱한다.

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.evan.com',
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
      },
    }
  }
}

http-proxy-middleware 사용

로컬 환경에서 사용하여 클라이언트단에서 쉽게 해결할 수 있다.

http-proxy-middleware를 설치하고 src 폴더안에setupProxy.js 파일을 만들고 아래 코드를 작성하면 된다. 그럼 로컬 환경에서 http://localhost:3000/api로 시작하는 요청을 라이브러리가 http://localhost:5000/api로 프록싱 해준다.

const { createProxyMiddleware } = require("http-proxy-middleware")

module.exports = function (app) {
    app.use(
        "/api",
        createProxyMiddleware({
            target: "http://localhost:5000",
            changeOrigin: true,
        })
    )
}

package.json에 proxy값 설정

CRA로 생성한 프로젝트에서는 package.json에 proxy 값을 설정해 proxy기능을 활성화할 수 있다.

{
  //...
  "proxy": "http://localhost:4000"
}

JSONP

브라우저에서 css나 js 같은 리소스 파일들은 SOP 영향을 받지않아 외부 서버에서 읽어온 js 파일을 json으로 바꿔주는 일종의 편법이다. 단점은 GET 방식의 API만 요청이 가능하다.

References

https://inpa.tistory.com/entry/WEB-📚-CORS-💯-정리-해결-방법-👏

https://evan-moon.github.io/2020/05/21/about-cors

https://ingg.dev/cors

https://xiubindev.tistory.com/115

https://simsimjae.medium.com/cors와-jsonp에-대해서-aa3ec0456e97

http://yoonbumtae.com/?p=2452