🌼 학습 내용
1️⃣ 템플릿 리터럴
템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다.템플릿 리터럴은 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공합니다.
const name = ‘철수’
const age = ’18’
console.log(name +”는”+ age +”살 입니다.”)
console.log(`${name}는 ${age}살 입니다.`)2️⃣ Shorthand-property
객체에서 key와 value명이 같은 경우 축약해서 사용할 수 있게 만들어주는 문법입니다.
// 객체 key 와 value가 같으면 value 생략 가능
const name = ‘철수’
const age = ’12’
const school = ‘도토리초등학교’
// const profile = {
// name : name,
// age : age,
// school : school
// }
const profile = { name, age, school }3️⃣ 구조 분해 할당( = 비구조화할당)
배열 혹은 객체에서 각각 값(value)이나 프로퍼티(property) 를 분해하여 손쉽게 별도의 변수에 담을 수 있도록 해 줍니다.
// 객체 -> 순서 x , 이름 중요!
const child = {
name : “철수”,
age : 12,
school : “도토리초등학교”
}
const name = child.name
const age = child. age
const school = child. school
-> const {name, age, school} = profile;
// 배열 -> 순서 중요!
const classmates = [“철수”,”영희”,”훈이”]
const child1 = classmates[0]
const child2 = classmates[1]
const child3 = classmates[2]
-> const {child1, child2, child3 } = classmates
4️⃣ Import & export로 파일 분리하기
각 기능별로 나누어서 작업하고 이러한 기능을 모와서 하나의 서비스를 동작 시킨다.1일차에서 배웠던 퍼사드 패턴을 적용시킨것과 동일하다.먼저, 터미널에 yarn init입력을 하고 packge.json을 생성한다.
🐶 packge.json
import & export를 모듈화라고 무른다모듈로서 싸용하기 위해 "type" : "module"을 작성해준다
{
"name": "01-08-welcome-template-api-import",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"type": "module" // 이부분 추가!
}🐶 index.js
가져올 함수 -> import { (export로 내보낸 함수) } form (export한 함수의 경로를 적는다)
import { checkEmail, getWelcomeTemplate, sendTemplateToEmail } from './email.js';
function createUser({ name, age, school, email, createdAt }) {
// 1. 이메일이 정상인지 확인(1-존재여부, 2-"@" 포함여부)
const isValid = checkEmail(email);
if (isValid === false) return;
// 2. 가입환영 템플릿 만들기
const myTemplate = getWelcomeTemplate({ name, age, school, createdAt });
// 3. 이메일에 가입환영 템플릿 전송하기
sendTemplateToEmail({ myTemplate, email });
}
const name = '철수';
const age = 8;
const school = '도토리초등학교';
const email = 'a@a.com';
const createdAt = "2023-01-10"
createUser({ name, age, school, email, createdAt });🐶 email.js
내보낼 함수 -> 함수 앞에 export 작성한다.
export function checkEmail(email) {
if (!email.includes('@') || email === undefined) {
console.log('에러 발생!! 핸드폰 번호를 올바르게 입력해 주세요!!!');
return false;
} else {
return true;
}
}
export 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>
`;
return myTemplate;
}
export function sendTemplateToEmail({ myTemplate, email }) {
console.log(`${email}이메일로 가입환영텝플릿${myTemplate}를 전송합니다.`);
}
코린이 열심히 배우자!