📌 FE

1. infowindow

• Google Maps API의 InfoWindow는 독립된 *오버레이 객체로, DOM 트리에 직접 포함되지 않음.
• 따라서 document.getElementById같은 querySelector로 접근할 수 없으며, infoWindow.**setContent()**를 사용해 콘텐츠를 업데이트해야 해당 요소가 반영됨.
• 이때 setContent()로 전달된 HTML 문자열은 InfoWindow가 내부적으로 파싱해 렌더링함. 따라서, InfoWindow 내부 요소와 상호작용하려면 setContent()로 갱신 후 이벤트 바인딩 필요함.

function setImage(imgElement, imageUrl, infoWindow, infoImageId, title, url, date) {
    imgElement.src = imageUrl;
    if (infoWindow) infoWindow.setContent(createInfoWindowContent(imageUrl, title, url, date, infoImageId));
}

*오버레이 객체: 지도 API위에 레이어처럼 덧씌워지는 요소

1. tippy.js

• 참가자 추가 버튼(#add-participant) 클릭 시 모달을 표시해야 하는 기능이 필요함.
• 기존에는 직접 이벤트 리스너를 추가하여 구현했으나, 유지보수성과 UX 향상을 위해 tippy.js 라이브러리를 도입함.
• 도입 이후 content, placement, trigger 등의 옵션을 활용해 다양한 UI 요소를 쉽게 구성할 수 있었고, 보다 편하게 원하는 UI 스타일 적용 가능했음.

  tippy('#add-participant', {
    content: modal,
    placement: 'bottom-end',
    arrow: false,
    theme: 'light',
    trigger: 'click',
    interactive: true,
    allowHTML: true,
  });

📌 BE

1. migration

• Django의 마이그레이션 파일은 생성 시점의 모델 상태를 인식하므로, 모델 변경 후

  기존 마이그레이션을 유지하면 과거 구조를 반영하여 오류를 유발.

• 같은 모델을 건드는 협업을 하는 경우 migration 파일에서 버전 차이 발생. 기존 마이그레이션과 db를 모두 날린 후 새로 makemigrations → migrate를 해야 함.

1. Json 데이터를 직접 파싱해서 user를 조회하는 경우