TIL
-
[항해 플러스 프론트엔드 3기] 2주차 WILTIL 2024. 10. 6. 15:03
1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)이번 주차를 지나며 겪었던 문제가 무엇이었나요? 이번 주에 겪었던 가장 큰 문제는 자식 노드를 처리할 때 발생했습니다. 기존 DOM의 자식 노드와 새로운 가상 DOM의 자식 노드를 비교하지 않고, 단순히 추가하는 방식으로 구현했더니, 불필요한 자식 노드가 남아있거나 업데이트되지 않은 노드가 그대로 남는 현상이 발생했습니다. 2. 시도문제를 해결하기 위해 어떤 시도를 하셨나요? 첫번째 시도:(vNode.children || []).forEach((child) => { domElement.appendChild(processVNode(child)); }); 기존 DOM에 있는 자식 노드를 고려하지 않고, 새로운 자식 노드만 단순히 추가했습니다. ..
-
[항해 플러스 프론트엔드 3기] 1주차 WILTIL 2024. 9. 28. 16:27
1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)이번 주차를 지나며 겪었던 문제가 무엇이었나요? 이번 주에는 바닐라 JavaScript로 SPA를 구현하면서 클라이언트 사이드 라우터를 만드는 데 고민이 많았습니다. URL 경로에 따라 각기 다른 페이지를 동적으로 로드하는 구조를 만들었지만, 라우터를 어디서 선언하고, 각 페이지에 맞게 addRoute를 어떻게 효율적으로 관리할지에 대한 방법을 고민하게 되었습니다.class Router { constructor() { this.routes = {}; window.addEventListener("popstate", this.handlePopState.bind(this)); } addRoute(path, handler) { ..