dev_in 개발 블로그

레시피 페이지 또한 외부 API의 Raw 타입을 그대로 쓰기 보다는 정규화 하여 프론트 차원에서 쓰기 좋은 함수로 만들 필요가 있었습니다. 이번 글을 그 과정 및 과정에서 고민한 사항들을 정리한 것입니다. 문제점식약처의 조리식품 DB의 경우, 조리 단계를 배열이 아닌 string 타입이 펼쳐진 구조로 제시하고 있었습니다. // 조리 단계 Raw 데이터 타입 예시export type RecipeDetailRaw = {MANUAL01: string;MANUAL02: string;MANUAL03: string;MANUAL04: string;MANUAL05: string;MANUAL06: string;MANUAL07: string;MANUAL08: string;MANUAL09: string;MANUAL10: s..

이벤트 버블링이벤트 버블링은 이벤트가 발생했을 때 가장 안쪽의 타겟 요소에서 시작하여 부모 요소로 전파되는 방식입니다. 예를 들어, 버튼을 클릭했을 때 버튼 자체에서 이벤트가 발생한 후 이 이벤트가 상위 요소인 div, body, document, window로 전파되는 과정을 거치게 됩니다. 기본적으로 브라우저는 이벤트 전파를 버블링 단계에서 처리하도록 설계되어 있습니다. 이벤트 캡쳐링이벤트 캡처링은 이와 반대 방향으로 진행됩니다. 즉, 이벤트가 최상위 부모 요소에서부터 시작해 점점 타겟 요소로 내려오면서 전파됩니다. 예를 들어, window에서 이벤트가 시작되어 document, body, div를 거쳐 버튼에 도달하게 되는 방식입니다. 기본적으로 캡처링 단계는 비활성화되어 있지만, addEventL..