728x90 300x250 SMALL 웹개발11 템플릿 리터럴 심화! 태그드 vs 언태그드 차이점 태그드 탬플릿 이란?태그 함수를 사용하여 템플릿 리터럴을 커스터마이즈할 수 있다.백틱 앞에 함수 이름(태그 함수)을 붙여서 템플릿 리터럴을 처리한다.태그함수는 템플릿 리터럴을 입력받아 직접 조작하거나 결과를 반환한다.문법tagFunction`문자열 템플릿`; 예제function myTag(strings, ...values) { console.log(strings); // 문자열 배열 console.log(values); // 삽입된 값들 return "Processed Template";}const name = "Alice";const age = 30;const result = myTag`My name is ${name}, and I am ${age} years old.`;console.log(r.. 2025. 2. 26. 템플릿 리터럴의 기본! 언태그드 템플릿 리터럴이란? 우리가 일반적으로 사용하는 템플릿 리터럴이다.백틱(`) 안에 변수를 삽입하거나 표현식을 사용해 문자열을 작성한다.추가적인 처리가 필요 없으며 그대로 문자열로 평가됩니다.const name = "Alice";const age = 30;const message = `My name is ${name}, and I am ${age} years old.`;console.log(message);// 출력: My name is Alice, and I am 30 years old. 2025. 2. 25. 템플릿 리터럴 ${} 로 문자열 쉽게 다루자 템플릿 리터럴(Templage Literal)은 ES6에서 도입된 문자열 처리 방법으로, 기존의 문자열 연결이나 문자열 정의 방식보다 더 직관적이 강력한 기능을 제공한다. 1. 기본 문법const message = `Hello, World!`;console.log(message); // Hello, World! 템플릿 리터럴은 백틱(backtick, `)으로 문자열을 감싸서 정의한다. 2. 주요 기능(1) 표현식 삽입템플릿 리터럴은 ${}구문을 사용해 문자열에 변수나 표현식의결과를 삽입할 수 있다.const name = "Alice";const age = 30;const greeting = `My name is ${name}, and I am ${age} years old.`;console.log(gre.. 2025. 2. 24. styled-components로 컴포넌트 스타일 확장하기 styled-components에서 스타일 확장하기는 기존 컴포넌트를 기반으로 새로운 스타일을 추가하거나 덮어쓰는 기능이다. 이를 통해 중복 코드를 줄이고 컴포넌트의 재사용성을 높일 수 있다.1. 기본 스타일 확장styled-components의 styled 함수로 기존 스타일을 확장할 수 있다.기존 컴포넌트를 재사용하면서 추가 스타일을 적용하거나, 기존 스타일을 덮어쓸 수 있다. 예제: 기본 확장import styled from 'styled-components';// 기본 버튼 컴포넌트const Button = styled.button` padding: 10px 20px; background-color: gray; color: white; border: none; border-radius: .. 2025. 2. 22. 이전 1 2 3 다음 728x90 반응형 LIST