오프라인 코드캠프 6일차

전은평·2023년 3월 22일
CoolsmsEMAIL 전송 APISMS전송 APIasync/awaitaxioscallbackpromisereduceslice환경변수
0

TIL

목록 보기
6/16

👨🏻‍💻 오늘의 알고리즘 공부

reduce((acc,cur)=>{~},초기값)

: 배열에만 사용가능한 반복연산 실행
: 기본적으로 매개변수를 2개까지 받음
: 첫번째 매개변수에는 함수를 반드시 넘겨주어야 하는 제약이 존재
: 두번째 매개변수는 초기값을 의미하는데 accumulator의 초기값을 의미한다. 없어도 되긴 하지만, 없으면 있을 때와 달리 반복횟수에 차이가 생기고, 배열의 첫번째 요소 값이 초기값으소 자동 설정된다.
: acc = accumulator / cur = current 값 의미
: 보통 합산할 때 많이 사용하고 마지막에 return 값을 통해 변수값으로 담긴다

function pro(arrs){
  const sum = arrs.reduce((acc,cur)=>{
    return acc + cur
  })
  return sum/arr.length
}

pro([1,2,3,4,5]) 
// sum = (1+2+3+4+5=15) / arr.length = 5
// 3 출력

slice(시작 인덱스 번호, 마지막 인덱스 번호 + 1)

: slice는 해당 문자열이나 배열을 원하는 범위만큼만 자르는 것이 가능하다.
: 사용법은 자르길 원하는 시작점 인덱스 번호에서 마지막 인덱스 번호에는 1을 더한 숫자를 작성하면 된다. 왜냐하면 두번째 매개변수로 들어가는 인덱스 번호는 해당 자리값은 제외하고 출력이 되기 때문이다.
: 두번째 매개변수 자리를 비워도 되는데 비우는 경우에는 시작하는 인덱스부터 끝까지 다 출력이 된다.

👨🏻‍💻 수업을 통해 배운 내용

Axios

: 브라우저, node.js를 위한 HTTP 비동기 통신 라이브러리
: 브라우저에 설치하는 방법은 여러가지가 있다
: 지난번에는 script에 주소를 추가해주는 CDN 방법을 이용했지만, 오늘은 직접 설치를 하고 axios를 실행했다.

yarn add axios

Axios의 응답 처리

  • .then
    : 비동기 통신이 성공했을 경우, then()괄호안 콜백함수를 인자 받아 원하는 함수 처리
  • .catch
    : 비동기 통신이 실패했을 경우 오류를 처리
    : catch에서 받아오는 error 객체를 통해 error.response.status(응답 상태코드)와 error.response.headers(응답 헤더정보)를 파악할 수 있다.
axios.get('/hello')
		 .catch(function (error) {
				if (error.response) {
					console.log(error.response.status);
					console.log(error.response.headers);
				}
			}

Axios의 HTTP 요청 메서드 종류

1. axios.get("요청 API 주소",config)
: 서버에서 데이터를 가져올 때 사용하는 매서드!
: 두 번째 파라미터 config 객체에는 헤더(header), 응답 초과시간 (timeout), 인자 값(params) 등의 요청 값을 넘기면 됨

2. axios.post("요청 API 주소",data,config)
: 서버에 데이터를 새로 생성할 때 사용하는 매서드!
: 두번째 parameter에 data에는 백엔드로 등록할 정보를 알맞는 형식(ex,객체명 맞추기)으로 보내주면 됨
: 위의 data가 백엔드 서버에서 req의 body를 구성

3. axios.put("요청 API 주소",data,config)
: 특정 데이터를 수정할 때 요청하는 매서드!
: 새로운 리소스를 생성하거나, 이미 존재하는 데이터를 대체할 때 사용되는데 post와 차이점이 있다. post는 여러 번 호출하게 되면, 새로운 데이터가 지속적으로 추가되는 반면, put은 여러 번 요청해도 결과값이 동일하다는 점이다.

4. axios.delete("요청 API 주소",config)
: 특정 데이터나 값을 삭제할 때 요청하는 매서드

Callback

콜백함수 많이 들어는 봤는데 무엇이 콜백함수일까?

콜백함수의 의미는 크게 두가지가 있다.

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

function add (x, y, callback){
	let result = x * y
	callback(result)
}

function result (data) {
	console.log(data, "콜백함수 실행")
}

add(5, 10, result)

: 여기선 add 함수의 인자로 사용된 result 함수가 callback 함수!

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

<button onClick={handleClickFunction}></button>

: onclick 이벤트가 있을 때마다 실행(호출)되는 handleClickFunction이 callback 함수!

callback함수는 다시 동기적함수와 비동기적함수로 나뉘어 지는데 동기적 방식은 현재 실행 중인 코드가 완료된 후에 다음 코드를 실행하는 반면, 비동기적 방식은 현재 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 것을 뜻한다.

자바스크립트는 single-thread / non-blocking 방식으로 코드를 실행한다. 간단하게 이야기하면 자바스크립트는 한 번에 하나의 코드만 실행할 수 있지만, 코드를 실행하고 해당 결과를 기다리지 않고 다음 코드를 실행한다는 특징을 가지고 있다는 뜻!

비동기적 callback 함수는 결과를 기다리지 않고 다음 코드를 실행하는 과정을 의미하는데 이의 가장 좋은 예시는 setTimout이다.

function Test () {
	console.log("3초 기다리기")
}

setTimeout(Test,3000);
console.log('이건 바로 실행')

위의 코드를 실행하게 되면 결과는 아래와 같다.

"이건 바로 실행"
"3초 기다리기"

분명 먼저 실행한 건 setTimeout이지만, console.log()가 먼저 출력이 되었다. 이는 자바스크립트 코드 비동기적으로 코드를 실행시키기 때문이다!

promise

비동기적으로 코드 실행되는 것을 방지하기 위해 만들어 짐!

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);
  });

new 연산자와 함께 호출한 Promise의 인자로 넘겨주는 콜백 함수는 호출할 때 바로 실행되지만 그 내부에 resolve 또는 reject함수를 호출하는 구문이 있을 경우 둘 중 하나가 실행되기 전까지는 then또는 catch로 넘어가지 않는다.

따라서 비동기 작업이 완료될 때 resolve 또는 reject를 호출하는 방법으로 비동기 작업의 동기적 표현이 가능!

resolve 는 보통 성공했을 때 반환값을 의미하고 reject 는 보통 실패했을 경우 나타냄.

async/await

promise의 then() , catch() 와 마찬가지로 비동기적 처리를 동기 방식으로 바꿔주기 위해 활용할 수 있음!

let url = 'https://koreanjson.com/posts/1';

async function getData(url){
  let data = (await axios.get(url)).data;
	return data;
  }

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를 표기하는 것만으로 뒤의 내용을 Promise로 자동 전환하고 해당 내용이 resolve된 이후에야 다음으로 진행된다.

await의 유무로 동기적 함수와 비동기적 함수로 구분할 수 있는데,

정리해보면 비동기적인 작업을 수행하기 위해 콜백함수를 익명함수로 전달하는 과정에서 생기는 콜백 지옥을 Promise, async/await등을 사용해서 방지할 수 있다.

Axios로 get요청 보내기 실습(동기 / 비동기 방식)

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();

async/await를 사용하여 동기 방식으로 함수가 작동하여 데이터가 잘 출력된다!

SMS 전송

실제로 인증문자를 만들어서 보내는 실습을 해보았는데, 우리는 coolsms를 이용해서 보냈다. 선생님께서 말씀하시길 유명한 회사에서 많이 사용하고 있는 프로그램을 사용하는 것이 Best! 라고 하셨음~

공식사이트
: https://console.coolsms.co.kr/dashboard
npmjs
: https://www.npmjs.com/package/coolsms-node-sdk

수업시간엔 위 공식사이트에서 node.js SDK 를 살펴본 후 npmjs에서 설치하고 적용했음

SDK란?
Software development kit의 약자로 개발자가 앱을 커스텀할 수 있도록 제공해주는 일종의 도구 모음(라이브러리)과 같은 개념
실제 제품을 제작하는데 도움이 되는 추가 상품이라고 여겨지며, 포함되는 내용물은 제작사마다 차이가 존재.

모듈 설치

yarn add coolsms-node-sdk

import하기

// phone.js

import coolsms from 'coolsms-node-sdk';

import한 coolsms에서 SDK를 사용할 수 있도록 데이터 가져오는 코드 추가

import coolsms from 'coolsms-node-sdk';

export async function sendTokenToSMS(myphone, token) {
  const SMS_KEY = 'NCSIYWB4QAC1NTSP' // 본인의 Coolsms API Key 입력
  const SMS_SECRET = 'IECMDSCNKBKFX4MRQD22PRVITDY3ND7K' // 본인의 Coolsms API Secret 입력
  const SMS_SENDER = '01012345678'

  const mysms = coolsms.default;
  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 + '를 전송합니다!!!');
}

자세한 건 npmjs -> coolsms 찾아보면 됨!

EMAIL 전송

: 위에서 문자를 보낸 것과 동일한 원리로 API 생성하면 됨!
: Nodemailer 라이브러리 통해 메일 보내기 자료 가져옴
: npmjs에서 사용법 조회 가능
: 고전문법을 통해서 메일 HTML 템플릿 작성하는 것이 좋음. 왜냐하면 최신기술이 반영안되는 메일이 있기 때문!

  • 설치
yarn add nodemailer
  • import
    : 해당 API를 파일에 추가하고 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 + "를 전송합니다.")
}

환경변수

환경번수 매우 매우 중요..!!
내 개인정보가 털릴 수 있기 때문에 잘 해야한다
말 그래도 git에 노출시키지 않고 나만 보고싶은 값들을 따로 저장을 해야하는데 이때 환경변수를 이용하는 것이다. 해당 폴더내 .env 파일 생성하고 숨기고 싶은 값들을 .env 파일에 담아준다. 예를 들면 이번에 문자나 이메일 보낼 때 API 키값이나 비밀번호 등을 이용했는데 이를 환경변수에 따로 보관하면 된다.

예시 ) 
EMAIL_PASS = abcdefghijklmnop
EMAIL_SENDER = youremail@gmail.com
EMAIL_USER = youremail@gmail.com
SMS_KEY = NCSIYWB4QAC1NTSP
SMS_SECRET = IECMDSCNKBKFX4MRQD22PRVITDY3ND7K
SMS_SENDER = 01012345678
  • .env 파일에 저장된 값들을 이용하는 법

  1. .gitignor 파일 만들고 안에 .env추가하여 소스코드가 공유될 수 없도록 설정

  2. 라이브러리 설치

yarn add dotenv
  1. 해당 파일에서 import
import 'dotenv/config'
  1. 해당 파일에서 변수 값 참조
    : process.env라는 명령어를 사용하면 명령어가 .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 + '를 전송합니다!!!');
}
import nodemailer from 'nodemailer';
import 'dotenv/config'

// ...기존 코드

export async function sendTemplateToEmail(email, mytemplate) {
  const EMAIL_USER = process.env.EMAIL_USER;
  const EMAIL_PASS = process.env.EMAIL_PASS;
  const EMAIL_SENDER = process.env.EMAIL_SENDER;

  const transporter = nodemailer.createTransport({
    service: "gmail",
    auth: {
      user: EMAIL_USER,
      pass: EMAIL_PASS,
    },
  });
  const result = await transporter.sendMail({
    from: EMAIL_SENDER,
    to: email,
    subject: "[코드캠프] 가입을 축하합니다!!!",
    html: mytemplate,
  });
  console.log(result);

  // console.log(email + "이메일로" + mytemplate + "를 전송합니다.")
}
profile
전은평
`아는 만큼 보인다` 라는 명언을 좋아합니다. 많이 배워서 많은 걸 볼 수 있는 개발자가 되고 싶습니다.
이전 포스트

오프라인 코드캠프 5일차 TIL

다음 포스트

오프라인 코드캠프 7일차

0개의 댓글