안녕하세요 메이토입니다 🍅아래 글에서 이벤트 위임 개념을 다뤄보았는데, 이 개념을 활용하여 프로젝트를 리팩토링 한 이야기를 풀어보려고 합니다 !https://dev-tomato.tistory.com/31 [JS] 이벤트 전파 그리고 위임안녕하세요 메이토입니다 🍅오늘은 CS 스터디 중 맛있게 공부했던 주제인 이벤트 전파와 위임에 대해 알아보려고 합니다 !이벤트 전파 흐름이벤트 전파에는 아래와 같은 3가지 흐름으로 구성됩dev-tomato.tistory.com 대량의 셀로 구성된 히트맵 컴포넌트를 만들다 보면, 각 셀마다 이벤트 핸들러를 바인딩하고 툴팁을 관리하는 것이 성능 병목이 될 수 있습니다. 이 글에서는 이벤트 위임(Event Delegation) 과 DOM 직접 조작을 활용해 히트맵 툴팁의 성..

안녕하세요 메이토입니다 🍅오늘은 CS 스터디 중 맛있게 공부했던 주제인 이벤트 전파와 위임에 대해 알아보려고 합니다 !이벤트 전파 흐름이벤트 전파에는 아래와 같은 3가지 흐름으로 구성됩니다 ! (1) 캡처링 단계 : 상위요소에서 하위요소로 이벤트가 전파되는 단계- window → document → → → … → 타깃 요소(2) 타깃 단계 : 실제 타깃요소에 이벤트가 전달되는 단계(3) 버블링 단계 : 하위요소에서 상위요소로 이벤트가 전파되는 단계 이벤트 캡처링- 한 요소에 이벤트 발생 → 그 요소의 자식 요소의 이벤트까지 전파되는 현상 이벤트 감지 시점 Default = 버블링이기 때문에 캡처링 단계에서 이벤트 핸들러를 실행시키기 위해서는 아래와 같이 추가적으로 설정을 해줘야 합니다 ! Event..

안녕하세요 ! 메이토입니다 🍅 최근에 우테코 성능 개선 프로젝트를 진행을 해보았는데 , 굉장히 많은 키워드들과 함께 학습을 했던 미션이라 이번 미션에 적용 했던 것과, 그와 관련된 부가적인 지식을 정리해보려고 합니다 ! [ 개선 이전 ] [ 개선 이후 ]1. 요청 크기 줄이기(1) 소스코드 경량화하기웹 애플리케이션의 첫 번째 다이어트는 바로 소스코드에서 시작됩니다.Uglify는 이제 웹팩에서 기본으로 제공하는 기능입니다. Webpack v4 이상에서 mode: 'production'으로 빌드하면 자동으로 코드를 압축하고 난독화해줍니다. 이 과정에서 불필요한 공백, 주석, 변수명 단축 등을 통해 파일 크기를 대폭 줄일 수 있어요. CSS 파일 분리의 중요성MiniCssExtractPlugin을 사용하면:..

안녕하세요 메이토입니다 ㅎㅎ공식적으로 방학이 되고 행복한 평일을 맞이하고 있는데 이 아침부터 블로그 글을 쓰고 있지만 방학이 되니 뭐든 행복하네요 ,, 레벨 2 때까지는 방학되면 아쉬운 마음이 더 컸는데 ,, 이번 레벨 3때는 뭔가 더 활활 태워서 그런지 방학이 이렇게 행복할 수가 없네요 😊 하여튼 각설하고 우당탕탕 흘러갔던 레벨 3 한번 돌아보도록 하겠습니다 ! 기술적으로도 배운 부분이 많지만, 우선 팀을 만나고 나서 배운 소프트 스킬 측면부터 작성해보고, 기술적인 부분은 주제를 잡고 방학에 글을 한 두편 정도 더 써보려고 합니다 🔥소프트 스킬팀과의 협업을 통해 배운 점1. 일정 조정 능력 프로젝트가 원활하게 진행되기 위해서 가장 중요한 점 중 하나는 일정 조정인데, 가장 어려운 부분이기도 하다. ..

안녕하세요 메이토입니다 🍅프론트엔드라면 렌더링에 대한 최적화를 신경쓰지 않을 수 없겠죠?그럴때마다 나오는 개념, Memoization 에 대해 알아보고, 그렇다면 "모든 곳에 Memoization 해야 하나?" 라는 의문점을 풀어보려고 합니다. Memoization (메모이제이션) 복잡한 함수 호출의 결과값을 함수에 저장해놓고, 같은 입력이 반복될 때 저장한 값을 반환하도록 하여 속도를 높임 즉, 동일한 계산을 반복해야 할 때 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산을 하지 않도록 하는 것이고, 이것이 곧 React에서는 컴포넌트의 잦은 리렌더를 방지하기 위한 최적화 방법일 것 같습니다. 1. useCallback- 함수를 메모이 제이션const memoizedCallback = useCa..

안녕하세요 메이토입니다 🍅제어 컴포넌트와 비제어 컴포넌트라는 개념, 리액트를 공부하다보면 한번쯤 들어보셨을텐데요 과연 어떤 차이가 있는 걸까요? 제어 컴포넌트const App = () => { const [value, setValue] = useState(""); const handleInputChange = (e: React.ChangeEvent) => { setValue(e.target.value); }; return ;}; React에서 값이 제어되는 컴포넌트를 이야기 합니다.State에 의해 값이 관리되고, 사용자의 입력에 따라 실시간으로 업데이트 해줄 수 있습니다. 즉, 값이 변경됨에 따라 상태가 변경되고, 결국 컴포넌트가 재렌더링되는 상황이 발생합니다. 즉, 입력값이 변경됨에 따..