자기소개 페이지 내 기능구현

자기소개 페이지를 최초에 작성했을 때는 큰 기능은 하나도 없었다. JavaScript를 활용해 구현한 기능이 있다고 하자면 innerHTML기능인데 자기소개 페이지 내 최하단 Contact부분에 이메일 링크를 클릭하면 웹페이지에 내 이메일 주소가 출력되게끔 구현한것이 하나있다.

<div id="contact" class="profile">
	<h2>CONTACT</h2>
		<div class="contact_logo">
			<a href="https://github.com/hjpark625" target="_blank" title="https://github.com/hjpark625">
            	<i class="fa-brands fa-github">GITHUB</i>
          	</a>
          	<!-- innerHTML 작성부분 -->
			<p id="email" onclick="showMessage()">
            	<i class="fa-solid fa-envelope">GMAIL</i>
			</p>
		</div>
</div>

이런식으로 HTML에는 <p>태그에 onclick속성을 활용했다. 그 뒤에 따라오는 showMessage함수는 JavaScript에서 따로 작성을 하였다.

function showMessage() {
  document.getElementById("email").innerHTML = "zero950@gmail.com";
}

document.getElementById("email").addEventListener("click", showMessage);

JavaScript에서 innerHTML을 활용하여 내 이메일이 출력되도록 함수를 작성했고 getElementById로 앞에 HTML내 email이라는 id값을 가진 <p>태그에 addEventListner를 활용해 클릭 되었을때 showMessage라는 함수를 실행되도록 설정했다.
그 후 페이지에서 이메일을 클릭했을때 내 이메일이 페이지내에 텍스트로 출력되는것을 확인 할 수 있었다.

위 이미지 처럼 클릭전에는 HTML내의 <p>의<i>태그의 내용을 보여주다가 클릭하면 함수에 내가 작성해놓은 이메일주소가 innerHTML을 통해 웹페이지에 출력되게끔 하는 기능을 기존에 구현했었다.

innerHTML말고도 innerText, textContent기능이 있는데 다른 벨로그의 이용자의 글에 의하면 innerHTML은 성능과 보안에 있어 매우 취약하다고 하다. innerHTML의 프로퍼티 값은 text/html로 파싱한 결과로 상대적으로 파싱이 느리다고 하며 대표적인 XSS(Cross-Site Sctipting)공격에 취약한 사례로 언급된다고 한다. HTML5에선 innerHTML과 함께 삽입된 <script>태그가 실행되지 않도록 지정했으나, 여전히 다른 공격 루트들은 방버하지 못해 프로젝트가 보안점검을 거치게 되는 프로젝트인 경우에는 코드가 거부 될 가능성이 높다고 한다.

다음 게시글에서는 다른 기능으로 구현한 주간/야간모드, 백투더탑 버튼에 대해 게시할 예정임

참고자료:
1. yeseolee님의 velog
2. MDN / Element.innerHTML