오늘은 어떻게 프로젝트에 기여했나요?
- 사진 업로드와 관련한 에러를 해결했습니다.
- 리액트의 virtual DOM 과 상관없는, DOM의 변경을 추적하는 함수를 활용해 문제를 해결해보았습니다.
- 지도 내의 마커를 직접 찍을 수 있는 마커와 검색을 통해 노출되는 마커로 동작 프로세스를 나눴습니다.
오늘의 프로젝트에서 힘든 점은 무엇인가요?
- DOM의 변경을 감지하는 메서드, observe
지도 위에 있는 순수 HTML 코드에 리액트의 상태 변화를 감지할 수 있는 이벤트 리스너를 할당해야 했습니다.
이벤트 핸들러 자체로 구현했을 때는 상태 업데이트 반영이 한 템포씩 늦어지는 문제가 발생했습니다.
그래서, 브라우저에 뜬 DOM의 상태를 직접적으로 추적하여 DOM에 변경이 생길 때마다
( 리액트에서 useEffect가 2번째 인자의 배열 안에 든 상태를 추적하는 것처럼 )
상태 변경 함수를 호출하면 어떨까 ? 하는 생각을 하게 되었습니다.
여러 시도를 통해 DOM의 변경을 감지하는 메서드와 객체를 찾을 수 있었고, 오류를 바로 잡을 수 있었습니다.
리액트의 virtual DOM 과 상반되는 개념이면서, sideEffect 를 어쩔 수 없이 만들어야하는 특수한 상황이었기에 더 조심스러웠습니다.
카카오 API의 커스텀오버레이나 윈도우인포는 리액트 환경에서는 핸들링하기 어려운 요소들인것 같습니다.
API의 특성과 제가 사용할 스택 간의 관계를 고려하지 못한 것이 아쉬운 점입니다.
다음에 특정 API를 사용해야할 일이 있다면, 충분한 사전 조사를 통해 장단점을 분석한 후 결정을 해야겠습니다.
// 추적하고 싶은 DOM HTMLElement 를 가져옵니다.
const container: any = document.getElementById(
'createPinModal-pictures-container',
);
// 추적 객체를 생성합니다.
const observer = new MutationObserver((mutations: any) => {
// DOM의 node가 변경되었을 때 일어나는 작업들입니다.
// 변경된 자식 노드들을 검사하여 제가 원하는 상태를 변경시키는 로직입니다.
const childArr = mutations[0].target.children;
const imageNamesArr: any = [];
for (const el of childArr) {
imageNamesArr.push(el.id);
}
setPinImageNames(imageNamesArr);
setMutations(mutations[0].target.children.length);
// 해당 태그의 속성/자식요소의 변화가 감지되면 useEffect 가 실행되도록 구현하였습니다.
});
// 추적 객체가 가지는 옵션입니다.
// 원하는 옵션은 자유롭게 추가하면 됩니다.
const option = {
childList: true, // 자식 노드 리스트가 변경되었을 때
attributes: true, // 본인 노드의 속성이 변경되었을 때
characterData: true, // 본인 데이터가 변경되었을 때
};
// 추적객체에 observe 메서드를 호출합니다.
observer.observe(container, option);내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
오늘은 어떻게 프로젝트에 기여했나요?
오늘의 프로젝트에서 힘든 점은 무엇인가요?
내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?