JS

[자바스크립트] 백틱 및 포트폴리오 내용

easy-6 2025. 2. 17. 01:50 
// 리스트가 비어있으면 메시지를 출력
                    html += `<li><div class="no-result">\${data.message}</div></li>`;
                }else {
		        	for(item of data.list){  // data는 controller에서 보내는 응답 데이터, Map타입, list는 Map안에 담겨진 List를 의미함
		        		// 백틱 사용
						html += `
/*li > list item*/			<li onclick="chatRoomView(\${item.chat_no},'\${item.chat_users_name}');">
							<div class="chat_item">
								<div class="message_wrapper">
					           	 <div class="chat_name">
						           	<!-- 상단 고정 아이콘 -->
		                            <i class="\${item.chat_users_top === 1 ? 'fas fa-solid fa-thumbtack' : 'fas fa-regular fa-thumbtack'}" 
		                               onclick="updateChatTop(event, \${item.chat_no});" 
		                               style="margin-right: 8px; cursor: pointer; color: \${item.chat_users_top === 1 ? '#ff6347' : '#ccc'};">
		                            </i>
						           	\${item.chat_users_name}`;
			           	if(item.user_count > 2) {   	
		           		html += `   <span class="user_count">\${item.user_count}</span>`;
			           	}
			           	html += `</div>`;
			            if(item.unread_count > 0) {
			            	let unreadText = item.unread_count;

			                if (item.unread_count > 99) {
			                    unreadText = '99+';
			                }
			                else if (item.unread_count > 9) {
			                    unreadText = '9+';
			                }

			                html += `<div class="unread_count">\${unreadText}</div>`;
			            }else{
			            	html += `<div></div>`;
			            }
			            html += `</div>
			            		<div class="last_message_wrapper">
					                <div class="last_message">\${item.chat_message_content || ""}</div>
					                <div class="last_message_time">\${item.chat_message_time || ""}</div>
					            </div>
					        </div>
						</li>`;
					}
                }
	            $("#chatRoomList").html(html); // 검색 결과를 업데이트
            }
        });
    }, 1000);
}

위의 코드는 프로젝트를 진행했을 때 같이 협업하신 분이 작성한 내용이다.

다른 사람의 코드도 해석을 할 줄 알면 여러모로 좋을 것 같아서 헷갈렸던 스크립트 부분의 코드를 가져오게 되었다. 

 

 

1. 템플릿 리터럴 

○ 백틱(`) 사용  : 백틱은 기존의 "(큰 따옴표),'(작은 따옴표) 대신 사용하여 여러 줄의 문자열을 작성할 때 더 편리하다. 

 

 

○ el 태그 ( ${} )사용 

`<li onclick="chatRoomView(${item.chat_no},'${item.chat_users_name}');">`

 

위의 코드는 백틱 안에 , ${}을 사용한 내용으로  매개변수로 숫자와, 문자열을 받기 때문에 , 문자열에 해당하는 ${item.chat_users_name}에는 '(작은 따옴표)를 붙여서 문자열 표시하였다. 

 

○ 삼항연산자 사용 

 

<i class="\${item.chat_users_top === 1 ? 'fas fa-solid fa-thumbtack' : 'fas fa-regular fa-thumbtack'}" 
   onclick="updateChatTop(event, \${item.chat_no});" 
   style="margin-right: 8px; cursor: pointer; color: \${item.chat_users_top === 1 ? '#ff6347' : '#ccc'};">
</i>

위의 코드에서는 \$를 사용하여 이스케이프 처리를 하였다. 즉 템플릿 리터럴의 변수 삽입 기능을 비활성하고 문자 그대로 ${}를 출력하였다. 

그리하여 위의 코드를 요약하자면

조건에 해당하는 클래스 명을 가지게 되고, 클릭했을 때, updateChatTop 함수에 매개변수가 들어가며, 스타일을 주었다고 볼 수 있다. 

 

○ 조건부 HTML 구조 

let html ='';

위의 코드로 인해 html은 문자열을 작성한다는 것을 알 수 있다. 

 

// if 조건에 따른 HTML 추가
if(item.user_count > 2) {   	
    html += `<span class="user_count">${item.user_count}</span>`;
}

위의 조건에 따른 HTML을 추가하는 것을 보고 , 조건을 만족할 대, 유저의 수를 나타내는 것을 볼 수 있다. 

 

if(item.unread_count > 0) {
			            	let unreadText = item.unread_count;

			                if (item.unread_count > 99) {
			                    unreadText = '99+';
			                }
			                else if (item.unread_count > 9) {
			                    unreadText = '9+';
			                }

			                html += `<div class="unread_count">\${unreadText}</div>`;
			            }else{
			            	html += `<div></div>`;
			            }

위의 코드를 통해서 , 읽지 않은 숫자가 0을 넘길 경우에 , 9개 초과, 99개 초과 두 가지로 나누어지는 것을 볼 수 있으며 조건에 따라 값이 정해지는 것을 볼 수 있다. 

 

 html += `</div>
            <div class="last_message_wrapper">
                <div class="last_message">\${item.chat_message_content || ""}</div> 
                <div class="last_message_time">\${item.chat_message_time || ""}</div>
            </div>
        </div>

해당 코드는 메시지와 메시지 시간이 없을 경우 null과 undefined가 발생하는 경우를 막을 수 있으며, 내용이 없다면 div요소는 존재하지만 내용물이 없는 상대라고 볼 수 있다. 

큰 틀로 조건이 있을 경우와 없을 경우로 나누어서 예시를 작성할 수 있다. 

 

1) 기존 코드에 아래의 조건이 없을 경우 

\${item.chat_message_content || ""}
\${item.chat_message_time || ""}

 

○ 나올 수 있는 결과값

○ 문자열과 시간을 입력했을 경우 

○ 문자열과 시간을 입력하지 않았을 경우 

 

○ 나올 수 있는 결과값

let message = {
    chat_message_content: null,    // -> null
    chat_message_content: undefined, // -> undefined
    chat_message_content: "",      // -> ""
    chat_message_content: "안녕하세요" // -> "안녕하세요"  // 안녕하세요 문자열 입력한 경우 
}

let message_time ={
	chat_message_time:  null,    // -> null
    chat_message_time:  undefined,    // -> undefined
    chat_message_time:  "",    // -> ""
    chat_message_time:  "2:30" // -> "2:30"  // 2:30 문자열 입력한 경우 
    
}

○ 문자열과 시간을 입력했을 경우 

item = {
    chat_message_content: "안녕하세요",
    chat_message_time: "오후 2:30"
}

○ 문자열과 시간을 입력하지 않았을 경우 

let message = {
    chat_message_content: null,    // -> ""
    chat_message_content: undefined, // -> ""
}

let message_time ={
	chat_message_time:  null,    // -> null
    chat_message_time:  undefined,    // -> undefined
}

 

 

 

2) 기존 코드에 아래의 조건이 있을 경우 

\${item.chat_message_content || ""}
\${item.chat_message_time || ""}

○ 나올 수 있는 결과값

let message = {
    chat_message_content: null,    // -> ""
    chat_message_content: undefined, // -> ""
    chat_message_content: "",      // -> ""
    chat_message_content: "안녕하세요" // -> "안녕하세요"  // 안녕하세요 문자열 입력한 경우 
}

let message_time ={
	chat_message_time:  null,    // -> "",
    chat_message_time:  undefined,    // -> "",
    chat_message_time:  "",    // -> ""
    chat_message_time:  "2:30" // -> "2:30"  // 2:30 문자열 입력한 경우 
    
}

 

○ 문자열과 시간을 입력했을 경우 

let message = {
    chat_message_content: "",      // -> ""
    chat_message_content: "안녕하세요" // -> "안녕하세요"
}

○ 문자열과 시간을 입력하지 않았을 경우 

let message = {
    chat_message_content: null,    // -> ""
    chat_message_content: undefined, // -> ""
}

let message_time ={
	chat_message_time:  null,    // -> ""
    chat_message_time:  undefined,    // -> ""
}

 

따라서 조건은 2가지의 결과를 만들게 되며, chat_message_time과 chat_massage_content가  "" (빈문자열)로 존재한다면

내용은 없고, div는 존재한다고 보면 된다. 

'JS' 카테고리의 다른 글

[JS, HTML] form 전송과 , RESTful 방식의 차이  (0) 2025.03.23
[JS] JSX, 엘리먼트  (0) 2025.03.15

'JS'의 다른글

  • 현재글[자바스크립트] 백틱 및 포트폴리오 내용

관련글

티스토리툴바