Chole.log Chole.log

1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)이번 주차를 지나며 겪었던 문제가 무엇이었나요? 이번 주에 겪었던 가장 큰 문제는 자식 노드를 처리할 때 발생했습니다. 기존 DOM의 자식 노드와 새로운 가상 DOM의 자식 노드를 비교하지 않고, 단순히 추가하는 방식으로 구현했더니, 불필요한 자식 노드가 남아있거나 업데이트되지 않은 노드가 그대로 남는 현상이 발생했습니다. 2. 시도문제를 해결하기 위해 어떤 시도를 하셨나요? 첫번째 시도:(vNode.children || []).forEach((child) => { domElement.appendChild(processVNode(child)); }); 기존 DOM에 있는 자식 노드를 고려하지 않고, 새로운 자식 노드만 단순히 추가했습니다. ..

1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)이번 주차를 지나며 겪었던 문제가 무엇이었나요? 이번 주에는 바닐라 JavaScript로 SPA를 구현하면서 클라이언트 사이드 라우터를 만드는 데 고민이 많았습니다. URL 경로에 따라 각기 다른 페이지를 동적으로 로드하는 구조를 만들었지만, 라우터를 어디서 선언하고, 각 페이지에 맞게 addRoute를 어떻게 효율적으로 관리할지에 대한 방법을 고민하게 되었습니다.class Router { constructor() { this.routes = {}; window.addEventListener("popstate", this.handlePopState.bind(this)); } addRoute(path, handler) { ..

배경최근 회사에서 신규 프로젝트를 시작하면서 React 레파지토리를 만들게 되었다. 하지만 내가 기존에 사용하던 ESLint 및 Prettier 규칙이 회사에서 사용하는 것과 달랐다. 같은 코드 스타일과 형식을 유지하기 위해 동일한 설정을 공유하고자 했지만, 기존 설정에는 주석이나 설명이 없어 왜 특정 규칙을 사용하고 있는지 이해하기 어려웠다. 무엇보다 이거 또 복붙해야하나(?) 평소에도 프론트엔드 개발자로 혼자 근무해서 극한의 효율을 갈구하고 있기에 관련 레퍼런스를 찾아보았다.  참고할 만한 자료를 찾던 중 우아한 기술블로그에서 바로 내 상황에 똑맞는 포스팅을 발견했다. 이 글에서는 기술블로그를 따라 공용 ESLint 및 Prettier 설정을 만들고 적용하는 과정을 공유하고자 한다. 우아한 기술블로그..