반응형
axios
JavaScript 환경에서 HTTP 요청을 보내고 응답을 처리하는 데 사용되는 Promise 기반의 HTTP 클라이언트 라이브러리
요청 데이터를 JSON으로 직렬화하거나, 응답 데이터를 JSON으로 자동 파싱합니다.
간단한 사용법과 강력한 기능을 제공하여 RESTful API와의 상호작용에 널리 활용되고 있습니다.
직렬화 해주는 것을 자동으로 해줍니다.
get 방식과 post 방식이 있는데요,
GET 요청 => 서버에서 어떠한 데이터를 받을 때 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
axios
.get("https://jsonplaceholder.typicode.com/posts")
.then(res => {
console.log(res.data);
// title만 콘솔에 출력
console.log("---------------------");
res.data.forEach(d => console.log(d.title));
console.log("---------------------");
res.data.map(d => console.log(d.title));
})
.catch(err => {
console.log(err);
});
</script>
</head>
<body>
</body>
</html>POST 요청 ⇒ 요청 본문을 통해서 서버로 정보(요청 파라미터)를 전달
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
axios
.post("https://jsonplaceholder.typicode.com/posts", {
title: "axios post test",
body: "axios is fun!!!",
userName: "홍길동"
})
.then(res => {
console.log(res.data);
})
.catch(err => {
console.log(err);
});
</script>
</head>
<body>
</body>
</html>
모듈
모듈이란 소프트웨어를 구성하는 하나의 독립적인 단위로, 특정 기능을 캡슐화하여 다른 코드와 분리한 코드의 집합입니다.
모듈을 사용하면 코드 재사용성을 높이고, 관리와 유지보수를 쉽게 하며, 복잡한 시스템을 더 작은 단위로 나누어 개발하는 것이 가능합니다.
기본(default) 내보내기
math.js
export default function multiply(a, b) {
return a * b;
}
main.js
import multiply from './math.js';
console.log(multiply(5, 3)); // 15
반응형
'프론트엔드' 카테고리의 다른 글
| 리액트 컴포넌트, props, state (0) | 2025.01.13 |
|---|---|
| 리액트에 대하여 (0) | 2025.01.07 |
| [LG CNS AM Inspire Camp 1기] 자바스크립트 배열과 객체 (0) | 2024.12.29 |
| [LG CNS AM Inspire Camp 1기]자바스크립트 주요 용어와 헷갈리는 개념2 (1) | 2024.12.28 |
| [LG CNS AM Inspire Camp 1기]자바스크립트 주요 용어와 헷갈리는 개념1 (0) | 2024.12.26 |