CodeHoon

PHPMailer를 통해 이메일을 송신하곤 했는데,

불편하기도 하고 읽기 불편해서 찾아보게 된 EmailJS. 

자바스크립트 기반으로 이메일을 보낼 수 있다.

parameter 를 통해 원하는 내용을 전달할 수 있어서 더 좋다. (역시 js)

Google에 검색하면 1순위로 나오는 웹사이트 (광고 아님)

이곳에서 회원가입 -> dashboard로 진행하면 된다.

회원가입 폼도 간단하다. 본인 email, 비밀번호만 설정하면 된다.

로그인시, 바로 대쉬보드로 이동하게 되는데, 

■ 필요사항

1. 서비스 생성
2. 템플릿 생성 + 템플릿-id
3. integration (과거 installation) 에서 init-code

■ 1. 서비스 생성

원하는 이메일 서비스를 선택하면 되는데, 구글(Gmail)을 선택하였다.

Service ID는 원하는 아이디로 사용하는게 좋다. 회사명, 본인 이름 등..

Connect Account를 통해 Gmail과 연동 후 Create Service

■ 2. 템플릿 생성 + 템플릿-id

이제 템플릿을 생성하도록 한다.

확인을 잘 해주시고 각각의 항목에 삽입한다. 내용을 모두 작성하였으면 Save

그리고 Template ID 도 챙겨가자.

마지막.

■ 3. integration (과거 installation) 에서 init-code

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@3/dist/email.min.js"></script>
<script type="text/javascript">
(function() {
emailjs.init("챙겨야할 init 코드");
})();
</script>

■ 실제 적용

저는 php로 데이터를 받아와 javascript로 이메일 송신하는 방식을 사용합니다.

<script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/emailjs-com@3/dist/email.min.js">
</script>
<script type="text/javascript">
    // init code 사용
    emailjs.init("3. 사용자_init_code");
    
    // parameter 설정
    const templateParams = {
        to_email: '<?=$requestedEmail?>',
        message_html: 'you have changed your password.',
        new_password: <?=$newPassword?> ,
    };
    
    // email 송신 과정
    emailjs.send('1.사용자id', '2.템플릿 id', templateParams)
        .then(function(response) {
            console.log('SUCCESS!', response.status, response.text)	 //success
        }, function(error) {
            console.log('FAILED...', error)		//fail
        });
</script>

이런식으로 사용하면 됩니다. 

파라미터에 값을 잘못넣거나 공란이 되면 에러가 개발자도구-콘솔에 출력이 되니, 확인하시면서 조율하면 됩니다.

promise.then() 으로 결과 출력 확인 가능 

■ 결과

메일이 잘 도착하였습니다.

EmailJS - DashBoard - Email History 에서도 확인하실 수 있습니다.

자바스크립트로 css 를 제어할 수 있습니다.

보고있는 화면의 크기에 따라 클래스를 추가하고, 제거할 수 있듯이 말이죠. 

대신 하나하나 클래스를 지정하거나 스타일을 지정해주어야합니다.

css 로는 @media ( width: 1000px ) { }  이런 식으로 작성합니다.

JavaScript 로는 matchMedia(`(max-width: 1000px)`) 메서드를 사용합니다.

■ 기본

<script>
	// 화면인식 992px 사이즈 조절
	const mediaViewContent = window.matchMedia(`(max-width: 992px)`)	// 1
	console.log(mediaViewContent)
    
    const viewChangeHandler = (mediaViewContent) => {  					// 3
    	//이곳에 원하는 이벤트 설정
    }
    
    mediaViewContent.addEventListener("change", viewChangeHandler)		// 2
</script>

이렇게 matchMedia( ) 메서드를 통해 화면이 변하는 것을 인지할 수 있는데, 해당 내용을 콘솔에 입력해보았습니다.

콘솔창에 출력된 내용을 확인, max-width:992px 기준으로 작성이 되어있는 것을 확인할 수 있습니다.

■ 응용

MediaQuery를 다루려면 MediaQuery 내 match라는 녀석을 활용하면 편하다.

992px 이상이 되면 false, 미만이 되면 true가 되는데, 이를 이용하도록 한다. 
[기준 이상: false, 기준 미만: true ]

<script>
	if(mediaViewContent.matches === true){
    	// 992px보다 작아질 때 
	} else {
    	// 992px 보다 커질 때 (원상복구)
	}
</script>

이런식으로 사용 하면 되는데,

각각의 내용 안에 id.style.any = '' 를 지정해주면 된다.

■ 응용 - 예시)

<script>
const mediaViewContent = window.matchMedia(`(max-width: 992px)`)

const viewChangeHandler = (mediaViewContent) => {
    const moveToQnA = document.querySelector('#moveToQnA')
    const flexControlPannel = document.querySelector('#flexControlPannel')
    const moveToStatisticsList = document.querySelector('#moveToStatisticsList')

    if(mediaViewContent.matches === true){
        console.log('shrink')
        moveToQnA.classList.remove("col-5")
        moveToQnA.classList.remove("ml-5")
        moveToQnA.classList.add("mb-5")
        moveToQnA.style.width="100%"
        flexControlPannel.classList.remove("d-flex")
        flexControlPannel.classList.remove("justify-content-between")
        flexControlPannel.style.height="100%"
        moveToStatisticsList.classList.remove("col-5")
        moveToStatisticsList.style.width="100%"

    } else {
        console.log('release')
        moveToQnA.classList.add("col-5")
        moveToQnA.classList.add("ml-5")
        moveToQnA.classList.remove("mb-5")
        moveToQnA.style.width="48%"
        flexControlPannel.classList.add("d-flex")
        flexControlPannel.classList.add("justify-content-between")
        flexControlPannel.style.height="400px"
        moveToStatisticsList.classList.add("col-5")

    }
    
}
mediaViewContent.addEventListener("change", viewChangeHandler)
</script>

이상입니다.

chart.js 를 사용할 때, canvas의 크기(width, height)를 조절하고 싶다.

아주 간단하다.

canvas를 감싸고 있는 div 태그를 하나 만들고, div 태그에 position: relative를 적용한 뒤, width, height 를 작성하면 된다.

예시)

<div style="position: relative; height:600px; width:400px;">
        <canvas id="myCanvas" >
               Your browser does not support the canvas element
        </canvas>
</div>

그러면 변한 사이즈를 확인할 수 있다.

물론 class 등을 사용하여 css 태그로 적용할 수 있는 방법이 있다.

비동기 통신(AJAX, AXIOS)를 통해 데이터를 받아오고, 해당 데이터를 2회 매개 변수로 전달해주는 과정에서 데이터가 정순 -> 역순으로 변하였다.
그리고 데이터를 배열에 삽입 해주어야한다.

그래서 해당 데이터를 다시 정순으로 돌리려고 생각하다, 굳이 그럴 필요가 없다 느끼고, 
반복문을 이용해서 루프가 돌 때마다 배열의 앞에 넣어주도록 하였다.

■ 배열의 앞에 요소를 넣는 법

unshift()

예시)

ArrayData = [ ]
for(i=0; i<responseData1.length; i++){
    ArrayData.unshift(responseData1[i].ColumName)   //배열에 json타입의 값을 앞에 집어넣기
 }
console.log(ArrayData)

■ 배열의 뒤에 요소를 넣는 법

ArrayData = [ ]
for(i=0; i<responseData2.length; i++){    
      ArrayData.push(responseData2[i].day_total)  //배열에 json타입의 값을 뒤에 집어넣기
}   
console.log(ArrayData)

Javascript로 axios를 통해서 RESTful API로 받은 데이터를 Chart.js를 이용해 웹에 출력하려고 한다.

구현하고자하는 내용은 가장 기본적은 꺽은선(line) 그래프이며, type 변경을 통해서 해당 내용을 바로 변경할 수 있다.

일단 비동기 통신(axios)을 통해 성공했을 경우를 가정,

then() 

<script>
.then(function(response) {
      labelsAndDatas(response.data)
    })

<script>
function labelsAndDatas (responseData) {
  let labels = []
  let labelValues = []
  for(i=0; i<responseData.length; i++){
      labels.push(responseData[i].day.substr(5))
      labelValues.push(responseData[i].day_total)
      }
   console.log(labels)  // 일자별 key, value
   console.log(labelValues)   // 데이터별 key, value
  
  let data = {
    labels: labels,
    datasets: [{
      yAxesID: 't',
      label: '일자별 생산량',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data : labelValues
    }]
  };

  const config = {
    type: 'line',
    data: data,
    options: {}
  };

  const myChart = new Chart(
      document.getElementById('myChart'),
      config
    );
    </script>

JavaScript 비통기 통신(Ajax, Axios 등)으로 PHP에서 송신한 json 데이터를 수신하여 콘솔에 찍어보는 작업을 하도록 하겠습니다.

1. 비동기 통신
2. PHP 송신
3. Javascript 수신 및 출력

■ 1. 비동기 통신

비동기 통신에는 여러 종류가 있지만 이 중에서 axios를 사용

Axios CDN 을 사용하였다. (편하게)

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

<script>
getData() // 함수 호출

function getData () { 
  axios.get("api주소")	
    .then(function(response) {
      console.log(response)
    })
    .catch(function(error) {
      console.log(error)
    })
}
</script>

get method로 api 주소를 호출한 모습이다.

성공시 "200" 성공과 함께 response가 출력된다. (지금 바로 하면 404에러가 뜰겁니다.)

■ 2. PHP 데이터 송신

그 다음으로 PHP에서 데이터를 출력하여 echo 해주면 된다.

<?php
// mysql connection 생략

$result = mysqli_query($con, $sql) or die('query error');

while($row = mysqli_fetch_assoc($result)){
    $data_array[] = ($row);
}

$result = json_encode($data_array);
echo $result;

- 짧은 설명 -

php와 database(DB) mysql 에서 데이터를 출력한 문구
(특별한 프레임워크를 사용하고 있지 않다.)

while문을 통해 출력한 데이터를 $data_array[] 배열에 반복문을 통하여 삽입,
json 형태 { key: value }  로 바꿔주어 출력.

[ mysql 를 조금 참고하자면, column명 : data 인 셈이다. ]
[ key : value ]

- 짧은 설명 끝 - 

■ 3. Javascript 수신 및 출력

아까 위에서 axios.get( ) 안의 내용입니다. then()의 코드

<script>
.then(function(response) {
      console.log(response)
      response = JSON.stringify(response.data)
      labelsAndDatas(response)
    })

결과값에 에러가 없다면,
해당 response를 JSON.stringify(response.data) 를 통해 문자열로 변환 중요★
labelsAndDatas( ) 함수로 데이터를 전송

<script>

function labelsAndDatas (result) {
  console.log(result)
}
</script>

labelsAndDatas 함수에서 response.data 를 result 로 받아와 콘솔창에 찍어준 모습

이제 이 함수 내에서 원하는 작업을 하면 된다. 

key: value로  보았을 때,  { '날짜' : '값', '총량' : '값'  } 을 확인할 수 있다.

다양한 오늘의 날짜를 출력하는 방법 중에서

20211122 의 포맷을 출력하는 방법

함수로 선언하기

function getTodayDate () {
            const todayDate = new Date()
            const year = todayDate.getFullYear()
            const months = todayDate.getMonth()+1
            const days = todayDate.getDate()
            const resultDate = year + '' + months + '' + days
            return resultDate
        }

// resultDate의 값이 반환됩니다.
getTodayDate()

그냥 선언하기

const todayDate = new Date()
const year = todayDate.getFullYear()
const months = todayDate.getMonth()+1
const days = todayDate.getDate()
const resultDate = year + '' + months + '' + days

//아래 결과 : 20211122
console.log(resultDate)

안녕하세요 상훈입니다.

Javascript의 Promise에 대해 알아보겠습니다.

내용은 해당 영상을 참고하였습니다.

Promise 는 async 까지 연결되어 사용하는 내용도 가능합니다.

하지만 이번에는 성공, then() 까지만 확인하도록 하겠습니다.

예시) 일반적인 함수 사용하기.

기본적으로 delay라는 함수가 있을 때, 인자로 sec와 callback을 받습니다. 

함수 내부에는 setTimeout을 이용하여 sec초 뒤에 callback을 출력하는 함수입니다. (시간을 띄울거예요!)

function delay(sec, callback) {
    setTimeout(() => {
        callback (new Date().toISOString())
    }, sec * 1000)
}

delay(1, (result) => {
    console.log(1, result)
})

그리고 delay함수를 1초 뒤에 result 함수로 출력하겠다! 선언하면, 1초 뒤에 

해당 내용이 출력됩니다.

만약 이곳에서 여러 개의 delay함수를 사용하여 쓰고싶다!  이렇다면, 흔히 말하는 콜백지옥함수가 될겁니다.

delay(1, (result) => {
    console.log(1, result)

    delay(1, (result) => {
        console.log(2, result)

        delay(1, (result) => {
            console.log(3, result)

            delay(1, (result) => {
                console.log(4, result)

                delay(1, (result) => {
                    console.log(5, result)
                })
            })
        })
    })
})

결과적으로 잘~ 작동합니다! 하지만, 만약 저 코드 양이 방대해진다면, 본인은 물론 다른 사람도 보다가 미쳐서 모니터를 주먹으로 칠 수도 있습니다.

그래서 나온것이 Promise() 입니다.

예시2) Promise() : 여러 개의 then() 사용하기

function delayP(sec) {	// 인자를 시간초만 받음
    return new Promise( ( resolve, reject ) => {    // Promise (성공, 실패) 선언
        setTimeout(() => {
            resolve (new Date().toISOString())  // resolve(성공)에 해당하는 항목
        }, sec * 1000)
    })
}

then()

delayP(1)
    .then((result)=> {  
        console.log(1, result)
        return delayP(1)    // delayP() 를 return 시켜 새로운 promise를 실행하는 것. then으로 이어 받을 수 있다.
    })
    .then((result) => { // 2번 째 then을 통해서 위의 첫번째 then이 실행된 이후에 실행. 즉, 1초 + 1초 에 실행된다.
        console.log(2, result)
    })

 Promise() .then() 을 사용하는 것의 장점은 더 말할 필요가 없이 보기가 쉽습니다. 

또한 구분지어서 코드를 작성하는데에도 문제가 없죠. 

하지만 만약 반환값(return)을 작성해주지 않는다면,

delayP(1)
    .then((result)=> {  
        console.log(1, result)
        return delayP(1)    // delayP() 를 return 시켜 새로운 promise를 실행하는 것. then으로 이어 받을 수 있다.
    })
    .then((result) => { // 2번 째 then을 통해서 위의 첫번째 then이 실행된 이후에 실행. 즉, 1초 + 1초 에 실행된다.
        console.log(2, result)
        // return이 없다. => 다음 result = undefined가 될 것이다.
        // return 'string or something' 하면 해당하는 내용이 바로 출력된다. 
            // => delay를 통해 해당 내용을 지연시키지 않았기 때문에.
    })
    .then((result) => { // 받은 return 값이 null 이기 때문에 undefined를 출력한다.
        console.log(3, result)  // 출력 내용 ( 3, undefined )
    })

2번째 then에서 return이 없습니다!

=> 3번째 delayP( null ) 이 들어갔다는 뜻입니다.

그렇기 때문에 출력되는 것은 ( 3, undefined ) 가 됩니다.

추가적으로 sec 라는 인자도 전달이 안되었기 때문에
바로 세번째 then() 이 실행되어 3, result 가 출력되었습니다.

2, 3번째 then()을 보기쉽게 해보자면, 아래와 같습니다.

    .then((result) => {
        console.log(2, result)
        console.log(3, result)  
    })

물론 2번째 then이 true라는 전제조건이 존재하지만요.

이상으로 promise 기초에 대한 포스팅을 마치겠습니다.

감사합니다.

참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise