dansoon.log()

1. 문제이번 주에는 기존 리액트 코드의 상태 관리 방식을 Context와 Custom Hook을 활용해 리팩토링하는 과제가 있었다. 컴포넌트마다 각기 다른 상태와 로직을 관리하고 있었기 때문에 코드가 복잡해지고, 유지보수가 어려워지는 문제가 있었다. 특히 다음과 같은 문제가 있었다:복잡한 상태 관리AdminPage, CartPage 같은 주요 컴포넌트에서 여러 상태(products, cart, coupons)를 개별적으로 관리하고 있었다.상태가 분산되다 보니 로직이 길어지고, 코드 흐름을 이해하기 어려웠다.중복된 코드제품 추가, 수정, 삭제 등의 로직이 각각의 컴포넌트에 중복되어 있었다.동일한 로직을 여러 곳에서 관리하다 보니, 기능을 수정할 때 모든 컴포넌트를 일일이 수정해야 하는 번거로움이 있었다...

1. 문제3주차에는 리액트 컴포넌트를 최적화하는 방법에 집중했다. 특히 메모이제이션과 렌더링 최적화를 통해 성능을 개선하는 것이 목표였다.주요 문제는 크게 세 가지로 나뉘었다:컴포넌트 재렌더링: 상태나 props가 바뀔 때마다 불필요하게 컴포넌트가 다시 렌더링되는 문제를 해결해야 했다. 이를 막기 위해서는 값이 실제로 변경된 경우에만 렌더링을 트리거해야 했고, 이를 최적화할 방법을 고민했다.메모이제이션: 동일한 연산을 반복해서 수행하는 대신, 이전의 연산 결과를 기억해 성능을 높이는 방법을 적용할 필요가 있었다. 이 과정에서 useMemo와 useCallback을 적절히 활용하는 방법을 고민했다.깊은 비교 vs 얕은 비교: 객체나 배열 같은 복잡한 데이터 구조를 다룰 때, 얕은 비교만으로는 변화 여부를 ..

1. 문제리액트와 같은 프레임워크에서는 가상 DOM을 사용하여 성능을 최적화하는데, 이 과제에서는 이를 직접 구현해야 했다. 주된 문제는 다음과 같았다.첫번째로 가상 노드(vNode)를 실제 DOM 요소로 변환해야 했는데, 다양한 타입(숫자, 문자열, 배열, 함수형 컴포넌트 등)을 고려하여 처리하는 로직을 만들어야 했다.두번째로 여러 이벤트 핸들러를 각 요소에 개별적으로 설정하지 않고, 이벤트 위임 방식을 사용해 성능을 최적화하고 유지보수를 쉽게 해야 했다.세번째로 최적화된 렌더링을 위해 가상 DOM과 기존 DOM을 비교해 필요한 부분만 업데이트함으로써 불필요한 DOM 조작을 최소화해야 했다.이 문제들은 성능 최적화와 복잡한 사용자 인터페이스를 관리하기 위해 필수적인 부분들이었다.하지만 주로 잘 만들어진..

과제 개요이번 과제에서는 Vanilla JavaScript로 SPA(Single Page Application)를 구현했다. 주요 요구사항은 History API로 라우터를 구현하는 것, LocalStorage를 사용한 사용자 관리 기능, 컴포넌트 기반 구조 설계, 초기 상태 관리 구현, 그리고 테스트 코드 통과였다.이전에 react-router를 사용해본 경험이 있지만, 그것이 내부적으로 어떻게 동작하는지는 구체적으로 알지 못했다. 이번 과제를 통해 SPA 라우팅이 어떻게 작동하는지 직접 구현하면서 더 깊이 이해할 수 있는 시간을 가졌다.시도한 것들라우터 직접 구현기존에 사용하던 라우터 라이브러리 대신, 브라우저의 History API를 사용해 페이지 전환 기능을 구현했다. history.pushSta..