Coding/React34 React - flicking(version >= ^4.0.0) flicking 버전이 4가 되면서 flicking의 css 효과로 제어 해야한다. 이전 버전에서는 flikcing이 보여지는 화면이 자동으로 이미지 하나씩만 보였지만 버전 4 이상이 되면서 css를 제어를 해야한다. # flicking-viewport와 flicking-camera 는 css에서 class로 제어가 가능하다.(기본적으로 flicking component를 사용하면 제공됨) flicking-viewport에서 overflow: hidden으로 내가 원하는 부분만 보여줄 수 있다. .flicking-viewport { overflow: hidden; width: 97.23%; } .flicking-camera { display: flex; } ##code import React, { use.. 2022. 3. 18. React - flicking(version >= ^4.0.0) 바뀐점 정리 flicking 버전이 4.0 이상이 되면서 공식문서에서 바뀐 부분을 정리가 되어 있다. ## HTML 구조 - SSR을 위해서 viewport와 camera element 사라짐 - viewport와 camera element를 직접 만들어서 사용해야 한다. - css 적용을 위해서 동일한 클래스 네임을 가져야 한다. - flicking-viewport, flicking-camera Panel 1 Panel 2 Panel 3 ## umd module 사용 방법 바뀜 - es.Flicking 에서 Flicking으로 바뀜 ## 사라진 옵션 1. CSS - SSR을 위해서 Ul 태그 지원 삭제 - gap 옵션 삭제 > css 값으로 대체 - zindex, overflow > .flicking-viewpor.. 2022. 3. 1. React - BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default React를 BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default error가 발생할 수 있다. webpack 버전이 5 이상이 되면서 더이상 지원하지 않는 것이기 때문에 webpack 설정이나 라이브러리로 해결할 수 있다. 항상 url, crypto, https, os, stream 에러가 항상 같이 발생이 한다. 그래서 라이브러를 모두 설치를 해줘야 한다. 라이브러리 설치 npm install --save-dev url crypto-browserify stream-http https-browserify os-browserify stream-browserify ##React webpack & b.. 2022. 2. 28. React - React cli webpack override 적용 React를 cli로 설치하고 나서 webpack 설정 값을 바꿀 필요가 있을 때가 있다. 우선, react-cli에는 이미 webpack 설정이 되어 있고, 값들이 지정되어 있다. 이 파일 덮어 씌울 수 있도록 도와주는 라이브러리가 있다. react-app-rewired 이다. npm install react-app-rewired ## 설정하기 React 가 설치되어 있는 최상단 디렉토리에 config-override.js 파일을 만든다. 그리고 나서 webpack을 설정을 해주면 된다. override 할 부분들은 객체 값을 변환 시키듯이 설정하면된다. 설정을 하고나서 return 값을 config를 준다. - config.module은 webpack의 모듈값을 덮어씌운다. - config.plugi.. 2022. 2. 27. 이전 1 2 3 4 5 6 ··· 9 다음 반응형
