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는 ..

최근에 드래그 앤 드롭 기능을 만들어보면서 느낀 점은 정말 재미있는 기능이라는 점인 것 같다! 이번에는 간단한 드래그앤드롭,DND 예제를 만들어보고, 그 후에 어떤 최적화를 할 수 있을까에 대해서 고민해보려고 한다. 드래그 앤 드롭 기능 예제와 성능 최적화 🚀일단 dnd 예제를 만들어야하는데, 초기에 필요한 세팅은 클로드의 도움을 받아서 작성했다. 프롬프트를 작성한 예시는 아래와 같다.간단한 드래그앤드롭을 만들기 위한 초기 html과 css만 만들어줘, 기능 구현은 하지 않고 만들어줘이렇게 해서 만들어진 예시 화면이다. 디자인은 대충 디스코드 느낌 나게 만들어봤다. 색깔만간단하게 설명하면 왼쪽에 있는 draggable한 아이템들을 드래그앤드랍으로 오른쪽의 dropzone으로 끌어다 놓으면 아이템을 움직..

Pug의 renderFile 함수 동작 테스트와 mixin 컴포넌트 렌더링 문제 해결 🚀Pug 템플릿엔진을 활용해서 프로젝트를 하고 있었는데, pug의 renderFile 함수가 원하는 대로 작동하지 않아서 가능한 대안을 찾기 위해 이것저것 시도해본 문제 해결 과정이다. 원래 의도했던 것은 pug로 작성된 템플릿 파일을 renderFile 메서드로 HTML로 변환한 뒤에 클라이언트에 전달하는 것을 의도했다. 그러나 mixin 키워드가 포함되지 않은 일반적인 퍼그 파일은 잘 렌더링이 되는데, mixin을 쓰는 퍼그 파일은 렌더링이 잘 되지 않고 빈 문자열 "" 만 반환하는 문제를 만났다.renderFile 함수 테스트 코드 작성 🧪먼저 renderFile 함수의 동작을 테스트하기 위한 jest 코드를 ..

SQL 서버 원격 접속 중 생긴 문제 해결 과정 🔧MySQL을 설치하고 포트를 3306번 포트에서 3307번 포트로 변경하는 작업을 진행했다. 그 뒤 로컬 환경인 맥OS에서 가상 환경인 리눅스에 켜져있는 MySQL 서버에 접속하는 원격 접속 테스트를 진행했다. 포트를 3307번으로 바꾼 이유는 원래 기존에 로컬에서 쓰던 mysql 서버와 같은 포트이기 때문에, 혹시 모를 오류를 대비해서 3307번 포트를 썼다. 알아보니 3307은 의미 있는 포트가 아니었기 때문에 3307로 변경 후 진행했다.  포트를 변경하는 방법 (3306→3307) 📝더보기포트를 변경하려면 /etc/mysql/my.cnf 경로의 파일에 포트를 적어주면 된다. nano /etc/mysql/my.cnf를 통해 나노 에디터로 수정했는..