[항해 플러스 프론트엔드] 2주차 회고 - 모르는데 어떻게 해요

2주차 항해

소소리 바람

봄이 다가오면서 많이 포근해진 날씨에 옷차림도 가벼워지니 몸과 마음이 한결 가벼워져서 기분이 좋습니다. 다들 사는게 바쁘고 힘드시겠지만 설레임이 가득한 봄 향기 속에서 피어난 꽃처럼 행복도 활짝 피어났으면 좋겠습니다~.

발제

이미 1주차에서 많은 기가 빨렸기 때문에 2주차는 소울리스 상태로 진행해야 할 것 같다. 회사에 쌓였던 업무와 과제를 함께 하니 나의 콧구멍에선 빨간 땀이 흐르기 시작했고, 푸바오 빙의한 다크서클과 2배로 늘어난 쌍꺼풀 덕분에 주변에서 걱정을 많이 해주신다(고맙읍니다 (__ ) 실제로도 굉장히 피곤한 상태입니다).

지금 상태면 서서 잘 수도 있을 것 같다. 과연 내가 10주를 다 마무리할 수 있을까 의문이 들지만... 부딪쳐 봐야지... !

2주차 발제가 끝나고

1주차 때와 마찬가지로 기존 SPA의 기능들을 JS로 구현하는 것이다

필요한 개념

• Virtual DOM
  • Virtual Node관리
  • 실제 DOM으로 렌더링
• 이벤트 위임
  • 이벤트 버블링
  • 동적으로 생성되는 node 이벤트 관리
• Component
  • 상태 관리
  • Life Cycle..?

정도면 되지 않을까?

구현

1주차 과제와는 다르게 이미 프로젝트 구조는 짜여져 있었다.
이 부분도 스포의 위험이 있기에 자세한 내용은 항해 플러스 프론트엔드 6기에서 만나보시면 될 것 같다.

---

1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)

CI 환경에서의 이벤트 위임 시스템 에러

// 이벤트 경로 수집
while (target && target !== rootElement) {
  path.push(target);
  target = target.parentNode;
}

if (handler) {
    handler(e);
  if (e.isPropagationStopped) break;
}

• CI 환경에서 테스트 실행 시 TypeError: Cannot read properties of null 에러 발생
• 로컬에서는 정상 동작하는데 CI 환경에서만 문제 발생
• 특히 form submit 이벤트 처리 시 이벤트가 rootElement까지 전파되지 않는 현상 발견

---

2. 시도

• 문제 원인 파악을 위한 디버깅
• 로그를 추가하여 이벤트 전파 경로 추적
• jsdom 환경에서 이벤트 버블링이 예상과 다르게 동작하는 것을 발견 했음

console.log('Event type:', eventtype); 
console.log('Target:', target); 
console.log('RootElement:', rootElement); 
while (target&& target!== rootElement) { 
	console.log('Current element:', target); 
// ... 기존 코드 
}

---

3. 해결

최종 해결된 이벤트 위임 로직

// 이벤트 경로 수집
while (target && target !== rootElement) {
  path.push(target);
  target = target.parentNode;
}
path.push(rootElement);  // rootElement를 이벤트 경로에 추가

// 이벤트 핸들러 실행 부분에 try-catch 추가
if (handler) {
  try {
    handler(e);
  } catch (error) {
    console.error("Error in event handler:", error);
  }
  if (e.isPropagationStopped) break;
}

• 이벤트 경로를 먼저 수집한 후 처리하는 방식으로 변경
• try-catch를 추가하여 에러 처리 강화
• rootElement까지 확실하게 이벤트가 전파되도록 보장했음

---

4. 알게된 것

1. 테스트 환경의 차이점

• jsdom과 실제 브라우저의 이벤트 버블링 동작 방식이 다름
• CI 환경에서는 이벤트 전파가 예상과 다르게 동작할 수 있음

2. 이벤트 위임 시 고려사항

• 이벤트 경로 수집과 처리를 분리하는 것이 안정적
• 에러 처리는 필수적으로 포함되어야 할 것 같다.

3. 디버깅

• 로그를 통한 문제 추적의 중요성
• 환경별 차이를 고려한 테스트 필요성

---

Keep : 현재 만족하고 계속 유지할 부분

• try-catch를 통한 안정성 확보 (이게 최선일까?)
• rootElement까지 확실한 전파

Problem : 개선이 필요하다고 생각하는 문제점

• 테스트 환경과 실제 환경의 차이로 인한 문제 발생 가능성?을 어떻게 하면 좋을까...

Try : 문제점을 해결하기 위해 시도해야 할 것

• 실제 브라우저 환경과 유사한 테스트 환경 구축 방법을 생각해 봐야할 것 같다.