[019] axios를 이용한 HTTP 통신

 
2024.06.03(월)
 
Vue.js 8일차

우선 라우터를 쓰지 않고,
axios로 통신하는 걸 짜봤다.

기본적인 설치를 하지 않아서 오류가 떴는데,
이런건 확인해보고 강사님께 질문하도록.!
 
 

---

 
원쌤의 Vue.js 퀵스타트
 

• CH01 Vue.js 소개
• CH02 Vue.js를 위한 ES6
• CH03 Vue.js 기초와 Template
• CH04 Vue 인스턴스
• CH05 이벤트 처리
• CH06 스타일 적용
• CH07 단일 파일 컴포넌트를 이용한 Vue 애플리케이션 개발
• CH08 컴포넌트 심화
• CH09 Composition API
• CH10 vue-router를 이용한 라우팅
• CH11 axios를 이용한 HTTP 통신
• CH12 vue-router와 axios를 사용한 예제
• CH13 pinia를 이용한 상태 관리

 

---

 

CH10 vue-router를 이용한 라우팅

 
10.4 히스토리 모드와 404 라우트
 
히스토리 모드와 404 라우트
: URI경로와 동기화하며 UI를 나타내기 위해 어떤 정보를 이용할 것인지를 지정하는 방법 제공
: Vue에서는 해시모드, HTML5, 메모리 모드 총 3가지 제공
 
배포시 히스토리 모드 운영
- 주의사항: 풀백 페이지가 올바르게 설정되어있어야함! (새로고침)
- 실습: serve 패키지로 배포판 운영하기
 
404 라우트
: 라우트로 설정되지 않은 경로 요청시 나타남(#맵핑될게 없구나)
 
/:path(.*)*
점 어느 문자든 하나 / * 여러 개도 상관없음 / ( )* 괄호 여러 개도 상관없음
먼저 작성된 것이 우선 !!
 

---

 
HTTP 프로토콜
 
★ 클라이언트가 항상 먼저 시작한다
★ 텍스트 기반 → 줄바꿈 문자 매우 중요함 (의미 구분)
 
connect, close ... TCP/IP
request, response ... HTTP
 
HTTP Request
텍스트 기반, '줄바꿈 문자' 매우 중요
요청 라인 / 요청 헤더 / 요청 본체 → 3단계로 구성
: 요청 라인은 1줄로 구성(method + URL + Version)
: 요청 헤더는 키:값 형태(콜론으로 구분)
: 요청 본체: GET 요청시에는 Body 부분이 없음
 
클라이언트의 의도가 가장 중요함(method)
어디에 내용을 담는지, 의도가 무엇인지
- GET: 페이지요청 (내용유출, 길이 제한 있음)
- POST: 폼처리 (body에 내용을 담음, 내용유출보다 길이 제한이 없다는 점이 중요함)
 
HTTP Response
★ 상태코드 (매우 중요)
200: 성공 / 3XX: 리다이렉트 / 4XX, 5XX: 에러 상황(4-클라이언트 잘못, 5-서버 잘못
 
 

---

 

11 axios를 이용한 HTTP 통신

 
 
REST API란
 
REST(Representationall State Transfer)
: 정보를 자원으로 간주
: 각 자원에게 URL를 배정 / HTTP 메서드로 표현
 
API: Application Program Interfaced
: 내가 작성한 것 외에 갖다 써먹을 수 있는 것
: 라이브러리 역할 / 아예 분리되어, 대면하고 있어, 대화할 수 있는(interface)
 
- POST, PUT은 BODY가 있고, JSON으로 지정
- REST Api는 OPEN Api라고 부르기도 함 → 사용에 제약이 없음
 
★ CRUD:
GET: 추출 / POST: 생성 / PUT: 수정 / DELETE: 삭제
 
비쥬얼 스튜디오 - thunder client 설치

 
axios란?
: HTTP 기반 통신을 지원하는 자바스크립트 라이브러리
: Vue.js 애플리케이션에서 서버와의 통신을 쉽게 처리할 수 있도록 도와줌
 
axios와 fetch 비교
- axios는 설치해야하며, JSON 자동 변환해줌
 
proxy server
server: {
  proxy: {
    '/api' : {
      target: ' http ...'
      changeOrigin: true,
     rewrute: (path) => path.replace(/^\/api/, '')
 
axios 라이브러리 사용법
: Promise와 async-await는 axios의 비동기 처리
* async-await 필수로 기입 ! (await 없어도 오류가 나지 않아 찾기 어려움)
 
-실습 참고-
 
404 error는 통신을 정상적으로 한 것이기 때문에 try/catch에 잡히지 않음
 
axios 사용방법
json-server 운영방법(어떻게 파일 구성해야하는지)
 

실습

 

[019] axios를 이용한 HTTP 통신

 
vue 설치
→ npm i 필수 

[019] axios를 이용한 HTTP 통신

 
라우터 안 쓰니깐 다 No 체크

[019] axios를 이용한 HTTP 통신

 
npm i -g json server
 

[019] axios를 이용한 HTTP 통신