Programming/FE Tooling (6) 썸네일형 리스트형 Webpack5 기반 프로젝트에 Storybook 설정하기 Storybook6.2 버전부터는 Webpack5를 지원한다. 기존 방법과 달리 --builder 아규먼트를 추가하여 실행해야 한다. ㅇ Storybook 신규 설치 $ npx sb@next init --builder webpack5 ㅇ Storybook 6.2가 설치되어 있는 경우 $ npm i -D @storybook/manager-webpack5@next * 추가 자료 - https://storybook.js.org/blog/storybook-for-webpack-5 - https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324 Babel, Babel Preset, Polyfill에 대하여 babel 정의 자바스크립트는 인터프리터 언어이다. 즉, 브라우저가 코드를 해석하기 때문에 컴파일할 필요가 없다. 그러나 모든 브라우저가 ES Next(ES6 이상)를 지원하지 않는다. 그리고 어떤 브라우저도 JSX를 지원하지 않는다. bable은 ES Next, JSX를 다양한 호스팅 환경에서 사용할 수 있도록 지원하는 컴파일러이다. 목적 ES6 이후의 코드를 호환 가능한 코드(ES5)로 변환하여 다양한 호스팅 환경에서 사용할 수 있게 해 준다. ES5 : 모든 브라우저에서 지원 ES6 : 대부분의 브라우저에서 지원 ES7~ : 호환성이 떨어짐 기능 Syntax 변환 Polyfill 소스코드 변환 babel preset 바벨은 처리할 수 있는 변환의 종류를 프리셋(preset) 모듈로 분리했다. 개발자.. grunt-contrib-copy : Copy files from root of project to dist Set cwd to '' instead of '/'. copy: { entry: { expand: true, cwd: '', AngularJS Bundle 만들기, 그리고 Minification. 2019년에 AngularJS 디렉터리 모범사례에 대하여 조악한 번역글을 올렸는데, 조회 수가 꾸준히 유지되고 있다. 생각보다 AngularJS를 유지하고 있는 프로젝트들이 여기저기 남아있나 보다. 리액트, 뷰에 비해 조악한 생태계에서 조금이라도 도움이 되기 위해, 레거시 프로젝트를 유지 보수하며 정리한 내용을 포스팅으로 남기기로 결심했다. 목표 Task Runner를 실행해서 AngualrJS 프로젝트에 - 자바스크립트, CSS 압축 (Minification) - 자바스크립트, CSS 번들 만들기 - 파일명에 Hash Prefix 붙이기 를 적용한다. Prerequisite npm install ... --save-dev 명령어를 사용해서 아래 패키지를 설치한다. 설명은 간략하게 작성했다. 자세한 정보.. npm package.json에서 사용하는 틸드(~), 캐럿(^)에 대하여 package.json에서 빈번하게 사용하는 틸드, 캐럿에 대한 명쾌한 설명이 부족해서 정리했다. 캐럿은 Semantic Versioning(이하 SemVer, 유의적 버전) 규약을 따르므로 추가로 공식 문서를 읽어보는 것도 좋다. 구분 설명 예시 틸드(~) x.y.z 중 z 범위 내에서 버전 업데이트 ~1.1.0 : 1.1.0 캐럿(^) x.y.z 중 x 이하 하위호환성이 보장되는 범위 내에서 버전 업데이트 ^1.1.0 : 1.1.0 ※ 예외) 캐럿도 pre-release 버전( AngularJS 모범 사례 : 디렉토리 구조 잡기 https://scotch.io/tutorials/angularjs-best-practices-directory-structure AngularJS Best Practices: Directory Structure We spend a lot of time writing code. In the early phases of a project, the directory structure doesn't matter too much and many people tend to ignore best practices. In the short term, this allows the developer to code rapidly, but in the long term will af scotch.io 위 글이 원본이며, 아.. 이전 1 다음
