코딩 헬스장

✅ 현 회사에서 제가 처음 개발부터 유지보수 및 개정사항을 작업을 한 메뉴가 있습니다. 메뉴 초기 개발만해도 2달 정도가 걸린..😓 가장 애착을 가지고 있는 메뉴인데, 현 회사 특성상 매년마다 계산식이나 UI가 바뀜에 따라 점점 크기 자체가 커지고 있었습니다. (현재 4개년의 개정을 함에 따라 크기가 엄청 커졌습니다.) 그래서 운영버전 초기 렌더링이 오래 걸리는 현상이 생겼고 이를 방치하면 년도가 지날수록 더욱 느려질것이 분명하기에 개선해보고자 공부하고 글을 작성합니다. 🧐 문제 파악 문제 파악 전 알아야 개념 번들 (Bundle) : 묶는다라는 뜻 번들링 (Bundling) : 기능별로 모듈화한 js 파일들을 묶어주는 것, 서로 연관(의존성)있는 js 파일들을 하나의 번들 파일로 묶어주는 것 번들러 (..

1. setState()에 async / await이 동작할까 ?? ✅ 결론은 setState()에서는 async / await을 사용해도 동작하지 않습니다. JS에서는 일반적으로 코드를 동기방식으로 처리합니다. (코드 순서대로 위에서 아래로 차례대로 실행) 예외적으로 callback 함수, ajax, setTimeout .. 등과 같은 함수들은 순차적으로 실행되지 않고 완료되면 실행됩니다. 이를 비동기적으로 처리한다고 정의합니다. (완료되는 순서대로 일을 처리하여 실행 순서가 확실하지 않음) 비동기 함수를 동기방식으로 처리하려면 async / await 키워드를 사용합니다. await 문은 Promise가 fulfilled(이행) 되거나 rejected(거부) 될 때까지 async함수의 실행을 일시 정..

1. Redux - devtools ? * 설치 링크 Redux DevTools Redux DevTools for debugging application's state changes. chrome.google.com 크롬 확장 프로그램 중 하나로 리덕스의 상태 변경 디버깅을 위한 툴입니다. 상태 관리를 Redux로 하셨던 분들은 Redex-devtools 가 익숙하실 겁니다. 그렇다면 zustand에서 해당 툴을 포스팅하는 이유는 바로 zustand는 미들웨어를 통해 Redux-devtools를 사용할 수 있기 때문입니다! 2. 사용법 먼저 위 설치 링크에서 Redux DevTools 확장 프로그램을 설치합니다. store로 사용하는 파일에 'zustand/middleware'에서 devtools를 임포..

1. zustand ? 간단한 Flux 구조를 사용하는 확장 가능한 상태 관리 라이브러리 입니다. Hook 기반으로 편리한 API들을 제공합니다. * Flux 구조란 ? - 어느 방향으로 데이터가 전달될지 알지 못하는(양방향 데이터흐름) MVC 패턴의 복잡성을 해소하기 위해, Flux 패턴을 통해 데이터가 단 방향으로만 변경될 수 있도록 만든 구조입니다. 기존 React의 MVC 패턴의 단점 상태값을 하위 컴포넌트로 전달해주기 위해 불필요한 컴포넌트에 상태값을 선언해야됩니다. MVC 패턴 단점 해결방안 상태값을 store에서 관리하여 필요한 컴포넌트에서만 가져와 사용할 수 있도록 해결합니다. (Flux) 2. 다른 상태관리 라이브러리와 비교 Redux와 비교 1. Redux를 통해 메뉴 개발한 경험을 바..

함수형 컴포넌트를 실무에 적용하여 개발을 진행 중인데, 로컬 변수를 사용에 있어 문제가 발생했습니다. 기존 클래스 형의 함수에서 사용했던 것처럼 let, const 등의 키워드로 변수를 선언 할당하여 사용했는데, 처음 한 번은 정상이나, 한번 이상 렌더링 되면 값이 초기화되어 계산 로직에서 잘못된 값이 나왔습니다. 원인을 파악해보고자 간단한 예시를 만들었습니다. maxMn, minMn의 두 로컬 변수를 만들고 초기값을 할당한 후, 계산식을 탈 때 두 값을 찍어주도록 해봤습니다. 1. 내 코드의 문제점 useEffect를 통해 변수에 값을 할당 후 계산식에서 처음 사용 시에는 정상이나 두 번째(렌더링이 일어난 후)부터는 0으로 초기화되는 현상을 볼 수 있습니다. 원인을 파악하기 위해 함수 컴포넌트 최상단에..