Programming Is Hard

1. JavaScript 동작 원리와 성능 최적화 debounce와 throttle의 차이와 사용 상황은?debounce: 마지막 이벤트 이후 일정 시간이 지나야 실행 (ex. 검색창 자동완성)throttle: 일정 주기마다 실행 (ex. 스크롤 이벤트)핵심 차이는 debounce는 마지막에만 실행되고, throttle은 주기적으로 실행된다는 점실행 컨텍스트란?자바스크립트는 코드를 실행할 때 실행 컨텍스트(Execution Context)를 생성하고, 이 컨텍스트가 콜스택에 쌓이면서 코드를 실행합니다.# 내부 구성 요소 - Variable Object (VO): 변수와 함수 선언 정보 - Scope Chain: 상위 스코프에 접근하는 체인 - this 바인딩: 실행 문맥에 따른 this 값 자바스크립트 ..

이번 주차는 특별하게 과제를 진행했던 레포지토리를 첨부해본다.👉 내 레포지토리 바로가기이 안에는 용어 개념 정리도 해놓았고, 회고글도 작성해두었기 때문이다. 이번 주차 목표 (인프라 관점의 성능 최적화)(1) 프론트엔드 프로젝트 배포 프로세스를 이해한다.(2) 인프라 레벨 최적화 개념을 이해한다.(3) CDN 및 캐싱 전략을 수립할 수 있다. 1. 고민했던 문제- 다이어그램 툴 선택배포 파이프라인을 다이어그램으로 표현해야 했는데, 뭘로 그릴지 고민했다.처음에는 diagrams를 썼는데, 뭔가 허전하게 느껴졌다. - S3와 CloudFront의 CDN 측정S3와 CloudFront를 사용했을 때의 효과를 비교하려고 했는데, 처음에는 캐싱 상태로 측정하다 보니 결과가 잘 안 나왔다.과제 제출 전에 다시 검..

🎯 이번 챕터를 시작하며 꼭 해내고 싶었던 목표 테스트코드 작성에 대한 두려움 극복TDD 개발론 적용다양한 기능 테스트 시도MSW 고수가 되기 🏆 이번 챕터를 마무리하며 가장 기억에 남는 성취사실 기능이 대부분 구현된 상태에서 "추가 기능을 구현하면서 테스트 코드를 작성할 수 있을까?"라는 고민이 있었는데, 8주차 과제를 통해 그 부분이 많이 해소된 것 같아요. TDD를 활용하면서 수많은 오류를 보며 통과시켰던 경험이 유익했습니다.또한, MSW를 처음부터 직접 적용해볼 기회를 가졌던 것도 좋았습니다. 기능 구현뿐 아니라 테스트코드 작성에서도 MSW를 활용해 mocking을 해볼 수 있었고, utils나 커스텀 훅 단위 테스트도 자연스럽게 진행할 수 있었습니다. 덕분에 이제는 "MSW, 두렵지 않아!"..

이번 주차 목표 (프런트엔드 테스트 코드)(1) 테스트의 필요성을 이해한다.(2) 기본적인 테스트를 작성할 수 있다. 1. 고민했던 문제- 통합 테스트를 진행하면서 mock 데이터를 생성하고 리스트에 반영하는 흐름이 자연스럽게 연결되었는지 판단하기 어려웠고, 실제로 테스트가 여러 번 실패하면서 디버깅에 시간을 많이 썼다.하지만 그 과정에서 비동기 렌더링 타이밍, 상태 반영 시점 등을 파악하게 되면서 테스트에 대한 이해도가 확실히 높아졌다. 2. 시도 및 해결- 이전에는 렌더링 안정화를 위해 waitFor를 사용했지만, 비동기 로직이 없는 경우에는 await act(() => null)처럼 최소한의 act 호출만으로도 충분하다는 점을 멘토링을 통해 알게 되었고, 이를 코드에 반영해 개선했다.// 개선..

이번 주차 목표 (관심사 분리와 폴더구조)(1) 단일책임원칙이 적용된 좋은 폴더 구조를 안다. 1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)- Jotai와 Tanstack query를 함께 사용할 때의 일관성TanStack Query가 “요청 → 캐싱 → 로딩/에러 관리”의 역할을 해준다는 점은 이해했지만, 기존 상태 관리의 actions 역할을 어디까지 위임할 수 있는지가 애매하게 느껴졌다.예를 들어 기존에는 addComment, updatePost 등의 상태 변경 로직을 Jotai 기반으로 직접 관리했는데, 이런 동작들을 이제는 mutation으로 옮겨야 하나? 아니면 여전히 Jotai로 관리해야 하나?로컬 상태와 서버 상태의 책임 분리가 뚜렷하지 않아서 혼란스러웠다. 2. 시..

이번 주차 목표 (디자인 패턴과 함수형 프로그래밍)(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에서는 ..