만들어 둔 프론트에서 서버로 요청을 보내고 서버에서는 데이터베이스에서 바탕으로 요청을 처리하고 return하여 프론트에서 보여지는 순서로 이루어진다.
서버에 요청을 보내는 처리는 apiService에서 이루어진다.
1. app-config.js
const hostname = window
&& window.location
&& window.location.hostname;먼저 window.location.hostname 을 사용하여 현재 호스트의 주소를 가져온다.
window.location 은 현재 창에 대한 정보를 포함하는 객체이며, 그 중 hostname 속성은 현재 호스트의 도메인 주소를 나타낸다.
&& 연산자
: 논리 AND 연산자
a1 = true && true // t && t returns true a2 = true && false // t && f returns false a3 = false && true // f && t returns false a4 = false && (3 == 4) // f && f returns false a5 = 'Cat' && 'Dog' // t && t returns "Dog" a6 = false && 'Cat' // f && t returns false a7 = 'Cat' && false // t && f returns false a8 = '' && false // f && f returns "" a9 = false && '' // f && f returns false- 참과 거짓을 판별하는 정확한 정의
값을 true 로 변환 가능하면 참,
값을 false로 변환 가능하면 거짓.
-> 이 정보를 통해 현재 애플리케이션이 실행 중인 도메인이 무엇인지 확인할 수 있다.
if (hostname === "localhost") {
backendHost = "http://localhost:8080";
} else {
backendHost = "http://43.200.90.45:8080";
}
export const API_BASE_URL = `${backendHost}`;그런 다음 가져온 호스트 주소가 'localhost'인지를 확인하여 로컬 개발 환경에서는 백엔드 서버를 "http://localhost:8080" 으로 설정하고, 로컬이 아닌 경우에는 실제 백엔드 서버의 IP주소나 도메인 주소를 사용한다.
그리고 API_BASE_URL에 결정된 백엔드 호스트 주소가 할당되어 프론트에서 사용된다.
이 주소는 프론트에서 백으로 API 요청을 보낼 때 사용된다.
💻 app-config.js
2. apiService.js
import { API_BASE_URL } from "./app-config";
우선 위에서의 API_BASE_URL 을 import 하여 가져와준다.
그리고 axios 요청 함수를 생성한다.
export async function apiCall(url, method, requestData, token) {}2.1) 첨부파일 다운로드 요청인 경우
if (url.includes('/downloadFile')) {
window.open(API_BASE_URL + url, '_blank');
return;
}파일 다운로드는 브라우저의 기본 다운로드 동작을 사용해야 하므로, axios 요청을 보내지 않고 파일의 다운로드 URL 을 직접 사용하여 브라우저가 해당 파일을 다운로드 하도록 유도한다. 따라서 바로 return한다.
2.2) 헤더 설정 / 토큰 확인
※ 헤더 설정
let headers = '';
if ((url.indexOf('qnaInsert') >= 0 || url.indexOf('eventinsert') >= 0 || url.indexOf('eventupdate') >= 0 || url.indexOf('bannerinsert') >= 0 || url.indexOf('noticeSubmit') >= 0 || url.indexOf('noticeModify') >= 0) && token != null) {
headers = { 'Content-Type': 'multipart/form-data' };
} else if (token !== null) {
headers = {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + token
};
} else {
headers = { 'Content-Type': 'application/json' };
}요청 헤더는 요청의 성격을 명시하는 역할이다.
요청의 성격에 따라 다른 헤더를 설정해야 한다.
만약 보내는 요청 URL에 특정 문자열이 포함되어 있는지 확인하여 요청의 종류를 판별한다.
(qnaInsert, eventinsert, eventupdate 등의 요청은 파일 업로드가 포함되어 있다. )
if 문으로 만약 포함되어 있다면 'Content-Type'을 'multipart/form-data' 로 설정한다.
파일 업로드와 관련된 요청임을 서버에게 알려준다.
..
※ 토큰 확인
인증 토큰 'token'이 존재하는 경우, 헤더에는 'Content-Type': 'application/json' 로 설정한다.
일반적인 JSON 형식의 데이터를 서버로 전송할 때 사용된다.
또한, 'Authorization' 헤더에는 'Bearer {token}' 형식으로 토큰을 포함하여 서버에게 인증 정보를 제공한다.
Content-Type 이란
요청 본문에 포함된 데이터의 형식을 서버에게 알려준다.
서버가 요청을 올바르게 해석하고 처리하기 위해 필요하다.
프론트가 JSON 형식으로 데이터를 서버에게 전송하려면 요청의 'Content-Type 을 'application/json' 으로 설정해야 한다.
Authorization 이란
HTTP 요청 헤더의 일종으로,
프론트에서 서버에게 자신의 신원을 인증하기 위해 사용되는 헤더이다.
일반적으로 사용자가 로그인하고 서버에서 발급한 인증 토큰을 이 헤더에 포함하여 요청을 보낸다.
토큰을 통해 서버는 요청이 유효한지, 해당 사용자가 접근할 권한이 있는지를 판단할 수 있다.
2.3) axios 전송 options
let options = {
url: API_BASE_URL + url,
method: method,
headers: headers,
};axios 요청을 보낼 options 를 구성하는 과정이다.
url : 요청을 보낼 url 을 설정.
HTTP 메소드 설정 : ex) GET, POST, PUT, DELETE 등
그리고 헤더에는 위에서 정해진 헤더가 들어가진다.
if (requestData) {
options.data = requestData;
}그리고 만약 전송할 Data 가 있는 경우에는 options 에 data 속성을 추가해준다.
2.4) Axios 요청
return axios(options)
.then(response => {
return response.data;
}).catch(err => {
console.error(`** apiCall Error status=${err.response.status}, message=${err.message}`);
return Promise.reject(err.response.data);
});위에서 정해진 요청 속성들을 가지고 axios요청을 보내준다.
정상적인 응답을 받았을 때는 .then으로,
오류 응답을 받거나 요청이 실패했을 때는 .catch가 실행된다.
이렇게 Axios 를 사용하여 요청을 보내고 성공 또는 실패에 따라 적절한 처리를 하여 비동기적으로 서버와 통신을 수행한다.
axios 요청이란
axios는 Promise 기반의 HTTP 클라이언트 라이브러리 이다.
HTTP 요청을 비동기적으로 처리하고 응답을 Promise 객체로 반환한다.
HTTP 클라이언트 라이브러리에는 axios 말고도 fetch, Ajax 등이 있는데
fetch는 헤더에 JSON 타입임을 계속 알려줘야 하지만 axios는 알려주지 않아도 JSON타입으로 인식한다. ( -> axios 의 장점)
Ajax 는 비동기적으로 서버와 브라우저 간의 데이터를 교환하기 위한 웹 개발 기법이다. 페이지 전체를 새로 고침 하지 않아도 서버에서 데이터를 가져와서 페이지의 일부분만 업데이트 할 수 있다. ex) 검색창
다음 게시물에서는 프론트에서 보낸 이 요청을 받는 백을 적을 예정이다!
