Axios를 활용한 HTTP 요청
Axios로 API에 GET 및 POST 요청을 보냅니다.
Axios를 활용한 HTTP 요청은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 3개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 3개의 강의가 포함되어 있습니다.
API와 통신하기
대부분의 실제 앱은 HTTP를 통해 백엔드에서 데이터를 불러옵니다. 브라우저에는 기본 제공되는 fetch가 있지만, 많은 뷰 프로젝트에서는 사용하기 쉬운 API, 자동 JSON 파싱, 강력한 설정 옵션을 제공하는 인기 있는 프로미스 기반 HTTP 클라이언트인 액시오스를 사용합니다.
액시오스 설치하기
패키지 관리자로 프로젝트에 액시오스를 추가한 다음, 필요한 곳에서 가져옵니다.
npm install axios액시오스 가져오기
기본 내보내기를 가져오면 요청을 시작할 수 있습니다.
import axios from "axios"GET 요청
데이터를 가져오려면 axios.get을 사용합니다. 이 메서드는 response 객체로 해석되는 프로미스를 반환하며, 본문은 이미 JSON에서 파싱된 상태로 response.data에 있습니다.
axios.get("https://api.example.com/users")
.then(response => {
console.log(response.data)
})POST 요청
데이터를 보내려면 axios.post를 사용합니다. 두 번째 인수는 요청 본문이며, 액시오스가 이를 자동으로 JSON으로 직렬화합니다.
axios.post("https://api.example.com/users", {
name: "Grace",
email: "grace@example.com"
})async/await 사용하기
async/await를 사용하면 프로미스를 더 명확하게 읽을 수 있습니다. 함수를 비동기 함수로 표시하고 요청을 기다리세요.
async function loadUsers() {
const response = await axios.get("/api/users")
return response.data
}Vue 메서드 내부에서
컴포넌트 메서드에서 액시오스를 호출하고 결과를 반응형 데이터에 저장하는 방식이 일반적입니다.
export default {
data() {
return { users: [] }
},
methods: {
async fetchUsers() {
const res = await axios.get("/api/users")
this.users = res.data
}
}
}요청 설정: 쿼리 매개변수
쿼리 문자열 매개변수를 추가하려면 params 객체를 전달합니다. 액시오스가 URL을 대신 구성합니다.
axios.get("/api/users", {
params: { page: 2, limit: 10 }
})
// requests /api/users?page=2&limit=10요청 설정: 헤더
인증 token과 같은 사용자 지정 헤더는 config 객체를 통해 보냅니다.
axios.get("/api/profile", {
headers: {
Authorization: "Bearer " + token
}
})기본 URL 설정
모든 곳에서 전체 URL을 반복해서 작성하면 오류가 발생하기 쉽습니다. baseURL과 공통 기본값을 사용하는 액시오스 인스턴스를 만든 다음 앱 전체에서 사용하세요.
import axios from "axios"
export const api = axios.create({
baseURL: "https://api.example.com",
timeout: 5000,
headers: { "Content-Type": "application/json" }
})
// elsewhere: api.get("/users")기타 HTTP 메서드
액시오스는 일반적인 HTTP 동사를 그대로 지원합니다. get, post, put, patch, delete 중 수행하려는 작업에 맞는 메서드를 사용하세요.
api.put("/users/1", { name: "Updated" })
api.patch("/users/1", { name: "Patched" })
api.delete("/users/1")간단히 확인하기
액시오스 요청에 대한 지식을 테스트해 보세요.
복습
액시오스는 프로미스 기반 HTTP 클라이언트입니다. get, post, put, patch, delete를 사용하고, config 객체를 통해 params와 headers를 전달하며, 가독성을 위해 async/await를 우선적으로 사용하세요. axios.create를 통한 공용 인스턴스와 baseURL을 사용하면 요청을 DRY하게 유지할 수 있습니다. 다음에는 컴포넌트 수명 주기의 적절한 시점에 데이터를 가져와 보겠습니다.
AI 튜터와 함께 HTML을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 42
- 레슨
- 156
자주 묻는 질문
“Axios를 활용한 HTTP 요청” 강의는 무료인가요?
네 — “Axios를 활용한 HTTP 요청” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 3개의 강의가 포함되어 있습니다.
“Axios를 활용한 HTTP 요청”에서 뭘 배우나요?
Axios로 API에 GET 및 POST 요청을 보냅니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Vue Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 1번째 강의입니다.
“Axios를 활용한 HTTP 요청” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- Axios를 활용한 HTTP 요청
- 생명주기 훅과 데이터 가져오기
- 오류 처리와 전역 인터셉터