항해99 세번째 과제

Weekly I Learned

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

• 회사에서 vue를 main 으로 다루는 나에게 react hook을 오랜만에 쓰는지 한번도 안썻는지 가물가물한 나에게 다시 한번 이런게 있엇구나 하고 일깨워주는 과제

2. 시도

• 얕은 비교를 통해 같은지 확인하는 로직 추가(shallowEquals.ts)
• 기본 타입이거나 null인 경우 처리(deepEquals.ts)
• hook 직접 추가하여 useMemo 훅은 의존성 배열이 변경되지 않는 한 동일한 값을 반환하여 성능 최적화
• useRef 훅은 렌더링 사이에 값을 유지하는 가변 ref 객체를 생성
• 역할별로 컴포넌트 provider 분리

3. 해결

• 디버깅을 통한 문제 해결력 향상
• 원인을 찾고 해결하는 과정을 반복하면서 디버깅 감각 생성

4. 알게된 것

1. === vs JSON.stringify() 성능 차이

🔹 === (Strict Equality)

• 비교 방식: 얕은 비교 (Shallow Comparison)
• 성능: 매우 빠름 (O(1))
• 예시:

const a = { name: "Jane" };
const b = { name: "Jane" };

console.log(a === b); // false (참조값이 다름)

설명: 객체끼리는 메모리 주소(참조)를 비교합니다. 값이 같더라도 객체가 다르면 false예요.

---

JSON.stringify(a) === JSON.stringify(b)

비교 방식: 깊은 비교처럼 보일 수 있음 (Deep-ish)

성능: 느림 (O(n))

문자열 변환과 비교가 필요해서, 구조가 복잡할수록 속도가 느려집니다.

• 문자열 변환과 비교가 필요해서, 구조가 복잡할수록 속도가 느려집니다.

예시:

const a = { name: "Jane" };
const b = { name: "Jane" };

console.log(JSON.stringify(a) === JSON.stringify(b)); // true

주의사항:

• key 순서가 다르면 false (객체의 순서가 중요한 게 아님에도 불구하고)

• 순환 참조가 있으면 에러 발생 (TypeError: Converting circular structure to JSON)

항목	=== (Strict Equality)	JSON.stringify()
비교 방식	얕은 비교 (Shallow Compare)	깊은 비교처럼 보이는 문자열 비교
성능	매우 빠름 (O(1))	느림 (O(n)) — 구조 클수록 느림
비교 대상	참조값	문자열화된 구조
단점	값이 같아도 참조 다르면 false	key 순서 다르면 false, 순환 참조 시 에러
예시	a === b // false	JSON.stringify(a) === JSON.stringify(b) // true

---

2. 얕은 비교(Shallow Compare) vs 깊은 비교(Deep Compare)

항목	얕은 비교	깊은 비교
비교 방식	최상위 key 또는 참조만 비교	모든 내부 값까지 재귀적으로 비교
속도	빠름 (O(1) ~ O(n))	느림 (O(n^2) 가능성 있음)
사용 예	===, Object.is, React memo, useMemo	Lodash _.isEqual, 커스텀 deepEqual 함수
적용 대상	단순 객체, 참조만 보면 되는 경우	중첩된 객체, 구조 비교가 필요한 경우
예시	{ a: 1 } === { a: 1 } // false	_.isEqual({ a: 1 }, { a: 1 }) // true

⚠️ 참고 사항

• JSON.stringify()는 비교에 쓸 수 있지만 아래 주의점이 있어요:
  • key 순서가 다르면 false
  • 순환 참조가 있으면 에러 발생
  • undefined, function, symbol 등은 JSON에 포함되지 않음

---

✅ 추천 사용법

목적	추천 방법
참조 동일 여부만 확인	===
깊은 구조 비교 필요	_.isEqual() or 커스텀 deepEqual 함수
문자열 저장/전송	JSON.stringify() (비교 목적엔 적합하지 않음)

코드 품질

모듈화

• /components, /context, /@lib, /types, /hooks 등 도메인 기반 폴더 구성은 명확한 관심사 분리

상태관리

• NotificationContext, ThemeContext, UserContext 등이 분리되어 있는 구조는 상태 관리를 명확히 함

타입 안정성 강화

• /types/ 폴더가 별도로 존재하고 Notification, User, Item 등 도메인별 타입을 따로 관리

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

• 기능 React Vue 핵심 차이점
• 값 캐싱 useMemo computed Vue는 자동 추적, React는 의존성 명시
• 상태 저장 useRef ref Vue는 반응형, React는 비반응형
• 전역 전달 useContext provide/inject React는 Context 정의 필요
• 상태 관리 useState ref, reactive Vue는 더 직관적인 변경
• 로직 재사용 custom hook composable 둘 다 함수 기반, Vue는 반응형 내장

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

• 이번 코드엔 개선이 필요하다고 생각하진 않습니다.

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

• .