node.js - 이메일 탬플릿 만들기(템플릿 리터럴, 숏핸드 프로퍼티, 구조분해할당, export / import) 본문
node.js - 이메일 탬플릿 만들기(템플릿 리터럴, 숏핸드 프로퍼티, 구조분해할당, export / import)
자전하는명왕성 2023. 1. 10. 23:22오늘은 이메일 탬플릿 만드는 방법에 대해 강의를 들었다.
등장한 주요 개념
- 템플릿 리터럴
- 숏핸드 프로퍼티 (shorthand-property)
- 구조분해할당 (= 비구조화할당)
- export / import
이메일 탬플릿이라 함은, 아래와 같다.
겉으로 보기에는 이미지처럼 보이나, HTML 코드로 구성되어 있다고 한다.
그리고 이 HTML 코드들은 변수에 저장되어 있고,
이때 HTML코드들을 묶기 위해 백틱(템플릿 리터럴)을 사용한다.
템플릿 리터럴은 백틱(``) 과 함께 사용해야 하며, 정적값과 동적값을 함께 표현할 때 사용한다.
이때, 동적값은 ${ } 으로 묶어 표현한다.
템플릿 리터럴의 특징으로는
- 변수와 함께 쓰기가 가능하며,
- 텍스트를 여러줄로 만드는 것이 가능하다는 것 기억해두자.
활용 예시는 다음과 같다.
function makeTemplate(masking, name, email, phoneNum, likeSite) {
const myTemplate = `
<html>
<body>
<h1>${name}님 가입을 환영합니다!!</h1>
<hr />
<div>이메일 : ${email}</div>
<div>주민번호 : ${masking}</div>
<div>휴대폰번호 : ${phoneNum}</div>
<div>내가 좋아하는 사이트 : ${likeSite}</div>
</body>
</html>
`
return myTemplate
}
숏핸드 프로퍼티 (shorthand-property)
숏핸드 프로퍼티는 간단히 말해, 객체를 간단히 표현하는 방식이다.
객체는, 객체 내 키 값과 밸류 값의 이름이 같다면, 키 값만을 사용해서 정의할 수 있다.
const accessToGeo = function ({ coords }) {
const { latitude, longitude } = coords;
const positionObj = {
latitude,
longitude,
};
weatherSearch(positionObj);
};지난 시간 todo-list를 만들었을 때, 위도와 경도를 정의해줬던 방식과 같다.
좀 더 간단한 코드로 풀이하면,
const profile = {
name : name,
age : age}
// 위와 같은 코드를 아래처럼 표현할 수 있다.
const profile = {name, age}
수업 내용에서 적용한 방식으로는 아래와 같다.
이 역시도 중괄호를 적용한 모습이라는 것을 기억해두자.
const name = "철수"
const age = 10
const school = "다람쥐초등학교"
const createAt = "2020-10-10"
// 숏핸드 프로퍼티
getWelcomeTemplate({name, age, school, createAt})
구조분해할당 (= 비구조화할당)
구조분해할당은 객체와 배열 모두 적용이 가능하다.
다만, 차이점이 있다면 이름과 순서에 대해 각각 요구하는 중요도가 다르다는 것.
| 객체 | 이름(키값) 중요 | 순서 중요하지 않음 |
| 배열 | 이름 중요하지 않음 | 순서 중요 |
'객체'에서 '값'을 얻고자 할 때는 '키'값을 활용했고 '배열'에서 '값'을 얻고자 '인덱스'를 활용했던 것을 기억하면 좋을 듯하다.
강의에서는 아래와 같은 방식으로 다뤘다.
위에서 언급한 숏핸드 프로퍼티와 동일한 모양이기는 하나, 적용되는 방식이 다르다는 것을 기억하자.
function getWelcomeTemplate ({name, age, school, createAt}) {
// 중략 //
}
export / import
저번에 따로 짧게 TIL했던 내용이지만, 오늘은 강의에서 다뤄 기뻤다.
먼저, 우리는 export / import를 통해 원하는 파일을 타 파일에 가져올 수 있다.
과제에서 적용한 모습은 이렇다.
이때의 모듈은 '기준으로 삼는 척도'라는 의미에 가까우며 근간이라고 볼 수 있다.
꼭 module이 할당된 곳으로만 보낼 수 있는 것은 아니며,
결국 export 된 모든 값이 모이는 곳이라고 이해하면 좋을 것 같다.
// 터미널에서 yarn init 을 통해 접근한
// "type" : "module" 설정과 "main" : "template.js"
// package.json // 해당 파일은 yarn init으로 접근 시 자동 생성된다.
{
"name": "day02",
"version": "1.0.0",
"main": "template.js",
"license": "MIT",
"type" : "module"
}
// template.js // 받아오는 파일
import { emailCheck,socialNumMasking,makeTemplate } from "./sub.js"
// sub.js // 보내는 파일
export function emailCheck (email) { // 중략 //}
export function socialNumMasking (socialNum) { // 중략 //}
export function makeTemplate(masking, name, email, phoneNum, likeSite) { // 중략 //}
'개발 > node.js' 카테고리의 다른 글
| node.js - async-await / axios 활용 문자&메일 발송 / 환경변수 (0) | 2023.01.17 |
|---|---|
| node.js - axios / CORS / apollo-server / graphQL-API(&docs) 생성 (0) | 2023.01.14 |
| node.js - 서버 / 포트 / nodemon / API 함수 추가 /swagger (0) | 2023.01.13 |
| node.js - 데이터 통신 기초 / API방식(REST&GRAPHQL) / CRUD / (postman & swagger || playground) / express (0) | 2023.01.11 |
| node.js 입문 (JavaScript / Node.js / npm / yarn / 퍼사드패턴) (0) | 2023.01.09 |
