오늘 만들어본 API는 가입축하 템플릿
템플릿리터럴을 사용해서 만들어봤다,
function getWelcomeTemplete(){ //메일로 오는 화면 예시
const name = '철수'
const age = 8
const school = '다람쥐초등학교'
const createdAt = '2022-01-10'
return `
<html>
<body>
<h1>${name}님 가입을 환영합니다 !</h1>
<div>이름 : ${name}</div>
<div>나이 : ${age}</div>
<div>학교 : ${school}</div>
<div>가입일 : ${createdAt}/div>
</body>
</html>
` //백틱 예시 여러줄 작성 가능함
}라는 템플릿을 만든다면,
함수를 user인자로 받아야 하기 때문에 user.value 형태로 바꿔준다.
function getWelcomeTemplete(user){ //메일로 오는 화면 예시
const createdAt = '2022-01-10'//날짜부분은 백엔드에서 !!!
return `
<html>
<body>
<h1>${user.name}님 가입을 환영합니다 !</h2>
<hr/>
<div>이름 : ${user.name}</div>
<div>나이 : ${user.age}</div>
<div>학교 : ${user.school}</div>
<div>가입일 : ${createdAt}/div>
</body>
</html>
`
}
const myuser ={
name = '철수',
age = 8,
school = '다람쥐초등학교'
}그리고 여기에서 많은 내용을 다루기 힘들기 때문에 구조분해할당을 사용한다.
인자 부분을 보면, 중괄호 안에 name, age, school을 받기 때문에, 순서대로 받을때와는 다르게 각각의 key에 맞게 인자를 받아들일 수 있다.
그리고 user인자의 ~ 의미가 사라졌기 때문에 백틱 안에도 다시 인자 그대로 받아준다.
function getWelcomeTemplete({name, age, school}){ //한번에(객체 전체를) 받는데 나눠서(각각) 받는것 ~> 더 안전하고 효율적임
const createdAt = '2022-01-10'//날짜부분은 백엔드에서 !!!
return `
<html>
<body>
<h1>${name}님 가입을 환영합니다 !</h2>
<hr/>
<div>이름 : ${name}</div>
<div>나이 : ${age}</div>
<div>학교 : ${school}</div>
<div>가입일 : ${createdAt}/div>
</body>
</html>
`
}여기에서 백엔드에서 다룬다는 날짜부분을 봤을 때,
(프론트에서 날짜/시간은 제각각일 수 있기 때문에)
function getCreatedAt(){
const aaa = new Date()
const yyyy = aaa.getFullYear()
const mm = aaa.getMonth()+1
const dd = aaa.getDate()
return `${yyyy}-${mm}-${dd}`
}로 만들어서 utils.js 라는 이름으로 따로 저장한다면 어디에서든 사용할 수 있다.
함수 안의 createdAt은 getCreatedAt()함수를 호출하는것으로 바꿔준다.
이렇게 만들어진 내용을 파사드 패턴을 적용해서 나눠준다.
(파사드 패턴에 익숙해져야 함!!!!)
우선 조건을 따져봤을 때,
function createUser(){
1. email이 정상인지 확인(이메일 존재여부, @여부)
2. 가입환영 템플릿 만들기 ~!!
3. 이메일에 가입환영 템플릿 전송하기(지금은 아직 콘솔로 인출만)
}
로 가정을 하고 만들어야 한다.
어제 했던 형식과 비슷하다고 하는데,, 일단 눈도 머리도 돌아버릴뻔 했다.
이걸 이렇게 마음대로 바꿔도 되는건지,, 너무 따라하다가 이상한 길로 가는건 아닌지,,, 힘들었다....
일단 나눠서 만들으려 하지말고 함수안에 차근차근 만들어 보자.
function createUser(){
function checkEmail(email){//1. email이 정상인지 확인(이메일 존재여부, @여부)
if(email!==undefined && email.includes('@'){
console.log("이메일 형식이 잘못되었습니다.")
return false
}else
return true
}
function getWelcomeTemplete({name, age, school}){//2. 가입환영 템플릿 만들기
const createdAt = getCreatedAt()
return `
<html>
<body>
<h1>${name}님 가입을 환영합니다 !</h2>
<hr/>
<div>이름 : ${name}</div>
<div>나이 : ${age}</div>
<div>학교 : ${school}</div>
<div>가입일 : ${createdAt}/div>
</body>
</html>
`
}
function sendToEmail(aaa,bbb){//3. 이메일에 가입환영 템플릿 전송하기
console.log(aaa+"에게"+bbb+"를 전송하였습니다")
}
}로 해볼 수 있는데...이제 이걸 또 함수끼리 묶고 실행하는 하나의 함수만 남겨둔다.
빼는 함수들을 모두 export해주고
import {getCreatedAt} from './utils.js';
export function checkValidationEmail(email){
if(email === undefined || !email.includes('@')){
console.log("이메일 형식을 확인해주세요")
return false
}else {
return true
}
}
export function getWelcomeTemplete({name, age, school}){
const createdAt = getCreatedAt()
return `
<html>
<body>
<h1>${name}님 가입을 환영합니다 !</h2>
<hr/>
<div>이름 : ${name}</div>
<div>나이 : ${age}</div>
<div>학교 : ${school}</div>
<div>가입일 : ${createdAt}/div>
</body>
</html>
`
}
export function sendTempleteToEmail(email, mytemplete){
console.log(email+'로' + mytemplete+'을 전송합니다.')
}export function getCreatedAt(){
const aaa = new Date()
const yyyy = aaa.getFullYear()
const mm = aaa.getMonth()+1
const dd = aaa.getDate()
return `${yyyy}-${mm}-${dd}`
}진짜 모르겠던,,, 두목함수,,,api
import {checkValidationEmail, getWelcomeTemplete, sendTempleteToEmail} from './email.js';
function createUser(){
const isValid = checkEmail(email)
if(isValid){
getWelcomeTemplete({name, age, school})
sendTempleteToEmail(email, mytemplete)
} 까지는 어제 했던 부분 이어서 영차영차 했는데,, 인자 넣는것과 이게 맞는 플로우인건지(제대로 맞게 쓴건지)를 모르겠어서 돌아버릴뻔 했다....
함수 두개 연달아서 호출하고 싶었다 안될걸 뻔히 알겠는데,,
function createUser(user){
const isValid = checkValidationEmail(user.email)
if(isValid){
const mytemplete = getWelcomeTemplete(user)
sendTempleteToEmail(user.email, mytemplete)
}
}
const myuser ={
name : '철수',
age : 8,
school : '다람쥐초등학교',
email : "abc@a.com"
}
createUser(myuser)라는 API가 만들어지게 된다.
사실 복습겸 쓰고있지만서도 다시 해보라하면 못할거같은 어지러움이다
이해한대로 써보자면 myuser라는 {k,v}를 받아서 함수의 user로 들어가고, 만약 그때 받은 user.email이 함수안에서 true를 낸다면 if문으로 넘어간다. 템플릿에서 user의 정보를 받아 mytemplete를 만들고, user의 이메일에 mytemplete를 인자로 받아 이메일전송 함수가 실행되게 되는 API가 만들어진것이다.?
api,,,꼭 해내고싶다 ~!
