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

왜씀 ? flow와 curry 함수를 사용하면 코드를 더 간결하게 작성하고 함수형 프로그래밍의 개념을 적용할 수 있다. curry 커링은 함수형 프로그래밍에서 일반적으로 사용한다 부분 적용(Partial Application): 커링된 함수는 필요한 인수를 부분적으로 적용할 수 있습니다. 이를 통해 원하는 시점에 나머지 인수를 전달하여 함수를 완전히 호출할 수 있다. 재사용성 향상: 커링된 함수를 미리 부분 적용하여 새로운 함수를 생성할 수 있으므로, 유사한 동작을 하는 여러 함수를 쉽게 만들 수 있다. 가독성 향상: 커링된 함수를 사용하면 함수 호출이 연쇄적으로 이루어지므로 코드의 가독성이 향상된다. 커링은 함수를 여러 개의 단일 인수를 받는 함수들로 분해하는 과정이며, Lodash의 curry 함수는..

Why?CRA는 노맛..무엇보다 실무에서 사용하고 있는데 어떻게 번들링 도구들이 동작하고 어떠한 plugin들이 실제로 상호작용을 통해 dev, prod를 이루는지 알 수 없다..!일하면서 그냥 react 개발자로 제한되는 기분이였어요 .. =(그리고 사실 너무 무거움그래서 경험삼아 + 앞으로도 사용하기 위해 간단하게나마 직접 webpack을 사용해서 프로젝트를 빌드해보도록 하겠다!  step1. npm init & 의존성 설치프로젝트를 생성한 후 프로젝트를 초기화하고 필요한 의존성을 설치하자플러그인도 설치가 필요하지만 우선 구동에 필요한 필수적인 요소들만 설치해보자~npm init (프로젝트 초기화 -> package.json 생성)npm init -yReact- React (react):React는 ..