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

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

Babel ? Babel은 javascript 코드를 최신 문법으로 변환해주는 도구이다..! 오래된 브라우저 및 환경에서 최신 javascript 문법을 지원하지 않을 때 사용된다. 따라서 개발자들이 최신 문법을 사용해서 Babel을 사용해서 오래된 버전의 문법을 사용하는 코드로 배포할 수 있다..! Babel에는 주로 두가지 기능이 있다 Transpiling(문법 변환): Babel은 최신 자바스크립트 문법(ECMAScript 2015+ 또는 ES6+)을 오래된 문법으로 변환한다. 이를 통해 최신 문법을 사용하여 코드를 작성할 수 있다. React 코드를 작성할 때 최신 문법을 사용할 수 있게 한다! React의 JSX 코드를 Javascript로 변환!! JSX 코드를 React.createEleme..