Javascript/Node.js

이메일 템플릿 함수 및 생성시간 함수 만들기

nickmorohe 2022. 11. 6. 16:18

Node.js로 이메일 템플릿 생성하기

1. Template Literal

 

(1) Template Literal은 ES6에서 새로 도입된 문자열 표기법

(2) + 연산자를 사용하지 않고 새로운 문자열을 삽입 가능

(3)  Template Literal을 사용하면 작은 따옴표('')혹은 큰 따옴표("") 대신에 백 틱(``)을 사용해, 하나 하나 감싸주지 않아도 문자열을 삽입 가능

(4) 백 틱(``)안에 표현식을 삽입하기 윟새ㅓ는 ${}으로 변수를 감싸주어야 함

const apple = 3;
const banana = 2;

console.log("철수는 사과를 " + apple + "개, " + "바나나를 " + banana + "개 가지고 있습니다.");
console.log(`철수는 사과를 ${apple}개, 바나나를 ${banana}개 가지고 있습니다.`);  // 템플릿 리터럴

 

2. 이메일 템플릿 생성 함수

(1) 매개변수(Parameter)를 사용한 함수 만들기

const myName = '철수';
const myAge = 13;
const mySchool = '다람쥐초등학교';
const myCreatedAt = '2010-09-07';

function getWelcomeTemplate(name, age, school, createdAt) {
  return `
      <html>
          <body>
              <h1>${name}님 가입을 환영합니다.</h1>
              <hr />
              <div>이름: ${name}</div>
              <div>나이: ${age}살</div>
              <div>학교: ${school}</div>
              <div>가입일: ${createdAt}</div>
          </body>
      </html>
  `;
}

const result = getWelcomeTemplate(myName, myAge, mySchool, myCreatedAt);
console.log(result);

 

 

 

(2) 객체(Object)를 사용한 함수 만들기

const myUser = {
  name: '철수',
  age: 13,
  school: '다람쥐초등학교',
  createdAt: '2010-09-07',
};

console.log(myUser.name); // 철수

function getWelcomeTemplate(user) {
  return `
      <html>
          <body>
              <h1>${user.name}님 가입을 환영합니다.</h1>
              <hr />
              <div>이름: ${user.name}</div>
              <div>나이: ${user.age}살</div>
              <div>학교: ${user.school}</div>
              <div>가입일: ${user.createdAt}</div>
          </body>
      </html>
  `;
}

console.log(getWelcomeTemplate(myUser));

 

3. 구조분해할당(Destructuring)을 이용한 이메일 함수 만들기

(1) 구조분해할당

    1) 객체의 구조분해할당

const user = {
    name: '철수',
    age: 13,
    school: '다람쥐초등학교',
    createdAt: '2010-09-07',
}

const name = user.name
const age = user.age
const school = user.school
const createdAt = user.createdAt

// 구조분해할당
const {name, age, school, createdAt} = user

    2) 배열의 구조분해할당

const classmates = ['철수', '영희', '훈이'];

const child1 = classmates[0];
const child2 = classmates[1];
const child3 = classmates[2];

// 구조분해할당을 이용해
// child1엔 arr[0]
// child2엔 arr[1]
// child3엔 arr[2]을 할당하였습니다.
const [child1, , child2, child3] = classmates;

    3) 객체와 배열의 구조분해 할당 시 주의해야 할 점

      a. 객체를 구조분해할당 하게 될 경우: 객체 안의 key값을 가져와 할당

      객체 안의 존재하는 key값의 이름으로 재할당을 해야하고 순서는 상관없이 할당

      

      b. 배열은 구조분해할당 시, 배열의 순서가 매우 중요

 

(2) 구조분해할당으로 회원가입 환영  템플릿 만들기

function getWelcomeTemplate({name, age, school, createdAt}){
    return `
        <html>
            <body>
                <h1>${name}님 가입을 환영합니다.</h1>
                <hr />
                <div>이름: ${name}</div>
                <div>나이: ${age}살</div>
                <div>학교: ${school}</div>
                <div>가입일: ${createdAt}</div>
            </body>
        </html>
    `
}

const myUser = {
    name: '철수',
    age: 13,
    school: '다람쥐초등학교',
    createdAt: '2010-09-07',
}

console.log(getWelcomeTemplate(myUser));

 

4. Shorthand property names 

key와 value가 동일한 이름을 가지고 있을때, value를 생략 가능

const name = '철수'
const age = 13
const school = '다람쥐초등학교'
const createdAt = '2010-09-07'

// const myUser = {
//   name,
//   age,
//   school,
//   createdAt,
// };

console.log(getWelcomeTemplate({ name, age, school, createdAt }))

 

 

Date 객체를 활용하여 생성 시간 함수 만들기

1.  Date 객체

(1)  Date 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값을 담습니다.

 

(2) 자주 사용되는 Date 객체의 method

const date = new Date()     // 자바스크립트 Date객체를 date라는 변수에 할당합니다.

date.getFullYear();         // 연도를 반환합니다.
date.getMonth();            // 월을 반환합니다. 0(월)부터 시작하므로 주의하세요!
date.getDate();             // 일을 반환합니다.
date.getDay();              // 요일을 반환합니다.(일요일: 0)
date.getHours();            // 시를 반환합니다.
date.getMinutes();          // 분을 반환합니다.
date.getSeconds();          // 초를 반환합니다.
date.getMilliseconds();     // 밀리초를 반환합니다.

 

2.  생성 시간 함수 만들기

function getToday() {
    const date = new Date()
    const yyyy = date.getFullYear()
    const mm = date.getMonth() + 1
    const dd = date.getDate()

    return `${yyyy}-${mm}-${dd}`
}

console.log(getToday())

 

 

Node js로 회원가입 환영 이메일 함수 만들기

1. 퍼사드 패턴으로 함수 만들기

 

(1) email 관련 함수들을 email.js로 관리 

// 이메일의 유효성을 검증하는 함수
export function checkValidationEmail(email) {
  if (email === undefined || !email.includes('@')) {
    console.log('정확한 이메일 주소를 입력해주세요.');
    return false;
  }
  return true;
}

// getWelcomeTemplate 함수
export function getWelcomeTemplate({name, age, school}){
    return `
        <html>
            <body>
                <h1>${name}님 가입을 환영합니다.</h1>
                <hr />
                <div>이름: ${name}</div>
                <div>나이: ${age}살</div>
                <div>학교: ${school}</div>
                <div>가입일: ${getToday()}</div>
            </body>
        </html>
    `
}
// 최종적으로 이메일로 전달되었다는 sendWelcomeTemplateToEmail 함수
export function sendWelcomeTemplateToEmail(email, template){
    // 템플릿을 이메일에 전송
    console.log(`${email}로 템플릿 ${template}를 전송합니다.`)
}

 

(2) index.js 에서 회원가입 함수 생성 후 email.js의 함수들을 import로 불러와서 사용

import { checkValidationEmail, getWelcomeTemplate, sendWelcomeTemplateToEmail } from './email.js';

function createUser(user) {
  const isValid = checkValidationEmail(user.email);
  if (isValid) {
    const template = getWelcomeTemplate(user);

    sendWelcomeTemplateToEmail(user.email, template);
  }
}

const user = {
  name: '철수',
  age: 13,
  school: '다람쥐초등학교',
  email: 'aaa@aaa.com',
};

createUser(user);

(3) 결과

저작자표시 비영리 동일조건