오늘 내가 배운 것 - 2023년 8월 28일

모달 창에서 동적 콘텐츠 관리하기

오늘은 웹 페이지에서 카드를 클릭하면 모달 창이 열리고 해당 카드의 세부 정보가 모달 내에 표시되는 기능을 구현해보았습니다. 이를 위해서는 JavaScript를 사용하여 동적으로 요소를 조작하고 화면에 표시해야 했습니다.

// 카드 클릭 시 모달 열기
const cardTitles = document.querySelectorAll('.card-title');
cardTitles.forEach((cardTitle) => {
  cardTitle.addEventListener('click', () => {
    const modalTitle = document.querySelector('.cardModal-title');
    const modalDescription = document.querySelector('.cardModal-description');
    const cardModal = document.getElementById('cardModal');

    // 선택된 카드의 정보를 모달에 채워넣고 모달 열기
    modalTitle.innerText = title;
    modalDescription.innerText = card.desc;
    cardModal.style.display = 'block';
  });
});

드롭다운 메뉴 유지 상태 설정하기

드롭다운 메뉴를 클릭한 후에도 마우스 커서의 움직임에 상관없이 메뉴가 열린 상태로 유지되도록 개선해보았습니다.

// 드롭다운 메뉴 클릭 이벤트 처리
let isDropdownVisible = false;
dropbtn.addEventListener('click', () => {
  isDropdownVisible = !isDropdownVisible;
  dropdown.classList.toggle('show', isDropdownVisible);
});

날짜 정보 포맷팅하기

날짜 데이터에서 필요한 년, 월, 일 정보만 추출하여 표시하는 방법을 알아보았습니다.

 const startdate = groupData.startDate;
      const enddate = groupData.endDate;
      const Startdate = startdate.split('T')[0];
      const Enddate = enddate.split('T')[0]; 
     

      groupNameElement.innerText = groupName;
      TeamRoleElement.innerText = TeamRole;
      StartDateElement.innerText = Startdate;
      EndDateElement.innerText = Enddate;

오늘의 질의 응답😎

http, https 차이점에 대해 설명해주세요.

나의 답변 😄

HTTP(Hypertext Transfer Protocol)와 HTTPS(Hypertext Transfer Protocol Secure)는 둘 다 데이터 통신을 위한 프로토콜입니다.

HTTP는 데이터를 암호화하지 않고 전송하기 때문에 보안에 취약할 수 있습니다. 반면에 HTTPS는 보안 소켓 계층(SSL) 또는 전송 계층 보안(TLS) 프로토콜을 사용하여 데이터를 암호화하고 전송합니다. 이로써 사용자의 개인 정보와 민감한 데이터가 외부의 눈에 노출되지 않도록 보호됩니다.

HTTPS는 웹사이트의 신뢰성과 안전성을 강화하며 데이터 탈취나 변조를 예방합니다. 이러한 이유로 현대 웹 개발에서는 보안을 강화하기 위해 HTTPS를 사용하는 것이 권장됩니다.