useStateReact로 개발을 하다보면 여러가지 훅을 사용하는데 그 중, 아마 가장 많이 사용하는 훅이 useState일 것이다.useState를 이용해서 컴포넌트의 상태를 변화시키면 변화를 감지하여 컴포넌트를 리렌더링하기 위해 씀가끔.. useState 관련해서 깊게 모른다는 생각이 들곤 하는데.. 잘 몰라도 사용법만 알면 잘 작동하기 때문에 그냥 넘어간적이 한두번이 아니였던 것 같기도 하다 ;_;useState, react state에 대해 여러가지 관련된 키워드들에 좀 더 자세히 알아보자 =)immutability, closure, re-rendering, Fiber, reconciliation, 등등...대충 아는척 할 수는 있지만 제대로 모르는 것 같아서 글로 기록해본다!useState 기본..

Dist다들 Javascript 기반의 어플리케이션을 만들기 위해 build해보고 개발환경에서 실행하면서 dist라는 폴더를 자주 봤을 것이다보통 애플리케이션을 웹 브라우저에서 실행하려면 dist 디렉토리를 서버에 업로드한다사실 나는 이 폴더의 용도를 대충 알고 넘어가긴 했었다... 세상이 좋아져서 알 필요가 없었던 것일까..;~vercel, aws s3 등에서 요 빌드 파일(dist)를 올리면 알아서 잘 작동함아무튼 dist 폴더는 JavaScript 애플리케이션을 빌드한 결과물을 포함하는 디렉토리이다.dist/├── index.html├── assets/│ ├── index.[hash].js # 빌드된 JavaScript 번들│ ├── index.[hash].css # 빌드..

nit) historyJS 진영에는 두가지 모듈 시스템이 존재한당. ESM, CJSESM은 FE 개발하는 사람이라면 자연스럽게 사용하는 import를 이용해 모듈을 이용하는 방법이다import {get} from 'lodash';CJS는 백엔드 서버를 위해 node.js 서버를 개발하거나 웹 어플리케이션 구축을 위해 react나 next.js에서 config.js 파일을 설정할 때 사용해봤을 것이다const { chicken } = require('food'); 처음 Javascript가 등장하고나서 시간이 흐르고 흘러.. Ajax가 등장하고부터 웹 페이지를 서버와 통신을 통해 비동기적으로 업데이트하는 방식이 등장했고 이를 커버할 수 있는(성능이 좋은) V8 엔진이 등장하며 주목받기 시작했다.이러한 변화..

요즘 일하면서 기능은 다 만들 수 있지만 좋은 코드에 대해 놓쳤던 것 같다 ㅇㅇ아래처럼 IOC나 여러 방법을 이용해 유지보수를 용이하게 할 수 있는데 맨날 쭈우우욱 코드를 작성만 했던 것 같다.문득 생각나서 기록을 하나 남겨본다  dependentFunction은 외부에서 의존성을 주입받은 후에 그 의존성을 실행한다.간단한 함수이지만, 실제로는 함수의 인자로 많은 의존성을 주입받아 사용할 수 있다.의존성 주입을 통해 함수 간의 의존성을 완전히 분리하고, 테스트 용이성과 코드의 재사용성을 높일 수 있을 것 같다.// 의존성 주입을 통해 함수를 실행하는 예시function dependencyFunction() { console.log("의존성이 하는 일");}function dependentFuncti..