๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
  • ์žฅ์›์ต ๊ธฐ์ˆ ๋ธ”๋กœ๊ทธ
๐Ÿ“บ Front End/- React, Next.js

[React axios] React์˜ axios ๊ธฐ๋ณธ :: axios๋กœ GET, POST, PUT, DELETE ์š”์ฒญ ๋ณด๋‚ด๊ธฐ

by Wonit 2020. 10. 8.

์ง€๋‚œ ์‹œ๊ฐ„์—๋Š” ์™œ ์šฐ๋ฆฌ๊ฐ€ axios๋ฅผ ์•Œ์•„์•ผ ํ• ๊นŒ?์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์•˜๋‹ค.

 

 

[React axios] ๋ฆฌ์•กํŠธ axios๋ž€? :: HTTP-API ์—ฐ๋™์„ ์œ„ํ•œ ๋ชจ๋“ˆ (axios vs Fetch API)

์šฐ๋ฆฌ๊ฐ€ ์ผ๋ฐ˜์ ์ธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ API๋ฅผ ์—ฐ๋™ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋ณดํ†ต fetch-Api๋ฅผ ์‚ฌ์šฉํ•˜๊ณค ํ–ˆ๋‹ค. ๋ฆฌ์•กํŠธ ๋˜ํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ built-in ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ค‘ ํ•˜๋‚˜์ธ fetch-api๋˜ํ•œ ํ›Œ๋ฅญํ•œ api ์—ฐ๋™ ๋ชจ๋“ˆ์ด๋‹ค. ํ•˜์ง€๋งŒ

wonit.tistory.com

 

์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” ์‹ค์ œ๋กœ axios๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์ „์— axios์˜ ๊ธฐ๋ณธ์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋ ค ํ•œ๋‹ค.

 

REST API

 

REST API๋Š” ์šฐ๋ฆฌ๊ฐ€ ํ•˜๊ณ ์‹ถ์€ ์ž‘์—…์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ๋ฉ”์„œ๋“œ๋กœ ์š”์ฒญํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์€ ๋‹ค๋“ค ์•Œ๊ณ  ์žˆ์„ ๊ฒƒ์ด๋‹ค.

 

REST API์—๋Š” ๋Œ€ํ‘œ์ ์œผ๋กœ ๋‹ค์Œ๊ณผ ๊ฐ™์€ HTTP ๋ฉ”์„œ๋“œ๋ฅผ ํ–‰์œ„์˜ ์ˆ˜๋‹จ์œผ๋กœ ์ด์šฉํ•œ๋‹ค.

 

  • GET : ๋ฐ์ดํ„ฐ ์กฐํšŒ
  • POST : ๋ฐ์ดํ„ฐ ๋“ฑ๋ก ๋ฐ ์ „์†ก
  • PUT : ๋ฐ์ดํ„ฐ ์ˆ˜์ •
  • DELETE : ๋ฐ์ดํ„ฐ ์‚ญ์ œ

 

์ด์ œ ์ด 4๊ฐ€์ง€ ๋ฉ”์„œ๋“œ๋ฅผ axios์—์„œ ์‚ฌ์šฉํ•ด๋ณด์ž.

 

axios ์„ค์น˜ํ•˜๊ธฐ

 

axios๋Š” ๋‹ค์–‘ํ•œ ๋ฐฉ๋ฒ•์œผ๋กœ ํ”„๋กœ์ ํŠธ์— ์„ค์น˜ํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ, ์ง์ ‘ ํŒจํ‚ค์ง€๋ฅผ ๋‹ค์šด๋กœ๋“œ ๋ฐ›๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ๊ฒ ์ง€๋งŒ ์šฐ๋ฆฌ๋Š” npm, yarn, CDN์„ ํ†ตํ•œ ์„ค์น˜ ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ณผ ๊ฒƒ์ด๋‹ค.

 

npm ์‚ฌ์šฉํ•˜๊ธฐ

$ npm install axios

yarn ์‚ฌ์šฉํ•˜๊ธฐ

yarn add axios

bower ์‚ฌ์šฉํ•˜๊ธฐ

$ bower install axios

jsDeliver CDN ์‚ฌ์šฉํ•˜๊ธฐ

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

unpkg CDN ์‚ฌ์šฉํ•˜๊ธฐ

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

 

๊ฐ๊ฐ ํ™˜๊ฒฝ์— ๋งž๋Š” ๋ฐฉ๋ฒ•์— ๋”ฐ๋ผ axios๋ฅผ ์„ค์น˜ํ•˜์ž.

 

์•„๋งˆ ๋Œ€๋ถ€๋ถ„์ด npm ์ด๋‚˜ yarn ์„ ์‚ฌ์šฉํ•  ๊ฒƒ์ด๋‹ค.

axios ์‚ฌ์šฉํ•˜๊ธฐ

 

axios์˜ Request method์—๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ฒƒ๋“ค์ด ์žˆ๋‹ค.

 

  • GET : axios.get(url[, config])
  • POST : axios.post(url, data[, config])
  • PUT : axios.put(url, data[, config])
  • DELETE : axios.delete(url[, config])

 

axios์—์„œ Request Method๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” axios์— .์„ ๋ถ™ํžˆ๋ฉฐ ์†Œ๋ฌธ์ž๋กœ Req Method๋ฅผ ๋„ฃ์–ด์ฃผ๋ฉด ๋œ๋‹ค.


๊ทธ๋ฆฌ๊ณ  ํ•ด๋‹น ๋ฉ”์„œ๋“œ์˜ ํŒŒ๋ผ๋ฏธํ„ฐ์—๋Š” API์˜ ์ฃผ์†Œ๋ฅผ ๋„ฃ๋Š”๋‹ค.

 

์ผ๋ฐ˜์ ์ธ axios

 

์ผ๋ฐ˜์ ์œผ๋กœ ์šฐ๋ฆฌ๋Š” axios์˜ 4๊ฐ€์ง€ ๊ธฐ๋ณธ ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ์ง€์ •ํ•ด์•ผํ•  ๊ฒƒ๋“ค์ด ์žˆ๋‹ค.

 

4๊ฐ€์ง€ ๊ธฐ๋ณธ Params

  1. Method
  2. Url
  3. Data (optional)
  4. Params (optional)

 

์ด 4๊ฐ€์ง€ ๋ฐฉ๋ฒ•์„ axios์— ์•Œ๋ ค์ค˜์•ผ ํ•œ๋‹ค.

 

axios({
    method: "get",
    url: "url",
    responseType: "type"
}).then(function (response) {
    // response Action
});

 

์œ„์™€ ๊ฐ™์ด ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ axios์— ๋Œ€ํ•œ ์‚ฌ์šฉ๋ฒ•์ด๋‹ค.

 

๋งŒ์•ฝ POST ๋ฉ”์„œ๋“œ์—์„œ data๋ฅผ ์ „์†กํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” url ๋ฐ‘์— data Object๋ฅผ ์ถ”๊ฐ€ํ•˜๋ฉด ๋œ๋‹ค.

 

๋‹จ์ถ•๋œ axios ๋ฉ”์„œ๋“œ

 

์•„๊นŒ ์œ„์—์„œ ๋ง ํ–ˆ๋“ฏ ๋‹จ์ถ•๋œ axios์˜ ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์œ„์˜ 4๊ฐ€์ง€ ๊ธฐ๋ณธ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ์ƒ๋žตํ•˜๊ฑฐ๋‚˜ ๊ฐ„๊ฒฐํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

 

1. axios.get()

 

get ๋ฉ”์„œ๋“œ๋ฅผ ๋‹จ์ถ•๋œ ์†์„ฑ์œผ๋กœ ์‚ฌ์šฉํ•˜๋ ค๋ฉด get ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.

 

get ๋ฉ”์„œ๋“œ์—๋Š” 2๊ฐ€์ง€ ์ƒํ™ฉ์ด ํฌ๊ฒŒ ์กด์žฌํ•œ๋‹ค.

 

  1. ๋‹จ์ˆœ ๋ฐ์ดํ„ฐ(ํŽ˜์ด์ง€ ์š”์ฒญ, ์ง€์ •๋œ ์š”์ฒญ) ์š”์ฒญ์„ ์ˆ˜ํ–‰ํ•  ๊ฒฝ์šฐ
  2. ํŒŒ๋ผ๋ฏธํ„ฐ ๋ฐ์ดํ„ฐ๋ฅผ ํฌํ•จ์‹œํ‚ค๋Š” ๊ฒฝ์šฐ (์‚ฌ์šฉ์ž ๋ฒˆํ˜ธ์— ๋”ฐ๋ฅธ ์กฐํšŒ)

 

2๊ฐ€์ง€ ์ƒํ™ฉ์— ๋”ฐ๋ผ params: {} ๊ฐ์ฒด๊ฐ€ ์กด์žฌํ• ์ง€ ์•ˆํ• ์ง€๊ฐ€ ๊ฒฐ์ •๋œ๋‹ค.

 

๋‹จ์ˆœ ๋ฐ์ดํ„ฐ๋ฅผ ์š”์ฒญํ•  ๊ฒฝ์šฐ

// callback ์„ ์‚ฌ์šฉํ•  ๋•Œ,
axios.get("url")
    .then(function (response) {
         // response  
    }).catch(function (error) {
        // ์˜ค๋ฅ˜๋ฐœ์ƒ์‹œ ์‹คํ–‰
    }).then(function() {
        // ํ•ญ์ƒ ์‹คํ–‰
    });
    
// async await ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ, 

try {
	const data = await axios.get("url");
} catch {
	// ์˜ค๋ฅ˜ ๋ฐœ์ƒ์‹œ ์‹คํ–‰
}

 

ํŒŒ๋ผ๋ฏธํ„ฐ ๋ฐ์ดํ„ฐ๋ฅผ ํฌํ•จ์‹œํ‚ค๋Š” ๊ฒฝ์šฐ

axios.get("url", {
      params: {
        id: 123
      }
    })
    .then(function (response) {
         // response  
    }).catch(function (error) {
        // ์˜ค๋ฅ˜๋ฐœ์ƒ์‹œ ์‹คํ–‰
    }).then(function() {
        // ํ•ญ์ƒ ์‹คํ–‰
    });
   
   
// async await ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ, 

try {
	const data = await axios.get("url", params: { id: 123 });
} catch {
	// ์˜ค๋ฅ˜ ๋ฐœ์ƒ์‹œ ์‹คํ–‰
}

 

2. axios.post()

 

post ๋ฉ”์„œ๋“œ์—๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ Message Body์— ํฌํ•จ์‹œ์ผœ ๋ณด๋‚ธ๋‹ค.

 

์œ„์—์„œ ๋ดค๋˜ get ๋ฉ”์„œ๋“œ์—์„œ params๋ฅผ ์‚ฌ์šฉํ•œ ๊ฒฝ์šฐ์™€ ๋น„์Šทํ•˜๊ฒŒ ์ˆ˜ํ–‰๋œ๋‹ค.

 

axios.post("url", {
        username: "",
        password: ""
    })
    .then(function (response) {
         // response  
    }).catch(function (error) {
        // ์˜ค๋ฅ˜๋ฐœ์ƒ์‹œ ์‹คํ–‰
    }).then(function() {
        // ํ•ญ์ƒ ์‹คํ–‰
    });
    
// async await ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ, 

try {
	const data = await axios.post("url");
} catch {
	// ์˜ค๋ฅ˜ ๋ฐœ์ƒ์‹œ ์‹คํ–‰
}

3. axios.put()

 

put ๋ฉ”์„œ๋“œ๋Š” ์„œ๋ฒ„ ๋‚ด๋ถ€์ ์œผ๋กœ get -> post ๊ณผ์ •์„ ๊ฑฐ์น˜๊ธฐ ๋•Œ๋ฌธ์— post ๋ฉ”์„œ๋“œ์™€ ๋น„์Šทํ•œ ํ˜•ํƒœ์ด๋‹ค.

 

axios.put("url", {
        username: "",
        password: ""
    })
    .then(function (response) {
         // response  
    }).catch(function (error) {
        // ์˜ค๋ฅ˜๋ฐœ์ƒ์‹œ ์‹คํ–‰
    }).then(function() {
        // ํ•ญ์ƒ ์‹คํ–‰
    });
    
// async await ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ, 

try {
	const data = await axios.put("url", { username: "", password: ""});
} catch {
	// ์˜ค๋ฅ˜ ๋ฐœ์ƒ์‹œ ์‹คํ–‰
}

 

4. axios.delete()

 

delete ๋ฉ”์„œ๋“œ์—๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ body๊ฐ€ ๋น„์–ด์žˆ๋‹ค.


๊ทธ๋ž˜์„œ ํ˜•ํƒœ๋Š” get๊ณผ ๋น„์Šทํ•œ ํ˜•ํƒœ๋ฅผ ๋„์ง€๋งŒ ํ•œ ๋ฒˆ delete ๋ฉ”์„œ๋“œ๊ฐ€ ์„œ๋ฒ„์— ๋“ค์–ด๊ฐ€๊ฒŒ ๋œ๋‹ค๋ฉด ์„œ๋ฒ„ ๋‚ด์—์„œ ์‚ญ์ œ process๋ฅผ ์ง„ํ–‰ํ•˜๊ฒŒ ๋œ๋‹ค.

 

์ผ๋ฐ˜์ ์ธ delete

axios.delete('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });
  
  // async await ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ, 

try {
	const data = await axios.delete("url");
} catch {
	// ์˜ค๋ฅ˜ ๋ฐœ์ƒ์‹œ ์‹คํ–‰
}

 

๋งŽ์€ ๋ฐ์ดํ„ฐ๋ฅผ ์š”์ฒญํ•  ๊ฒฝ์šฐ

 

ํ•˜์ง€๋งŒ query๋‚˜ params๊ฐ€ ๋งŽ์•„์ ธ์„œ ํ—ค๋”์— ๋งŽ์€ ์ •๋ณด๋ฅผ ๋‹ด์„ ์ˆ˜ ์—†์„ ๋•Œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋‘ ๋ฒˆ์งธ ์ธ์ž์— data๋ฅผ ์ถ”๊ฐ€ํ•ด์ค„ ์ˆ˜ ์žˆ๋‹ค.

 

axios.delete('/user?ID=12345',{
    data: {
      post_id: 1,
      comment_id: 13,
      username: "foo"
    }
  })
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

axios ์ธ์Šคํ„ด์Šค ์ƒ์„ฑํ•˜๊ธฐ


์ด๋ ‡๊ฒŒ ์šฐ๋ฆฌ๋Š” http method๋ฅผ axios๋กœ ์กฐ์ž‘ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์•˜๋‹ค.
๊ทธ๋ฆฌ๊ณ  ์ž˜ ๋™์ž‘ํ•œ๋‹ค.

 

์‹ค์ œ ๋ฆฌ์•กํŠธ ํ”„๋กœ์ ํŠธ์—์„œ axios ์‚ฌ์šฉํ•˜๊ธฐ

 

์‹ค์ œ๋กœ ํ”„๋กœ์ ํŠธ์—์„œ๋Š” API์˜ ์ŠคํŽ™, ์„œ๋ฒ„์˜ ์ฃผ์†Œ, credentials ์„ค์ •์„ ๋‹ด๋‹นํ•˜๋Š” API.js ๋ผ๋Š” ํŒŒ์ผ์„ ๋งŒ๋“ค๊ณ  axios ์˜ ๊ธฐ๋ณธ ์„ค์ •์— ๋Œ€ํ•ด์„œ ์ง€์ •ํ•ด์ฃผ๊ณ  ๊ฐ๊ฐ์˜ ์„œ๋น„์Šค์—์„œ ๊ฐ€์ ธ๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” ํ˜•ํƒœ๋กœ ๊ตฌํ˜„๋œ๋‹ค.

 

์•„๋ž˜ ๋‚˜์˜ฌ ์†Œ์Šค์ฝ”๋“œ๋Š” ํ˜„์žฌ ์šด์˜์ค‘์ธ ์„œ๋น„์Šค์˜ test.profile ์ฝ”๋“œ ์ผ๋ถ€๋ถ„์ด๋‹ค.

 

์ด๋ ‡๊ฒŒ ๋จผ์ € axios ์˜ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•ด์„œ API๋ผ๋Š” ๋ณ€์ˆ˜์— ๋‹ด๊ณ  API๋ฅผ ๋ฐ˜ํ™˜์‹œํ‚จ๋‹ค.

 

๊ทธ๋ฆฌ๊ณ  ์‹ค์ œ๋กœ ํ†ต์‹ ์„ ์œ„ํ•œ ํ•จ์ˆ˜๊ฐ€ ์กด์žฌํ•˜๋Š” ํŒŒ์ผ์—์„œ ๋‹ค์Œ๊ณผ ๊ฐ™์ด API ๋ฅผ ๋ถˆ๋Ÿฌ์™€์„œ url ๋งŒ ๋ช…์‹œํ•ด์„œ ์‚ฌ์šฉํ•˜๊ณค ํ•œ๋‹ค.

 

์ด๋ ‡๊ฒŒ ํ•œ๋‹ค๋ฉด ์žฅ์ ๊ณผ ๋‹จ์ ์ด ๊ฐ๊ฐ ์กด์žฌํ•˜๊ฒ ์ง€๋งŒ, ๋‚ด๊ฐ€ ์ƒ๊ฐํ•˜๋Š” ํฐ ์žฅ์ ์€ 2๊ฐ€์ง€ ์ด๋‹ค.

 

  1. ํ†ต์‹ ์„ ํ•˜๋Š” ๋ชจ๋“  ํŒŒ์ผ์—์„œ axios ๋ฅผ import ํ•˜์ง€ ์•Š์•„๋„ ๋œ๋‹ค.
  2. baseURL ์ด๋‚˜ header ์™€ ๊ฐ™์€ ์„ค์ •์„ ํ•˜๋‚˜์— ํŒŒ์ผ์—์„œ ํ•  ์ˆ˜ ์žˆ๋‹ค.
  3. ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ์ด ์ข‹์•„์ง„๋‹ค.

์œ„์˜ API.js ํŒŒ์ผ ํ•˜๋‚˜๋งŒ ์ด์šฉํ•ด์„œ 2๊ฐœ์˜ ์„œ๋น„์Šค ์ฝ”๋“œ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค.

 

๊ทธ๋ฆฌ๊ณ  ๊ฐ๊ฐ ํŒŒ์ผ์—์„œ๋Š” async await ์œผ๋กœ ์ฝœ๋ฐฑ์„ ์ฒ˜๋ฆฌํ•˜์—ฌ ํ†ต์‹ ํ•œ๋‹ค.

 

๋งŒ์•ฝ Error Handling ์„ ์œ„ํ•œ ์˜ˆ์™ธ ์ฒ˜๋ฆฌ๊ฐ€ ํ•„์š”ํ•œ ๋กœ์ง์ด ์กด์žฌํ•œ๋‹ค๋ฉด, ๋‹ค์Œ๊ณผ ๊ฐ™์ด try-catch ๋ฌธ์„ ์ด์šฉํ•˜๊ธฐ๋„ ํ•œ๋‹ค.

 

 


+ ์ฐธ๊ณ ๋กœ

๋งŒ์•ฝ axios ๋ฅผ ์ด์šฉํ•œ ์‹ค์ œ ์šด์˜ ํ”„๋กœ์ ํŠธ๋‚˜ ์ฝ”๋“œ๊ฐ€ ๊ถ๊ธˆํ•˜๋‹ค๋ฉด ์ด์ „์— ์ œ๊ฐ€ ์ง„ํ–‰ํ–ˆ๋˜ ํ”„๋กœ์ ํŠธ์ธ maple-cheater github ์—์„œ ํ™•์ธํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
 

GitHub - dhslrl321/Maple-Cheater: Maplestory (Nexon) ์—์„œ ์‚ฌ๊ธฐ ์บ๋ฆญํ„ฐ ๊ฒ€์ƒ‰์„ ํ†ตํ•œ ์œ ์ €๊ฐ„ ์‹ ๋ขฐ ๊ธฐ๋ฐ˜ ๊ฑฐ๋ž˜๋ฅผ

Maplestory (Nexon) ์—์„œ ์‚ฌ๊ธฐ ์บ๋ฆญํ„ฐ ๊ฒ€์ƒ‰์„ ํ†ตํ•œ ์œ ์ €๊ฐ„ ์‹ ๋ขฐ ๊ธฐ๋ฐ˜ ๊ฑฐ๋ž˜๋ฅผ ๋„์™€์ฃผ๋Š” ์ปค๋ฎค๋‹ˆํ‹ฐ ํ”„๋กœ์ ํŠธ ์ž…๋‹ˆ๋‹ค. - GitHub - dhslrl321/Maple-Cheater: Maplestory (Nexon) ์—์„œ ์‚ฌ๊ธฐ ์บ๋ฆญํ„ฐ ๊ฒ€์ƒ‰์„ ํ†ตํ•œ ์œ ์ €๊ฐ„ ์‹ ๋ขฐ

github.com

 

 

ํ•ด๋‹น ํ”„๋กœ์ ํŠธ์—์„œ๋Š” axios ๋ฅผ ํฌํ•จํ•˜์—ฌ ์•„๋ž˜์˜ ํ‚ค์›Œ๋“œ์— ๋Œ€ํ•ด์„œ๋„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

  • redux & redux-thunk
  • styled-components
  • material-ui usage
  • frontend backend ์‚ฌ์ด์˜ ํ†ต์‹ 
  • ์ธ์ฆ๊ณผ ์ธ๊ฐ€
  • next js template

๋Œ“๊ธ€