본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
https://fastcampus.info/4n8ztzq
250817(일) 48일차
프로세싱 - 형태의 변환 - 문자열 변환 고급 기법 - 템플릿
템플릿 리터럴 기본 기능
백틱(``)을 사용해 문자열을 작성
${} 안에 변수, 수식, 함수 호출 모두 가능
const username = '김민태';
const bold = text => `<b>${text}</b>`;
console.log(`Hi ${username}`); // Hi 김민태
console.log(`Hi ${bold(username)}`); // Hi <b>김민태</b>기본적으로 문자열 보간 + 멀티라인 지원이 주요 기능
태그드 템플릿(Tag Template) – 고급 문자열 처리
템플릿 리터럴 앞에 함수를 붙여 호출
첫 번째 인자로 문자열 조각 배열(strings) 전달
${}로 분리된 값들이 나머지 인자로 순서대로 전달
function tag(strings, ...values) {
console.log(strings); // ["Hello ", "! Your score is ", "."]
console.log(values); // ["홍길동", 90]
}
tag`Hello ${'홍길동'}! Your score is ${90}.`;
예제 – 동적으로 스타일이 변하는 div 생성기
const div = (strings, ...fns) => props =>
`<div style="font-size:20px; color:${fns[0] && fns[0](props)}; border:0">
${strings[0]}
</div>`;
const colorFn = props => props.active ? 'white' : 'gray';
const myDiv = div`폰트 설정 ${colorFn}`;
console.log(myDiv({ active: true }));
// <div style="font-size:20px; color:white; border:0">폰트 설정 </div>div\...`실행 시strings와 fns`를 받아 새 함수를 반환
반환된 함수가 props를 받아 fns[0](props) 실행 → 동적으로 스타일 결정
최종 문자열을 조립하여 리턴
포인트 & 테크닉
${} 안에는 단순 값뿐 아니라 함수 참조를 넣고, 나중에 실행할 수도 있음
단락 평가(Short-circuit evaluation) 활용:
fns[0] && fns[0](props);fns[0]이 존재할 때만 실행
태그드 템플릿은 HTML 빌더, 스타일링 유틸, 국제화(i18n) 처리 등 다양한 영역에서 활용 가능
이번 강의는 단순한 템플릿 리터럴을 넘어 문자열 처리 로직을 함수로 끌어올려 구조적으로 재사용할 수 있는 방법을 배웠다
태그드 템플릿은 코드량은 짧지만 내부 동작은 꽤 복잡하므로
strings 배열 / values 인자 구조 / 단락 평가 패턴을 확실히 이해하고 나면 강력한 맞춤형 문자열 처리기를 만들 수 있다
