[KB IT's Your Life 7기] 6주차 교육 후기, pinia & axios

 

 

 

6주차 수강 후기입니다!

이번 주제는 "프론트엔드 교육 후기"입니다

그리고 세부 주제는 "pinia & axios"입니다

 

 

지난 3월간 HTML, CSS, JS 그리고 Vue 까지..

프론트엔드에 필요한 기초 지식들을 많이 학습할 수 있었습니다

 

저 역시 프론트엔드 react 개발 경험이 2년 이상 있었지만

이번 교육 과정처럼 기초를 깊이 파고 드는 시간은 부족했었는데요

시험 과정도 거치면서 이번에 확실하게 알게 되었습니다

 

 

그래서!!!!

이번 마지막 주제로 프론트엔드 교육 후기이자..

중요했던 "pinia & axios" 에 대해서 설명하고자 합니다.

 

 

 

 

 

---

 

 

1. Pinia란 무엇인가? 🍍

기존 Vue 방식에서는 데이터를 전달할 때 props나 emit을 사용했죠.

하지만 프로젝트 규모가 커질수록 이 방식은 마치 복잡하게 꼬인 실타래처럼 관리하기가 정말 어려워집니다.

그래서 필요한 것이 바로 '중앙 집중화된 저장소'입니다!

어디서든 데이터를 편하게 읽고 쓸 수 있게 만드는 것이죠.

 

• Pinia는? Vue3의 공식 상태 관리 라이브러리로, 어플리케이션 전체의 데이터를 한 곳에 모아 관리합니다.
• React와 비교하자면? 많은 분께 익숙한 Redux와 유사한 역할을 한다고 보시면 됩니다.
• 직관적인 방식: Composition API 방식을 지원해서 코드가 굉장히 직관적이에요.
• 공식 표준: 이전에는 Vuex를 많이 썼지만, 이제는 Pinia가 공식 표준으로 자리 잡았습니다.
• 강력한 도구: 프로젝트 생성 시 옵션만 체크하면 자동 설정되고, Vue 개발자 도구와 연동되어 상태 변화를 실시간으로 추적할 수 있다는 게 정말 큰 장점이에요!

 

2. Pinia의 아키텍처와 3대 구성 요소

 

Pinia Store는 크게 세 가지 요소로 구성되어 Vue 컴포넌트와 데이터를 주고받습니다.

구조를 이해하면 사용법이 훨씬 쉬워져요.

 

1. State (상태)
   • 말 그대로 반응형 데이터를 정의하는 곳입니다. 우리 앱에서 유지해야 할 핵심 정보들이 담기죠.
2. Getters (게터)
   • 저장된 상태를 바탕으로 계산된 값을 반환합니다. React의 useMemo처럼 효율적인 계산을 돕고, 캐시(Cache) 기능을 사용하기 때문에 성능 면에서도 아주 우수합니다.
3. Actions (액션)
   • 상태를 변경하는 로직이 들어갑니다. 컴포넌트에서 직접 호출할 수 있고, 특히 백엔드 API와 통신하여 데이터를 가져오거나 수정하는 비동기 로직을 처리할 때 핵심적인 역할을 합니다.

 

---

 

3. 스토어 정의 및 설정 방법

 

그럼 코드로 어떻게 구현하는지 살펴볼까요?

Step 1. 스토어 만들기 (defineStore)

defineStore 함수를 사용해 스토어를 정의합니다.

이때 외부에서 사용할 수 있도록 객체 형태로 리턴해주는 것이 포인트예요!

 

 

Step 2. 앱에 등록하기

 

main.js에서 딱 한 번만 설정해주면 앱 전체에서 자유롭게 쓸 수 있습니다.

 

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

// Vue 앱에 Pinia 장착! 🍍
app.use(pinia) 
app.mount('#app')

 

4. 컴포넌트에서 사용하기 (Composition API)

 

이제 컴포넌트에서 이 스토어를 불러와 볼까요? 여기서 주의할 점이 하나 있습니다!

스토어에서 데이터를 가져올 때, 숫자나 문자열 같은 기본 타입 값은 그냥 가져오면 반응성을 잃어버릴 수 있다.
그래서 반드시 computed로 감싸서 연결해줘야 화면이 실시간으로 바뀐다.
(참조형 데이터인 배열이나 객체는 바로 사용해도 괜찮음)

 

<script setup>
import { ref, computed } from 'vue'
import { useCount2Store } from '@/stores/counter.js' 

// 1. 스토어 인스턴스 생성
const store = useCount2Store()

// 2. 데이터 가져오기 (반응성 유지를 위해 computed 사용!)
const currentCount = computed(() => store.count) 

// 3. 액션 가져오기
const { increment } = store

const inputNum = ref(0)

const handleAdd = () => {
  // 스토어의 액션을 호출하여 상태 변경!
  increment({ num: inputNum.value })
  inputNum.value = 0
}
</script>

<template>
  <div class="account-book">
    <h2>현재 잔고: {{ currentCount }}원</h2> 
    <input type="number" v-model="inputNum" placeholder="금액 입력" />
    <button @click="handleAdd">금액 추가</button> 
  </div>
</template>

 

 

 

이렇게 이번 교육을 통해 Vue의 상태 관리에 대해 깊이 있게 다뤄보았는데요! React의 Redux와 비슷하면서도 Vue만의 직관적인 스타일이 녹아있어 정말 매력적인 도구라는 생각이 들었습니다.

기초를 탄탄히 다진 만큼, 앞으로의 프로젝트에서 Pinia를 활용해 더 효율적인 구조를 설계해 볼 수 있을 것 같아요

 

 

---

 

5. REST API란 무엇인가? 🌐

프론트엔드 개발자라면 서버와 대화하는 규칙을 알아야 하는데요, 그 대표적인 규칙이 바로 REST API입니다. 쉽게 말해 "어떤 데이터를(URI) 어떻게(Method) 할 것인가?"를 정하는 약속이에요.

REST의 3요소

 

1. 자원 (Resource) - URI: 우리가 다루는 데이터(게시글, 사용자 등)에 /board, /users 같은 고유한 주소를 주는 것입니다.
2. 행위 (Verb) - HTTP Method: 그 데이터를 어떻게 할지 결정합니다.
   • GET: 조회 (가져오기)
   • POST: 생성 (새로 쓰기)
   • PUT/PATCH: 수정 (전체/부분)
   • DELETE: 삭제 (지우기)
3. 표현 (Representations): 데이터를 어떤 형식으로 주고받을 것인가인데, 요즘은 JSON이 표준입니다.

---

6. 왜 Fetch 대신 Axios를 쓸까? 🛠️

브라우저에는 내장된 fetch가 있지만, 실무에서는 Axios라는 라이브러리를 정말 많이 사용합니다.

그 이유를 비교해 보면 확실히 알 수 있어요.

구분	Axios (외부 라이브러리)	fetch (브라우저 내장 API)
설치	필요 (npm install axios)	필요 없음
JSON 변환	자동 지원 (바로 객체로 사용)	수동 (.json() 과정 필요)
에러 처리	404, 500 에러를 알아서 Catch함	네트워크 장애가 아니면 성공으로 간주
Timeout	설정 간편함	직접 구현해야 해서 번거로움

한마디로 "코드가 더 짧아지고, 예외 처리가 강력하다"는 점이 Axios의 매력입니다!

---

7. 비동기 처리의 현대적인 방식: async-await

서버에서 데이터를 가져오는 동안 웹사이트가 멈추면 안 되겠죠?

그래서 비동기 처리가 중요합니다.

 

과거에는 콜백 지옥(Callback Hell)에 빠지기도 했고,

.then()을 쓰는 Promise 방식도 있었지만,

요즘은 async-await가 대세입니다.

 

// [Promise 방식] 조금 길어질 수 있어요
axios.get('/board').then(res => console.log(res));

// [async-await 방식] 실무에서 가장 선호하는 직관적인 코드!
async function getData() {
    // await: 서버 응답이 올 때까지 기다려!
    const res = await axios.get('/board');
    console.log(res.data); // 실제 데이터는 res.data 안에 있어요
}

---

8. Axios 실전 활용 꿀팁 💡

① 응답 객체(Response) 뜯어보기

서버에서 응답이 오면 단순히 데이터만 오는 게 아니라 여러 정보가 담긴 객체가 옵니다.

• data: 실제 서버가 보내준 데이터 (가장 많이 씀!)
• status: HTTP 상태 코드 (200이면 성공, 404면 없음)
• headers: 응답 헤더 정보

② 데이터 보내기 (POST)

GET과 달리 두 번째 인자에 보낼 데이터를 넣어줍니다.

JavaScript

 

axios.post('/board', {
    title: '새 글 제목',
    content: '내용입니다'
});

③ 전역 설정 (Axios Defaults)

매번 똑같은 URL 주소나 인증 정보를 넣기 번거로울 때 사용합니다.

JavaScript

 

// API 기본 주소 설정
axios.defaults.baseURL = 'https://api.example.com';

// 모든 요청에 공통으로 들어갈 인증 정보
axios.defaults.headers.common['Authorization'] = 'Bearer token_value';

 

이렇게 하면 이후에는 axios.get('/board')라고만 써도 전체 주소로 알아서 요청을 보낸답니다. 정말 편리하죠?

 

 

---

 

 

이번 교육을 통해 Pinia로 상태를 관리하고,

Axios로 서버와 통신하는 일련의 흐름을 완벽하게 정리할 수 있었습니다.

이제 이 두 조화로 더 멋진 웹 서비스를 개발해 나가는 일만 남았네요!!!

 

다음주는 스켈레톤 프로젝트 후기로 찾아오겠습니다 :D