건망증 환자의 뇌장하드

Problem 디자인 시스템 구축을 위한 UI 프로젝트의 개발을 진행. 최초 개발 시 컴포넌트별 색상의 변경이 있을 것이라는 고려는 없는 상태로 개발 진행하여 version1에서 지원해야 할 컴포넌트들이 개발됨. light 테마만 지원하는 프로젝트가 개발됨 Use case 신규 개발 프로젝트에서 디자인 컴포넌트를 제공하기 위해 개발 하던 도중 고객사의 요청이 다크 테마를 지원해야 된다고 하여 디자인이 변경됨 따라서 기존에 개발된 컴포넌트의 색상때문에 이용할 수 없는 상황이 발생함. 이용할 수 있도록 컴포넌트의 테마를 주입하는 기능이 필요함. Condition Dark 테마를 지원해야 함. 고객사에서 요청하는 프로젝트의 Dark테마 Color set과 추후 사내 플랫폼에서 사용할 Dark테마의 Color ..

이미 개발되어 있는 컴포넌트에 추가적인 디자인, 기능이 필요한 경우 문제점 이미 개발되어 있는 컴포넌트라면 외부에서 사용하고 있을 가능성이 높음 만약 미묘한 디자인 또는 기능의 변경이 있더라도 해당 컴포넌트를 사용하는 모든 부분에서 장애를 일으킬 수 있음 해결방안 개발되어 사용되고 있는 컴포넌트에 새로운 기능을 넣지 않도록 한다. 완벽한 기획과 디자인이 선행되어야 하는데 현실적으로 불가능함. 모든 가능성을 열어두고 확장성이 무궁무진한 코드를 작성한다. 실현 불가능함. 같은 ui의 컴포넌트를 버전별로 나누어 개발한다. npm을 이용한 버전 관리를 진행한다. 사내에서만 사용해야 되기 때문에 private 저장소가 필요하다. 컴포넌트와 기능은 완전히 분리할 것 이를방지하기 위해 기능은 컴포넌트 외부에 일임하도..

sass는 css에서 조건분기 함수 등을 사용할 수 있도록 문법을 제공한다. sass확장자와 scss확장자 2가지가 있다. 각 확장자에 따라 작성하는 문법이 다르다. scss모듈을 사용할 수 있도록 webpack에 설정해볼것이다. 이를 위해 sass-loader, node-sass를 설치해야 된다. sass-loder node-sass yarn add sass-loader node-sass -D loader-chaning sass파일을 css파일로 컴파일 컴파일 된 css파일이 css-loader를 통해 build sass-loader가 먼저 작동 loader-chaning은 use[index1, index2, ..., indexN]배열의 index가 큰 loader부터 순서대로 진행된다. css 모듈 ..

url-loader는 file-loader와 출력의 형태가 다르다. file-loader는 파일을 그대로 출력해주는 역할을 한다면 url-loader는 파일을 data uri문자열형태로 변환해준다. url-loader 설정 yarn add url-loader -D webpack의 module에 loader를 설정한다. module.exports = { ..., module: { rules: [ ..., { test: /\.svg$/i, use: [{ loader: 'url-loader', options: { limit: 8192 } }] } ] }, ... } svg파일에 대한 설정을 했다. options의 limit는 파일 크기의 제한을 두는 것이며, byte단위로 설정한다. 위에서는 8kb정도로 설정..

모듈 내에서 import또는 require로 파일을 모듈로 읽어들이기 위한 loader이다. file loader는 build 시 webpack에서 설정된 Output 디렉토리로 파일을 복사한다. file loader 설정 yarn add file-loader -D webpack에서 image파일에 대한 설정을 하기위해 module의 rules에 새로운 원소를 추가해야 된다. module.exports = { ..., module: { rules: [ ..., { test: /\.(png|jpe?g|gif|tif?f|raw|bmp)$/i, use: [{ loader: 'file-loader', options: { name: '[contenthash].[ext]' } }] }, ... ] }, .... }..

Webpack으로 설정한 소스코드 최적화에 관련된 설정을 Production mode(배포)에서만 진행될 수 있도록 분리 코드 최적화 설정 정보 https://kmj24.tistory.com/175 webpack 소스 코드 최적화 Minification & Mangling - 코드를 압축 및 난독화 - Application에 관여하지 않는 문자열 제거(주석 등) - 들여쓰기, 띄어쓰기와 같은 공백문자 제거 - 분기문을 3항연산자로 표현 Webpack 설정 HTML -.. kmj24.tistory.com 분리를 통해 최적화 관련 설정은 배포할 때만 진행 되며 개발 과정에서는 수정 반영 시간이 단축되어 쾌적한 환경으로 개발이 가능해진다. 환경 별 설정 파일 분리 각 환경 별 (Dev, Prod) 설정을 구분..

Minification & Mangling - 코드를 압축 및 난독화 - Application에 관여하지 않는 문자열 제거(주석 등) - 들여쓰기, 띄어쓰기와 같은 공백문자 제거 - 분기문을 3항연산자로 표현 Webpack 설정 HTML - html-webpack-plugin에서 html파일의 minifiaction설정이 가능 module.exports = { ..., plugins: [ new HtmlWebpackPlugin({ title: 'Webpack', template: './template.hbs', meta:{ viewport: "width=device-width, initial-scale=1.0" }, minify:{ removeComments: true, useShortDoctype: t..

Caching은 자주 사용하는 데이터를 저장해 두고 client - server 통신의 비용을 줄일 수 있는 시스템이다. Webpack을 이용하여 Caching설정을 할 수 있다. module들을 bundle.js로 만들면, 브라우저는 bundle.js를 받고 web application을 동작시키게 되는데, 이때 설정한 내용으로 bundle.js를 만들게 되면 브라우저는 같은 이름으로 bundle.js을 호출한다. 브라우저가 caching을 구별하는 기준은 url이다. 그래서 load하는 resource의 이름이 같을 경우 caching을 이용하기 때문에 이전 bundle.js의 결과로 보이게 되어, 파일이 수정이 되었더라도 수정이 안된것 처럼 보여진다. 이런 문제를 방지하기 위해 bundle.js에 ..