전체 글

lodash curry, flow

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

webpack으로 React 프로젝트 빌드해보기 =)

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

Babel

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

Loader / Plugin

Loader webpack은 기본적으로 javascript와 JSON 파일만 이해할 수 있기 때문에 webpack이 css, jpg등 다른 형식의 파일을 이해할 수 있도록 처리한다. Loader는 test, use두가지 속성을 가지고있다. 아래에서 첫번째 rule을 살펴보면 sass, scss, css 파일을 sass-loader, css-loader를 사용하여 처리한다는 의미이다! import, require 문에서 sass, scss, css 파일이 발견되면 번들에 추가하기 전에 sass-loader, css-loader로 변환을 먼저해버려! sass-loader로 처리된 리소스가 css-loader로 전달됨! -> 역순으로 처리 module.exports = { entry: './src/index...

Entry(index.js) / Output

Entry webpack이 dependency 그래프를 생성하는 최초 진입점이며 파일 경로이다. 웹팩의 번들링이 시작되는 시작점 default 경로로는 ./src/index.js로 설정이 되어있다. // webpack.config.js // 웹팩을 실행하면 index.js부터 빌드를 수행한다! module.exports = { entry: './src/index.js' } entry에 들어가는 파일에는 웹 애플리케이션의 시작점과 구조 및 내용이 담긴다. 예를들어 react의 index.js파일을 살펴보면 app.js부터 렌더링을 한다는 것을 알 수 있다! //index.js import React from 'react'; import ReactDOM from 'react-dom'; import './in..

webpack

webpack? 웹팩은 엄청 많이 쓰이는 오픈 소스 모듈 번들러 라이브러리이다. 번들러(Bundler)? 번들러는 여러 개로 나뉜 모듈을 하나로 묶어주는 도구이다. 의존성이 있는 것들을 찾아서 그룹핑을 해주는 도구! 웹팩은 IIFE를 사용해서 번들링을 해서 스코프 충돌에 대한 걱정 없이 안전하게 스크립트 파일들을 연결하거나 결합한다! dependency graph를 생성하여 빌드 거대한 자바스크립트 소스코드와 대규모 의존성을 가지고 있는 대형 웹 애플리케이션이 등장함에 따라, 각각의 세분화된 모듈 파일이 무작위로 늘어나게 되었다. 이 모듈 단위의 파일들을 호출하여 브라우저에 띄워야 하는데, 자바스크립트의 특성에 따라 발생하기 쉬운 각 변수들의 스코프 문제를 해결해야 하고, 각 자원을 호출할 때 생겨나는 ..