항해 플러스 2. 치어리딩 힘내핑핑이!

이번 주차 목표는 가상 DOM을 정의하고, 이를 이용해 이벤트 관리를 최적화하고, diff 알고리즘을 통해 불필요한 렌더링을 최소화하는 것이었습니다.

🧙‍♂️ 멘토님 가라사대 "처음부터 모든 문제를 완벽히 해결할 수는 없겠지만, 리액트 같은 해결된 사례를 따라가면서 우리의 문제 해결 범위를 넓혀가는 과정을 배우고 있는 중입니다."

과제를 시작하기 전에 이 말을 들었을 때는 가벼운 마음이었는데, 과제를 마친 후 다시 보니 참 묘한 기분입니다. (그만큼 고생했기 때문ㅇ ㅔ ..)

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

과제 진행 중 가상 DOM을 직접 구현하면서 여러 어려움을 겪었습니다. 특히, DOM 요소를 업데이트하는 과정에서 제대로 작동하지 않거나, 이벤트가 예상대로 동작하지 않는 문제들이 발생했습니다.

과제를 보고, 무너져버린 저의 막막한 마음도 !! ㅜㅜ.. 문제였습니ㄷ

2. 시도

이를 해결하기 위해 팀원들과 함께 고민했습니다. 먼저, createElement로 DOM을 생성하는 방식은 이해했지만, updateElement에서 무엇이 잘못되었는지 하나씩 디버깅했습니다. 코드 흐름을 꼼꼼히 점검하고, 이벤트 버블링과 캡처링에 대해 다시 학습했으며, addEventListener의 세 번째 인자에 대해 몰랐던 부분도 새롭게 알게 되었습니다.

3. 해결

eventManager를 직접 구현하고, 이벤트 위임 방식을 적용해 문제를 해결했습니다. 이를 통해 DOM 요소에 이벤트를 개별적으로 추가하지 않고도 효율적으로 관리할 수 있었으며, 메모리 사용도 줄이면서 성능이 개선되었습니다. 팀원들과의 협업을 통해 차근차근 해결할 수 있었습니다.

4. 알게 된 것

이번 과제를 통해 가상 DOM과 실제 DOM의 차이를 더 명확하게 이해하게 되었고, diff 알고리즘을 사용해 DOM 업데이트 시 불필요한 렌더링을 최소화하는 방법을 배웠습니다. 또한, 이벤트 버블링과 캡처링의 활용이 이벤트 처리에서 중요한 개념임을 다시 한번 깨달았습니다. 이벤트 위임 부분에 대해 추가적으로 공부하여 블로그에 정리할 계획입니다 ✍️.

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

• 이번주 막판에 조심스럽게 화면공유를 시작했습니다.
  사실 안했던 이유는
  • 소극적인 코드리뷰 문화만 접해와서
  • 다른 사람들 화면 공유하는데 파워EE인 듯 부담시라왔는데 정말정ㄹㅁㄹㅁㄴㅇㄹㅁㄴ정말 좋은 선택이었음 실력이 많이 느는 것이 느껴졌습니다. 코드를 짤 때, 전보다 고민도 더 많이 하게되었습니다.(화면 키라고 멱살 잡아주신 00님 감사해요 )

• 스트레스 받지 않음 !
  • 과제 받고 코드를 짜다보면 긍정적인 오기가 생깁니다. 너무 재밌어서 혼자 미쳤다 ! 이런것도 있다고 ? 댑악인데!! 대박이다 !! (광기에 절여져서 자기전에 꼬옥 릴랙싱을 해줘야 합니다. 안 그럼 코드 생각하다가 2시간뒤에나 잠 -> 다음날 출근 개박살)
  • 시간날 때, zep에 엉겨 붙어서 으쌰으쌰 분위기에 껴서 하나라도 더 들을려고 했던 자세 (팀원들 재밌어서 8할

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

• 이게 질문을 하거나 답변을 할 때, 바로바로 말로 정리해서 질문, 대답해드리고 싶은데, 잘 안되는 것 같습니다.

• 머리로 생각해둔 것들을 말로 잘 못 옮기는 것 같습니다. (스피치 능력 키우기 ..?)

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

• 팀원들 소통하는 것들 귀기울여 들어보고, (나라면? 대답 어떻게 할지, 시뮬레이터 돌려보고) 나도 조심스레 자연스레 껴보는 것

• 8주 뒤엔, 고수 팀원들과의 대화가 수월해질 나를 기대하며 !

맘우리 ~