Programming Is Hard

이번 주차 목표 (디자인 패턴과 함수형 프로그래밍)(1) 값 함수 액션을 구분할 수 있다. 1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)- ProductManager 추상화현재 새 상품 추가는 ProductForm 컴포넌트로 분리했지만, 기존 상품 수정 영역은 핸들러 함수가 많아져 UI와 로직을 분리하지 못했다.특히 setEditingProduct를 직접 다루는 handleProductNameUpdate, handlePriceUpdate, handleStockUpdate처럼 필드별로 상태를 갱신하는 로직이 반복되면서 코드가 점점 길어지고 중복되는 느낌이 들었다. - 액션과 순수함수 분리에 대한 고민로직을 어디까지 hook 안에 두고, 어떤 계산을 utils 또는 models로 분리해..

1. JavaScript & TypeScript클로저(Closure)에 대해 설명해 주세요클로저는 함수가 생성될 때 외부 스코프의 변수를 기억하는 기능입니다. 즉, 외부 함수의 실행 컨텍스트가 종료되어도 내부 함수가 그 변수를 참조할 수 있게 해줍니다.function outer() { let counter = 0; return function () { counter++; console.log(counter); };}const count = outer(); // outer 실행되어 counter 캡처count(); // 1count(); // 2 이처럼 클로저를 사용하면 counter 변수는 외부 함수가 종료된 후에도 유지됩니다. 이러한 구조는 함수 내부에서 상태를 캡슐화하거나 유지해야 할..

이번 주차 목표 (클린코드와 리팩토링)(1) 내가 작성한 코드가 클린코드임을 설명할 수 있다.(2) 클린하지않은 코드를 클린하게 만들 수 있다. 1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)- 화요일에 대한 테스트코드 실패할인과 포인트 계산에 대한 테스트 코드가 계속 실패해서 calcCart 함수의 로직을 여러 번 수정했다. 알고 보니 로직이 틀린 게 아니라, 테스트 시점의 날짜가 실제로 화요일이라 할인 로직이 정상 작동한 것이 원인이었다. 테스트에 실패하자 일부러 수요일로 바꾸고 흐린눈으로 넘겼던 기억도 있다... 😭 - React 마이그레이션 시 코드 작성과 구조 분리의 어려움Basic 코드에서 사용하던 로직을 그대로 React로 옮긴 뒤 개선을 시도했지만, "React에서는 ..

🙋‍♀️ 간단한 자기소개 저는 AI-OCR 문서 자동화 시스템을 개발하고 있는 4년 차 프론트엔드 개발자 김유빈입니다. Vue와 Typescript를 주로 사용해왔고, 최근에는 Javascript 딥다이브와 React 생태계를 공부하고 있습니다.벌써 항해를 시작한지 3주가 지났네요. 1챕터는 JS & React 딥다이브였는데요! 그동안의 경험을 돌아보며 회고해봅니다. 🎯 이번 챕터를 시작하며 꼭 해내고 싶었던 목표 여러 목표가 있었지만, 가장 중요하게 생각한 건 공부하는 습관을 들이는 것이였습니다. 퇴근하고 앉아서 공부하는 거 힘들잖아요?기술적인 목표로는 두 가지를 세웠습니다.Vanilla JavaScript 코드에 대한 두려움 없애기React의 동작 원리를 이해하고 사용하는 개발자 되기  🏆 이번..

이번 주차 목표 (프레임워크 없이 SPA 만들기)(1) 가상 DOM을 정의하고 사용할 수 있다.(2) 가상 DOM을 이용하여 이벤트 관리를 최적화할 수 있다.(3) diff 알고리즘을 이용하여 불필요한 렌더링을 최소화할 수 있다.  1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)- 전체적인 가상 DOM 구현가상돔 개념은 Vue와 React가 이를 기반으로 만들어진 프레임워크라서 익숙했다. 아무래도 기술면접에서도 자주 나오는 질문 사항이니깐.직접적으로 구현하는 건 처음이었는데, 개념적으로 이해하는 것과 실제로 구현하는 것의 차이를 실감했다... 진짜 어려웠다. - 이벤트 핸들러 구현createElement와 updateElement 내부에서 이벤트 핸들러를 다루는 부분이 까다로웠다. 가능..