react-icons 라이브러리과 트리 쉐이킹트리 쉐이킹 (Tree Shaking)트리 쉐이킹, 용어 자체의 사전적 의미는 "나무를 흔들다." 라는 뜻이다. 자바스크립트에서는 번들러가 사용하지 않는 코드를 제거하는 과정을 의미한다. 개발 후 최종 번들링을 하는 과정에서 사용하지 않는 모듈을 제거하는 것을 나무를 흔들어 잎을 떨어뜨리는 것에 빗대어 생긴 용어이다.Javascript에서 중요한 이유트리 쉐이킹은 자바스크립트에서 중요한 개념이다. 모듈과 번들링 과정에서 사용되기 때문이다.모듈은 하나의 독립적인 기능을 가진 코드 블록을 의미한다. 번들링은 여러 모듈들을 빌드 과정에서 하나의 파일로 합치는 과정이다. (이 경우 로딩 시간과 성능을 최적화할 수 있다.)번들링 과정에서 사용되는 것이 트리 쉐이킹이다...

처음 HTML, CSS, JS를 공부하고 리액트를 처음 배우기 시작할 때에 이벤트 핸들러를 JSX 태그에 onClick={} 형식으로 인라인으로 달아주길래 각 태그에 이벤트 핸들러를 부착하는 줄 알고 있었다. 하지만 최근에 리액트에 대해서 더 공부를 해보면서 리액트는 이벤트를 위임 방식으로 효율적으로 처리한다는 것을 알게 되었다. 이번에는 리액트에서 이벤트를 어떻게 효율적으로 처리하는지를 알아보려고 한다.React에서 이벤트를 처리하는 방법Event이벤트는 마우스를 클릭하거나 키보드를 누르는 것처럼 사용자의 액션에 의해 발생하거나, 비동기적 작업의 진행을 나타내는 등의 목적을 위해 API 들이 생성할 수도 있다. 한글로는 사건이라고 할 수 있다. 클릭 이벤트를 발생시키려면 어떤 요소를 클릭하거나, Ele..

useEffect는 개인적으로 React에서 useState 급으로 핵심 요소라고 생각한다. useEffect는리액트 16 버전부터 도입된 Hook 중 하나로 컴포넌트가 렌더링된 이후에 실행될 작업들을 정의할 수 있도록 해준다.useEffect 역할과 사용 방법 🚩useEffect 뜻| useuse는 리액트의 hook 앞에 모두 들어간다. 그렇기 때문에 use로 시작하는 함수가 리액트 훅이라는 것을 의미하기도 한다. | EffectuseEffect는 왜 이름에 effect가 들어갈까? 프로그래밍에서 effect는 보통 사이드 이펙트를 의미한다. 이펙트는 효과라는 뜻이니까 사이드 이펙트는  주 목적이 아닌 효과 즉, 부수효과를 의미한다.  부수 효과는 함수의 주요 목적 외에 발생하는 모든 변화나 상호작용..

이 에러는 SQL쿼리를 날리는 도중 쿼리의 문법이 잘못되었다는 오류이다. 시퀄라이즈를 쓰고 있었기 때문에 어떤 부분에서 에러가 나는지를 찾아야했는데 Sequelize에서 You have an error in your SQL syntax 에러 해결 방법문제 상황아래는 문제가 발생한 코드이다. 유저 모델을 정의하는 코드인데, 여기서 You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'true' at line 1 이런 오류가 발생하면서 유저 테이블이 생기지 않는 문제이다.'use strict';const { Model} ..

평소에는 상태관리를 할 때 깊게 들어갈 생각보다는 그냥 이용만 했던 것 같다. Redux나 Recoil, Zustand 같은 상태 관리 라이브러리는 많지만, 단순히 라이브러리를 이용만 하는 것보다는 패턴에 대해서 이해하고 활용하는 것은 큰 차이가 있을 것 같다고 생각해서 이번 글을 작성해보려고 한다.Flux 패턴에 대해서 📚Flux 패턴은 어떻게 등장했나?Flux 패턴은 지금은 Meta로 사명을 바꾼 페이스북에서 싱글 페이지 웹 애플리케이션을 구축할 때 사용하기 위해서 만들었다. 이 패턴을 이해하기 위해서 먼저 양방향 데이터 흐름과 단방향 데이터 흐름에 대해서 알고 가야한다.양방향 데이터 흐름 🔄일반적으로 MVC(Model-View-Controller) 구조가 양방향 데이터 흐름을 가진다. MVC는 ..