[Travel] Join 폼 Email 입력(select option), 템플릿 리터럴

도메인 선택 시 화면

직접 입력 선택 시 화면(칸이 비워진다.)

1. 삼항 연산자 사용 전 자바스크립트

// email 입력
    function toggleCustomEmail(selectElement) {
        const customEmailDomain = document.getElementById('custom_email_domain');
        const emailDomainSelect = document.getElementById('email_domain'); // 도메인 선택 select 요소

        if (selectElement.value === 'custom') {
            customEmailDomain.style.display = 'block';  // 직접 입력 필드 보이기
            customEmailDomain.value = '';  // 직접 입력 초기화
            emailDomainSelect.style.display = 'none';  // 도메인 선택 select 숨기기
        } else {
            customEmailDomain.style.display = 'none';  // 직접 입력 필드 숨기기
        }
    }

    function getFullEmail() {
        const emailField = document.getElementById('email').value;  // 아이디 부분
        const emailDomainSelect = document.getElementById('email_domain').value;  // 도메인 선택 값
        const customEmailDomain = document.getElementById('custom_email_domain').value;  // 직접 입력 도메인

        let domain;

        // 직접 입력한 도메인이 있으면 그 도메인을 사용하고, 그렇지 않으면 선택된 도메인 사용
        if (emailDomainSelect === 'custom') {
            domain = customEmailDomain;
        } else {
            domain = emailDomainSelect;
        }
        // 이메일 필드에 완성된 이메일을 업데이트
        const fullEmail = emailField + domain;
        console.log('완성된 이메일: ' + fullEmail);

        // 최종 이메일 값을 반환
        return fullEmail;
    }

    // 폼 제출 시 이메일 값을 업데이트하고 제출하는 로직 추가
    document.getElementById('signup-form').addEventListener('submit', function(event) {
        const fullEmail = getFullEmail();  // 이메일 값 생성
        console.log('서버로 전송할 이메일: ' + fullEmail);
        document.getElementById('email').value = fullEmail;  // 폼 제출 전에 이메일 필드에 최종 값 설정
    });
    
    //

2. 삼항 연산자로 사용 후 코드

  // email 입력 처리 함수
    function toggleCustomEmail(selectElement) {
        const customEmailDomain = document.getElementById('custom_email_domain');
        const emailDomainSelect = document.getElementById('email_domain');  // 도메인 선택 select 요소
				// 여기는 삼항 연사자를 안 쓴 이유는 직접입력 필드 선택시 
				// select 옵션을 안 보이게 하기 위해서 삼항연사자를 쓰지 않았다.! 
				
        // '직접 입력'을 선택했을 때만 필드 보이기, 그 외에는 숨기기
        if (selectElement.value === 'custom') {
            customEmailDomain.style.display = 'block';  // 직접 입력 필드 보이기
            customEmailDomain.value = '';  // 직접 입력 초기화
            emailDomainSelect.style.display = 'none';  // 도메인 선택 select 숨기기
        } else {
            customEmailDomain.style.display = 'none';  // 직접 입력 필드 숨기기
        }
    }

    // 이메일 값을 생성하는 함수
    function getFullEmail() {
        const emailField = document.getElementById('email').value;  // 아이디 부분
        const emailDomainSelect = document.getElementById('email_domain').value;  // 도메인 선택 값
        const customEmailDomain = document.getElementById('custom_email_domain').value;  // 직접 입력 도메인

        // 삼항 연산자로 도메인 선택 및 빈 값 처리
        const domain = emailDomainSelect === 'custom' ? customEmailDomain : emailDomainSelect;

        // 템플릿 리터럴을 사용하여 이메일 완성
        const fullEmail = `${emailField}${domain}`;
        console.log('완성된 이메일: ' + fullEmail);

        return fullEmail;  // 최종 이메일 반환
    }

    // 폼 제출 시 이메일 값을 업데이트하고 제출하는 로직
    document.getElementById('signup-form').addEventListener('submit', function(event) {
        const fullEmail = getFullEmail();  // 이메일 값 생성
        console.log('서버로 전송할 이메일: ' + fullEmail);
        document.getElementById('email').value = fullEmail;  // 폼 제출 전에 이메일 필드에 최종 값 설정
    });

3. 템플릿 리터널

let name = 'John';
let age = 30;

let message = 'My name is ' + name + ' and I am ' + age + ' years old.';
console.log(message);

let name = 'John';
let age = 30;

let message = `My name is ${name} and I am ${age} years old.`;
console.log(message);

let multiline = 'This is the first line\nThis is the second line';

let multiline = `This is the first line
This is the second line`;