웹(56)
-
Loader
로더(Loader) 웹팩은 모든 파일을 모듈로 인식(Javascript, css, image, 폰트 등) import 구문을 통해 자바스크립트 코드 안으로 가져올 수 있음 타입스크립트 같은 다른 언어를 자바스크립트 문법으로 변환해주거나 이미지를 data URL 형식의 문자열로 변환 이러한 기능이 가능한 이유는 Loader 의 역할 로더 등록 webpack.config.js module.exports = { ... // 로더는 모듈 객체에 rules 에 추가 가능 module: { rules : [ // 객체 선언 { test: /\.js$/, // 로더가 처리해야할 파일들의 패턴(정규 표현식) use: [ // 사용할 로더 명시 path.resolve('./test-loader.js') ] } ] } }..
2020.07.09 -
Webpack - 기본 환경
환경 요건 웹팩으로 빌드한 자바스크립트 로딩 package.json 생성 npm init package.json - bulid script 추가 { "name": "webpack-test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack" }, "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.43.0", "webpack-cli": "^3.3.12" } } webpack, webpack-cli 설치 wepback : Module로 연결된 여러개의 자바스크립트 파일을 하나로 합쳐주는 역할(bundle) webpack-cli..
2020.07.07 -
Module 개념
정의 프로그램을 구성하는 내부의 코드가 기능별로 나뉘어져 있는 형태, 어떤 기준을 통해 코드가 분리되어 있는 상황에서 서로를 참조 재사용성과 프로그램 관리 차원의 장점 Module 표준 Module 시스템이 제공되는 환경은 파일을 하나의 모듈로 인식하고 자신의 코드를 외부에서 참조할 수 있게 하거나 다른 Module 로 부터 특정 기능을 사용할 수 있게 해주는 keyword를 제공할 수 있는 환경 Module 을 사용하는 방법은 Module 이 어떤 표준을 따르냐에 따라 달라짐 Module 시스템은 여러가지 존재 CommonJS(Node.js) ESM(ECMAScript 2015 ~) 1. CommonJS(Node.js) Module Keyword: 가져오기 require (모듈의 경로) Module k..
2020.07.07 -
Webpack 개념
Webpack 개념 Webpack은 프로젝트의 구조를 분석하고 자바스크립트 모듈을 비롯한 관련 리소스들을 찾은 다음 이를 브라우저에서 이용할 수 있도록 하나의 파일로 합쳐주는 모듈 번들러(Module Bundler) Module로 연결된 여러개의 자바스크립트 파일을 하나로 합쳐주는 역할(Bundle) 등장 배경 예전에는 웹페이지에서 페이지를 보여주기 위한 수많은 JS 파일을 서버로 요청 파일이 여러개로 분할 되어 있으면 변수 스코프를 생각해서 개발 필요 브라우저가 이해할 수 있는 코드로 변환 작업 필요 Webpack 의 장점 코드 합축 및 최적화 브라우저가 이해할 수 있는 코드로 변환 작업(Babel 을 통한 코드 변환 작업) 모듈 단위 개발 가능 스코프에 신경 쓰지 않고 개발 가독성과 유지 보수 효율 ..
2020.07.07 -
Redux를 사용하는 이유
Redux를 사용하는 이유 중앙집중적인 데이터 Store를 통해 애플리케이션을 쉽게 개발 관심사의 분리를 통한 코드의 복잡성 감소 Redux Dev Tools(상태에 대한 버전 관리) 예제) 컴포넌트 클릭 시, 컴포넌트들의 색을 전체 변경하는 코드 1) 리덕스가 존재하지 않는 코드 컴포넌트가 기하급수적으로 늘어난다면, 관리해야하는 포인트가 너무 많음(강한 종속 관계) 100개의 컴포넌트, 10000개의 코드 수정 필요(색 변경) 2) 리덕스 사용 Redux Store에서 State 관리(중앙집중적으로 데이터 관리) Action을 Store에 Dispatch를 통해 상태 변경 요청 Reducer에서 관련 컴포넌트 상태 변경 상태 변경에 따른 각각의 컴포넌트 리렌더링(Subscribe) => 관심사의 분리를..
2020.07.02 -
Redux 정의
Redux 정의 상태 관리 라이브러리(중앙 집중적 데이터 저장 방식) 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜 더운 효율적으로 관리 컴포넌트 서로 간의 상태를 공유할 때, 손쉽게 상태 값을 전달 미들웨어라는 기능을 통해 비동기 작업, 로깅등의 확장 작업들을 쉽게 할 수 있도록 도와줌 예제) 복잡한 컴포넌트 구조 E 컴포넌트의 doSomething 이라는 함수에 의해 something 이라는 상태를 E -> B -> Root 전달, Root 에서는 A -> C -> F 로 전달 props 가 필요한 곳으로 전달되게 하기 위하여, 실제로는 props 가 사용되지 않지만 전달을 위해 거쳐가야 하는 것은 리렌더링 할 때 비효율적 예제) 리덕스를 사용 상태와 변화 로직이 저장되어 있는 스토어를 통해..
2020.07.01