손쉽게 이메일을 구현할 수 있는 라이브러리를 알게 되었다
email JS란 라이브러리를 소개하고자 한다
사용법도 매우 간단하다!
1. emailJs.com 가입 (발신한 사람의 이메일에 해당 이메일이 나오게 됨)
2. service ID 기록
3. 템플릿 id 기록
3-1. 템플릿 수정( {{ }} 안에 변수를 써넣으면 나중에 입력됨 )
4. 퍼블릭키 기록
5.코드작성(기록한 2,3,4를 저렇게 넣어준다)
6. 확인
정말 신기하다..! 메일전송까지는 약 2분정도 소요되는것 같다
참고로 <head></head>사이에 해당 코드를 넣어주어야 한다
<script type="text/javascript"
</script>
전체코드도 하나 넣어놓을테니 유용하게 사용하세요!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js">
</script>
</head>
<body>
서버에서 메일보내기
<div>
email <input id="email">
name <input id="name">
content <textarea id="content"></textarea>
<input type="button" onClick="send();" value="메일보내기">
</div>
</body>
<script>
emailjs.init("");
function send(){
let email = $("#email").val();
let content = $("#content").val();
let name = $("#name").val();
let params = {
'email' : email,
'content':content,
'name':name
};
emailjs.send("", "", params)
console.log("보냄")
}
</script>
</html>728x90
반응형
'JS' 카테고리의 다른 글
| 캐시 버전명을 혁명적으로 변경해서 웹로딩 빠르게하기! (0) | 2024.09.09 |
|---|---|
| 깔끔하게 날짜를 SELECT 하는 방법! (0) | 2024.09.03 |
| table2excel 이용하여 보이는 그대로 엑셀 파일로 뽑아내기! (0) | 2024.08.31 |
| AOS를 이용하여 애니메이션 3초만에 적용시키기 (2) | 2024.08.30 |
| 서머노트 라이브러리 IMG 업로드 시 공백 제거 (3) | 2024.08.29 |