2024-11-27.md

📝 Today I Learn

🗓️ 날짜: 2024-11-27

🙏🏻 스크럼

• 학습 목표 1 : 프론트엔드 JS 코드 작성 - 게시글 상세조회 Event
• 학습 목표 2 : 커뮤니티 레이아웃 - 게시글 상세조회 CSS 추가

# Event

| 이벤트 위임

commentContainer.addEventListener('click', (event) => {
    const target = event.target;
    // 댓글 수정 
    if (target.classList.contains('edit-comment-button')) {}
    // 댓글 삭제 
    if (target.classList.contains('delete-comment-button')) {}
});

• 이벤트 위임을 활용, 부모 요소에 이벤트 리스너를 한번만 등록하고 그 이벤트가 하위 요소에서 발생할 때 이를 처리
• 댓글 수정/삭제 버튼이 동적으로 생성되기 떄문에 이벤트 위임을 사용해서 부모 요소인 해당 컨테이너에서 처리하게함

| 모달 구조의 차이

// 댓글 삭제 
if (target.classList.contains('delete-comment-button')) {
...
    // 댓글 삭제 모달 확인 버튼 클릭 시
    commentConfirmButton.addEventListener('click', () => {
        ...
        closeModal(deleteCommentModal);
    }, { once: true });
}

// 댓글 삭제 모달 취소 버튼 클릭 시
commentCancelButton.addEventListener('click', () => {
    closeModal(deleteCommentModal);
});

• 댓글은 여러개 생성될 수 있으며 댓글 삭제 버튼이 클릭될 떄 어떤 댓글을 삭제해야하는 지 알아야하기 때문에, 삭제 버튼 클릭 시 이벤트를 기준으로 해당 댓글을 처리하기 위해 댓글 삭제 모달 확인 이벤트는 댓글 삭제 이벤트 내에 위치

| 이벤트 리스너 자동 제거

commentConfirmButton.addEventListener('click', () => {
    ...
}, {once:true});

• once:true는 이벤트 리스너가 한 번 실행된 후 자동으로 제거되도록 설정하는 옵션
• 이벤트 리스너가 중복으로 등록되어 불필요하게 여러 번 실행되는 것을 방지
• 모달을 닫고 다시 열었을 때 기존 이벤트 리스너가 중복 등록될 위험이 있음을 방지 (댓글 삭제는 동적, 모달을 열 때마다 동일한 버튼에 이벤트 리스너가 추가)

# CSS

| z-index

• 요소의 쌓이는 순서 결정
• 숫자가 클수록 앞, 음수 값도 가능
• positon 속성이 relative, absolute, fixed, sticky일 때만 작동
  • auto (기본값): 부모 요소의 쌓임 순서를 따름
  • 숫자 값: 0, 10, 100 등이 많이 사용되고 보통 상대적 계층 구조 표현을 위해 사용 (비교가 중요하므로 불필요하게 큰 값은 권장 안하나, 9999 같이 값이 크면 암묵적으로 항상 맨 위로 표시 의미)

| display 타입

• inline: 줄바꿈 없이 컨텐츠만큼만 너비를 차지.
• block: 줄바꿈이 일어나고 전체 너비를 차지
• inline-block: 줄바꿈 없이 블록처럼 동작
• flex: 플렉스 컨테이너로 설정
• grid: 그리드 컨테이너로 설정
• none: 요소를 화면에서 숨김

| overflow 타입

• visible (기본값): 초과된 콘텐츠를 그대로 보여줌
• hidden: 초과된 콘텐츠를 숨김, 스크롤 불가능
• scroll: 스크롤바를 항상 표시하여 초과 콘텐츠를 스크롤 가능
• auto: 필요할 때만 스크롤바를 표시

| transform 타입

• translate(x, y): 지정한 x, y만큼 이동
  • translate(-50%, -50%)는 요소를 자신 크기를 기준으로 수평 및 수직 방향으로 각각 50% 이동, 주로 요소를 부모 기준으로 화면의 중앙에 위치시키기 위해 사용
• scale(x, y): 요소를 x, y 비율로 확대/축소
• rotate(deg): 요소를 지정된 각도(degrees)만큼 회전

✊🏻 오늘의 도전 과제와 해결 방법

• 도전 과제 1: 프론트엔드 JS 코드 작성 - 게시글 상세조회 Event
• 도전 과제 2: Event 코드 추가에 따른 html, css 코드 추가

💭 오늘의 회고

• 코드는 한번 작성한다고 해결되는 것이 아니라 후에 작성하며 다른 코드들이 추가되는 경향이 있으므로 한번에 너무 완벽한 코드를 작성해야겠다는 부담을 덜어야겠다고 생각했다.

🔗 참고 자료 및 링크

• 게시글 상세조회 (JS 코드)