📒 목차

• 📌 Axios
• 📌 Axios 설치하기
• 📌 Axios 응답 제어하기
• 📌 Axios HTTP 요청 메소드 종류
• 📌 Callback
• 📌 비동기적 Callback
• 📌 Promise
• 📌 async/await
• 📌 Axios로 GET 요청 보내기 (동기, 비동기 방식)
• 📌 SMS 전송
• 📌 환경변수 분리
• 📌 EMAIL 전송

---

📌 Axios

Axios는 브라우저와 Node.js를 위한 HTTP 비동기 통신 라이브러리이다.
특징으로는 Promise api를 사용하고 async/await api를 사용한다.
또한, HTTP 요청과 응답을 JSON 형태로 자동으로 변경시켜준다.

오늘은 axios를 통해 서버에 request를 보내고 response를 받아 결과값을 처리하는 과정에 대해 학습하였다.

📌 Axios 설치하기

axios를 설치하는 방법은 여러가지가 있지만, yarn을 사용하여 설치를 진행했다.

yarn add axios

📌 Axios 응답 제어하기

✅ .then

axios 통신에서 비동기 통신이 성공했을 경우, .then()은 콜백을 인자로 받아 결과값을 처리할 수 있다.

✅ .catch

.catch를 사용하여 오류를 처리한다. error객체에서 오류에 대한 정보를 확인할 수 있다. 아래와 같이 .catch에서 받아오는 error 객체를 통해 응답상태코드와 응답헤더 정보를 확인할 수 있다.

axios.get('/hello')
		 .catch(function (error) {
				if (error.response) {
					console.log(error.response.status);
					console.log(error.response.headers);
				}
			}

📌 Axios HTTP 요청 메소드 종류

axios에는 여러 요청 메소드들이 존재한다. 서버에서 데이터를 가져올 때는 axios.get(),
서버에서 데이터를 생성할 때는 axios.post(), 데이터를 수정하는 경우에는 axios.put 그리고 특정 데이터를 삭제하는 axios.delete가 있다.

✅ axios.get(url, [config])

✅ axios.post(url, data[config])

✅ axios.put(url, data[config])

✅ axios.delete(url, [config])

📌 Callback

callback은 프로그래밍에서 매우 중요한 개념인데, 의미로는 두 가지로 나타낼 수 있다.
먼저, 다른 함수의 인자로 이용되는 함수, 그리고 이벤트에 의해 호출되어지는 함수이다.

✅ 다른 함수의 인자로 이용되는 함수

함수에는 단순히 값만 인자로 넣을 수 있는 것이 아니라, 함수 자체를 인자로 넣을 수도 있다. 예를 들어 아래와 같이 func 함수에 인자로 callback함수가 들어가 함수 안에서 함수가 실행되는 것을 확인할 수 있다.

function func (x, y, callback){
	let result = x * y
	callback(result)
}
>
function result (data) {
	console.log(data, "콜백함수 실행")
}
>
add(5, 10, result)

✅ 이벤트에 의해 호출되어지는 함수

지금까지 학습해왔던 이벤트는 onclick과 onchange가 있다.
이 두 이벤트는 HTML에서 미리 만들어 놓은 함수이며, 예를들어 버튼을 클릭하게 되면, onclick의 함수가 실행되고 그후 onclick에서 해당하는 함수가 호출된다.
즉, 호출하는 함수를 여기서 callback함수로 볼 수 있다.

이러한 callback 함수는 2가지로 다시 나눌 수 있는데, 동기적 함수와 비동기적 함수이다.
동기적 방식이란, 현재 실행하고 있는 작업이 끝난 뒤에, 다음 작업을 실행하는 것이며, 비동기적 방식이란 현재 실행중인 작업의 완료 여부와 무관하게 즉시 다른 코드로 넘어가는 것이다.

자바스크립트에서는 single-thread / non-blocking 방식의코드를 사용한다.
간단하게 말해서 js는 한번에 하나의 코드만 실행할 수 있는데, 실행의 결과를 기다리지 않고 다음 코드를 실행하는 것이다.

📌 비동기적 Callback

비동기적 callback함수를 설명하기 가장 좋은 예시는 setTimeout이다.
setTimeout은 일정 시간을 설정하고, 그 시간 이후에 작업이 시작 되는 것인데, 아래와 같이 동작을 진행하면
"이건 바로 실행"이 먼저 나타나고 "3초 기다리기"가 나타난다.
"3초 기다리기"를 먼저 실행했는데 이와 같은 결과가 나타나는 이유는 자바스크립트가 비동기적으로 코드를 실행하기 때문이다.

function Test () {
	console.log("3초 기다리기")
}
>
setTimeout(Test,3000);
console.log('이건 바로 실행')

📌 Promise

앞서 학습한 비동기적 callback을 연속하여 사용하게 되면 callback 지옥에 빠지게 된다.
callback 지옥이란 콜백함수를 전달하는 과정이 반복되어 코드의 가독성이 떨어져 코드를 유지보수하기 어려워지는 문제가 발생한다.

이와 같은 문제를 해결하기 위해 자바스크립트에는 Promise 라이브러리가 있다.
이제 promise와 axios를 이용해 GET 요청을 보내고 data를 받아 보는 실습을 해보겠다.

const url = 'https://koreanjson.com/posts/1';
>
function getData() {
  return new Promise(function (resolve, reject) {
    axios.get(url).then(function (response) {
      if (response) {
        resolve(response.data);
      }
      reject(new Error('Request is failed'));
    });
  });
}
>
let result = [];
getData()
  .then(function (data) {
    for (let v of Object.values(data)) {
      result.push(v);
    }
    console.log(result);
  })
  .catch(function (err) {
    console.error(err);
  });

위 코드에서 resolve 또는 reject함수를 호출하는 구문이 있는 경우, 둘 중 하나가 실행되기 전까지는 then이나 catch로 넘어가지 않게 된다.
따라서 비동기 작업이 완료될 때, resolve 또는 reject를 호출하는 방법으로 비동기 작업의 동기적 표현이 가능해진다.
일반적으로, resolve는 성공했을 때의 반환값이고, reject는 실패했을 때의 반환값이다.

📌 async/await

axios는 기본적으로 async와 await를 지원하는 라이브러리이다.
async와 await가 무엇인지 알아보기에 앞서 axios를 이용해 GET 요청을 보내고 data를 받아오도록 해보겠다.

async function getData(url){
  let data = (await axios.get(url)).data;
	return data;
  }
>
let url = 'https://koreanjson.com/posts/1';
>
async function dataArr(){
    let data = await getData(url);
    let result = [];
    for(let v of Object.values(data)){
        result.push(v);
    }
    console.log(result);
}
>
dataArr();

위 코드를 보게 되면 비동기 작업을 하고자하는 함수앞에 async를 표기하고, 함수 내부에서 실질적인 비동기 작업이 필요한 위치마다 await를 표기한 것을 확인할 수 있다.
즉, awat를 표기한 것만으로 뒷 내용을 promise로 자동으로 전환하고 해당 내용이 resolve된 이후에 다음으로 진행이 되는 것이다.

결과적으로, await의 유무로 동기적 함수와 비동기적함수로 구분을 할 수 있으며, 앞서 설명한 콜백지옥 문제를 promise와 async/await를 사용하여 방지할 수 있다.

📌 Axios로 GET 요청 보내기 (동기, 비동기 방식)

yarn add axios를 통해 axios를 설치한 뒤에, 이제 axios를 import하여 사용할 수 있게 되었다.

import axios from 'axios';
>
// 1. 비동기방식
function fetchAsync() {
> 
}
>
fetchAsync();
>
// 2. 동기방식
async function fetchSync() {
> 
}
>
fetchSync();

위의 코드를 보게 되면 동기와 비동기 방식의 전체적인 구조를 확인할 수 있다.

import axios from 'axios';
>
// 1. 비동기방식
function fetchAsync() {
  const result = axios.get("https://koreanjson.com/posts/1");
  console.log("비동기방식: ", result); // Promise { <pending> }
}
>
fetchAsync();
>
// 2. 동기방식
// async function fetchSync() {
//   //  =>   함수 중복 선언 문제를 피하자!!! (화살표 함수로 변경)
//   const result = await axios.get("https://koreanjson.com/posts/1");
//   console.log("동기방식: ", result.data); // 제대로된 결과 => { title: "....." }
// }
const fetchSync = async () => {
  const result = await axios.get("https://koreanjson.com/posts/1");
  console.log("동기방식: ", result); // 제대로된 결과 => { title: "....." }
  console.log("동기방식: ", result.data.title);
};
>
fetchSync();

📌 SMS 전송

• Coolsms을 사용하여 SMS를 전송하는 api를 만들고 전송까지 실습을 진행하였다.

Coolsms 홈페이지 링크
https://console.coolsms.co.kr/sdk

✅ API 작성하기

1. coolsms-node-sdk를 아래 명령어를 통해 설치한다.

$ yarn add coolsms-node-sdk

2. 번호가 전송되면 토근번호와 문자를 전송하기 위한 함수를 작성한 js에서 coolsms-node-sdk를 import 한다.

// phone.js
>
import coolsms from 'coolsms-node-sdk';
>
// ...생략

📌 환경변수 분리

.env파일 생성하고, 그 안에 중요한 키값들을 변수로 만들고 js파일에 변수명으로 가져와 사용한다.

// 예시입니다. 본인의 키값을 넣어 작성하세요.
SMS_KEY = NCSIYWB4QAC1NTSP
SMS_SECRET = IECMDSCNKBKFX4MRQD22PRVITDY3ND7K
SMS_SENDER = 01012345678

.env 파일이 함수에서 적용될 수 있도록 코드를 수정한다.

import coolsms from 'coolsms-node-sdk';
const mysms = coolsms.default;
>
export async function sendTokenToSMS(myphone, token) {
  const SMS_KEY = process.env.SMS_KEY;
  const SMS_SECRET = process.env.SMS_SECRET;
  const SMS_SENDER = process.env.SMS_SENDER;
>
  const messageService = new mysms(SMS_KEY, SMS_SECRET);
  const result = await messageService.sendOne({
    to: myphone,
    from: SMS_SENDER,
    text: `[코드캠프] 안녕하세요?! 요청하신 인증번호는 [${token}] 입니다.`,
  });
  console.log(result);
>
  // console.log(myphone + '번호로 인증번호' + token + '를 전송합니다!!!');
}

이제 .env 파일이 적용될 수 있도록 추가적인 라이브러리를 하나 설치한다.

$ yarn add dotenv

index.js 파일에서 detenv를 import해온다.

import 'dotenv/config'

📌 EMAIL 전송

이번에는 문자에 이어서 이메일을 전송해보는 api를 만들어 실습을 진행했다.

Nodemailer
https://nodemailer.com/about/

Nodemailer를 사용해 메일을 보내는 데, 이를 위해 아래 명령어를 입력해 Nodemailer를 설치한다.

$ yarn add nodemailer

email api가 만들어진 email.js 파일에서 nodemailer를 import하고 메일을 전송한다.

// email.js
>
import nodemailer from 'nodemailer';
>
// ...기존 코드
>
export async function sendTemplateToEmail(myemail, mytemplate){
		const EMAIL_USER = "youremail@gmail.com";
	  const EMAIL_PASS = "abcdefghijklmnop";
	  const EMAIL_SENDER = "youremail@gmail.com";
 >   
		const transporter = nodemailer.createTransport({
        service: "gmail",
        auth: {
            user: EMAIL_USER,
            pass: EMAIL_PASS,
        }
    })
>
    const result = await transporter.sendMail({
        from: EMAIL_SENDER,
        to: myemail,
        subject: "[코드캠프] 가입을 축하합니다!!!",
        html: mytemplate
    })
    console.log(result)
>
    // console.log(myemail + "이메일로 가입환영템플릿 " + mytemplate + "를 전송합니다.")
}

마지막으로 문자전송과 마찬가지로 환경변수 설정으로 통해 본인의 개인정보를 안전하게 처리하면 api 작성이 완료된다.

🌈 오늘 하루

그동안 api를 만들고 데이터만 주고받는 과정까지만 실습을 했지만, 오늘부터 직접 문자나 메일을 전송하는 기능을 직접 해보면서 즐겁게 공부를 한 것 같다. 내가 만든 api가 실제로 기능을 하고 눈으로 확인하니 벌써부터 여러가지 다른 api를 만들어 보고 싶다는 생각이 들었다. 하루하루 실력을 쌓아가며 언젠가는 내가 구현하고 싶은 api를 만드는 날이 왔으면 좋겠다.