day06

1.동기와 비동기방식

서버와 통신
두 개의 컴퓨터가 데이터를 요청과 응답을 통해주고 받는다.

비동기란(ASYNC)?

서버 컴퓨터가 작업이 끝날 때까지 기다리지 않는 통신

동기란(AWAIT)?

한 가지 요청을 받고 처리한 후에 다음 요청이 처리되는 것.

근데 왜 동기대신 비동기를 쓸까?

요청들이 서로 기다릴 필요가 없을 때 사용!

자바스크립트는 기본적으로 동기방식으로 작동.

외부에 요청하는 라이브러리들은 비동기 방식으로 작동(EX: AXIOS)

비동기를 동기로 바꿔주는 명령어
async/ await

// 비동기방식
function fetchPost(){
    const result =  axios.get('https://koreanjson.com/posts/1')
    console.log(result)// 비동기로 하였을 때 Promise { <pending> }
}
fetchPost(); // 실행명령


// 동기방식
async function fetchPost2(){
    const result = await axios.get('https://koreanjson.com/posts/1')
    console.log(result.data.title)// 동기방식을 사용하여 데이터를 받아올때까지 기다림!
}
fetchPost2(); //실행 명령

2. 휴대폰 인증번호 SMS전송

cloud provider

네이버 클라우드, NHN클라우드, AWS, GCP, Azure 등의 클라우드에서 클라우드를 제공 받을 수 있다.

header와 body를 api에 작성하고 서버를 킨 후 전송하면

export async function sendTokenToSMS(myphone, mytoken) {
    // .env설정
    const appKey = process.env.SMS_APP_KEY
    const XSecretKey = process.env.SMS_X_SECRET_KEY
    const sender = process.env.SMS_SENDER
    const result = await axios.post(`https://api-sms.cloud.toast.com/sms/v3.0/appKeys/${appKey}/sender/sms`,
        {
            //data
            body: `안녕하세요. 인증번호는 ${mytoken}입니다.`,
            sendNo: sender,
            recipientList:[{internationalRecipientNo: myphone}]
        },
        {//config
            headers: {
                "Content-Type": "application/json;charset=UTF-8",
                "X-Secret-Key": XSecretKey
            }
        })
    console.log(result)
    console.log("전송 끝!!!!")


    // console.log(myphone + ' 번호로 인증번호 ' + mytoken + '를 전송합니다!!');
}

인증번호와 함께 전송된다.

key관리하기

개발을 하다보면 보안이 필요한 키들이 생긴다.
이를 .env 환경변수 설정을 통해 해결하자.
dotenv라이브러리를 통해 .env 사용가능!

import dotenv from 'dotenv'
dotenv.config()


-----------------------------
//.env 대문자로 작성
//SECRETKEY=1231AFDSA2312
//SECRETNUM=1235123123

마지막으로 KEY를 업로드하면 안 되니 .gitignore설정을 해주자

.gitignore파일에 .env추가

3. 가입확인 템플릿 EMAIL전송

이메일 전송을 위한 API를 파일에 추가해준다.

app.post('/users', (req, res) => {
    const myuser = req.body.user;

    const isValid = checkValidationEmail(myuser.email)
    if (isValid) {
        const template = getWelcomeTemplate(myuser)

        sendTemplateToEmail(template, myuser.email);
        res.send("가입완료!")
    }
})

마찬가지로 .env설정을 하고 비동기 처리를 한 함수를 작성한다.

import axios from 'axios';
import { getToday } from './utills.js'


export async function sendTemplateToEmail(template, email){
    const appKey = process.env.EMAIL_APP_KEY
    const XSecretKey = process.env.EMAIL_X_SECRET_KEY
    const sender =process.env.EMAIL_SENDER
    const result = await axios.post(
        `https://api-mail.cloud.toast.com/email/v2.0/appKeys/${appKey}/sender/mail`
    ,{
        senderAddress:sender,
        title:"가입을 환영합니다!",
        body: template,
        receiverList:[
            {
                receiveMailAddr: email,
                receiveType: "MRT0"
            }
        ]
    },{
        headers: {
            "Content-Type": "application/json;charset=UTF-8",
            "X-Secret-Key": XSecretKey
        }
    })
    console.log(result)
    console.log("전송 완료!!!!")

    // console.log(`${email}이메일로 ${template}를 전송합니다.`);
}
}

이후 백엔드 서버를 키고 프론트엔드에서 요청을 보내 응답을 확인해본다.