눈이 안떠져요..
새벽에 일어나 감긴 눈으로 등원 준비를 마치고 가는게 아직은 어색하다.. 아니 힘들다
생활 패턴도 아직 바뀌지 않아서 바뀌도록 노력해보자!!! 오늘도 열공!!🔥🔥🔥
📌 오늘의 내용
오늘은 이메일템플릿을 만들어주는 api를 만들어 보기로 했다 그 과정에서 안전한 코드 작성을 위해 구조분해할당이 필요한데 오늘 배운 개념들을 간략히 알고 넘어가자
템플릿 리터럴
이메일을 보낼 때 html코드를 작성해서 이쁘게 꾸밀수 없을까?
우린 언제나 늘 가능하다 바로 템플릿 리터럴을 사용해서!
우리는 이러한 형식으로 여지껏 많이 사용해왔다 그렇다면 html 코드를 템플릿 리터럴을 사용해 담아주는 간단한 함수 하나를 만들어보았다.
function getWelcomeTemplate({name , age, school, createdAt}) {
const myTemplate =
`
<html>
<body>
<h1>${name}님 가입을 환영합니다!!!</h1>
<hr/>
<div>이름 : ${name}</div>
<div>나이 : ${age}</div>
<div>학교 : ${school}</div>
<div>가입일 : ${createdAt}</div>
</body>
</html>
`
console.log(myTemplate);
}
const name = "훈이"
const age = 8
const school = "다람쥐초등학교"
const createdAt = "2020-10-10";
// shorthand-property 사용 시 이름을 찾아서 들어가게 됨
getWelcomeTemplate({name , school, createdAt});shorthand-property
key와 value가 같다면, value를 생략함 => shorthand-property
구조분해할당
구조 분해 할당이란 펼치다란 뜻으로 객체나 배열에서 사용하며
값을 해체한 후 개별 값을 변수에 새로 할당하는 과정을 말한다.
import,export
js끼리 서로 가져오고 보낼 수 있는 기능인 import, export를 사진으로 알아보자
위 사진 처럼 보내고 싶은 기능에 export 사용될 js에 import와 사용할 변수나 함수명 import할 js의 경로 를 적어주면 된다
만약 실행이 안 된다면 package.json 파일에 "type" : "module" 을 추가해 주어야 한다
Date
Date 객체란?
자바스크립트 Date객체는 1970년 1월 1일 UTC(국제표준시) 자정으로부터 지난 시간을 밀리초단위로 나타내는 정수 값을 담습니다. 이는 컴퓨터 기록물을 대부분 차지하고 있는 UNIX 타임스탬프 값과는 다릅니다.
우리는 이러한 Date객체를 사용하여 보통 회원가입 시 생성 시간을 나타낼 때 자주 사용합니다.
자주 사용하는 Date객체의 메소드에 대해 알아보자
const date = new Date() // 자바스크립트 Date객체를 date라는 변수에 할당합니다.
date.getFullYear(); // 연도를 반환합니다.
date.getMonth(); // 월을 반환합니다. 0(월)부터 시작하므로 주의하세요!
date.getDate(); // 일을 반환합니다.
date.getDay(); // 요일을 반환합니다.(일요일: 0)
date.getHours(); // 시를 반환합니다.
date.getMinutes(); // 분을 반환합니다.
date.getSeconds(); // 초를 반환합니다.
date.getMilliseconds(); // 밀리초를 반환합니다.오늘 배운 개념들과 어제 배운 퍼사드 패턴을 이용하여 이메일템플릿 생성 api 코드를 작성해보자
// index.js
import { emailCheck, getTemplate, sendTemplateToEmail } from './email.js'
function createUser({name, age, school, email}) {
// 1. 이메일이 정상인지 확인(1-존재여부, 2-"@"포함여부)
const isValid = emailCheck(email)
if (!isValid) return;
// 2. 가입환영 템플릿 만들기
const myTemplate = getTemplate({name, age, school});
// 3. 이메일에 가입환영 템플릿 전송하기
sendTemplateToEmail(email, myTemplate);
}
// 버튼 클릭
const name = '철수'
const age = 8
const school = '다람쥐초등학교'
const email = "a@a.com"
createUser({name, age, school, email})// email.js
import { getToday } from "./utils.js";
export function emailCheck(email) {
if(!email || !email.includes("@")){
console.log("에러 발생!!! 이메일을 확인해 주세요");
return false;
} else {
return true;
}
}
export function getTemplate({name, age, school}) {
const myTemplate =
`
<html>
<body>
<h1>${name}님 가입을 환영합니다!!!</h1>
<hr/>
<div>이름 : ${name}</div>
<div>나이 : ${age}</div>
<div>학교 : ${school}</div>
<div>가입일 : ${getToday()}</div>
</body>
</html>
`
return myTemplate;
}
export function sendTemplateToEmail(email, myTemplate) {
console.log(email + "이메일로 가입환영템플릿" + myTemplate + "를 전송합니다.");
}// util.js
export function getToday() {
const date = new Date();
const year = date.getFullYear();
const month = ("0" + (date.getMonth() + 1)).slice(-2);
const day = ("0" + (date.getDate() + 1)).slice(-2);
return `${year}-${month}-${day}`
}하루를 마치며 :)
구조 분해 할당을 통해 데이터가 입력이 안되더라도 함수가 망가지지 않게 안전한 코드 작성법을 배우고
어제 배운 퍼사드패턴을 적용해 코드를 나눠보니 나름 백엔드 개발자가 된 거 같은 기분이다
백엔드 개발자는 코드의 안전성을 많이 신경 써야 한다던데 앞으로 안전한 코드 작성을 하는 습관을 갖춰보자!
