본문 바로가기

coding/react17

[React] webpack.config.ts에서 이모션 바벨 플러그인 설정 const config: Configuration = { ... module: { rules: [ { options: { env: { development: { plugins: [['@emotion/babel-plugin',{sourceMap: true}]] }, production: { plugins: ['@emotion/bable-plugin'], } } } } ] } ... } 플러그인 설정은 [](배열)로 플러그인을 한번 감싸고 두번째 인자로 설정값을 입력하면 됨. - sourceMap: 활성화할 경우, 자바스크립트 파일의 스타일 선언으로 직접 이동함. 이모션 바벨 플러그인 2021. 9. 3.
[Apollo/React] Fragments fragments는 여러 쿼리를 공유 할 수 있다. Customer 객체에서 사용할 수 있는 CustomerFeild: export const CUSTOMER_FEILD = gql` fragment CustomerFeild on Customer { _id name birthdate gender job } `;스프레드 구문을 통해 참조하는 쿼리에 fragments를 포함 할 수 있다. query GetPerson { people(id: "7") { ...NameParts avatar(size: LARGE) } }...NameParts가 갖고있는 정보는 firstName과 lastName이다. 각 스프레드구문 덩어리들은 임포트로도 불러서 사용할 수 있다. import { gql } from '@apo.. 2021. 3. 25.
[React] Element UI 체크박스 적용 onChange에서 매개변수로 의 name값을 받게 되어있는데, 에 name속성을 사용하니까 빨간줄이 생기면서 에러 출력... No overload matches this call. index.d.ts 파일을 까보니까 name이 없었다... 프레임워크 UI가 이럴수가 있구나...ㅎ 더보기를 열면 주석해놓은 name 부분이 없어서 추가한 것. 더보기 // Checkbox interface CheckboxProps extends ElementReactLibs.ComponentProps { label?: string trueLabel?: string | number falseLabel?: string | number disabled?: boolean checked?: boolean // name?: strin.. 2021. 3. 24.
[React] parcel@1.12.4 오류로 인해 1.12.3으로 다운그레이드 파셀로 설치되어 관리되고 있는 리액트 프로젝트에 디펜던시로 설체되어 있는 1.12.4로 업그레이드 된 후 빌드하니깐 favicon.ico: Invalid Version: undefined 위와 같은 에러가 출력되면서 빌드가 안됨ㅠㅠ 구글링해보니깐 parcel@1.12.4 버전에 문제가 있었다. 바벨@7.13.9 버전의 babel API가 파셀에 의존성 제공을 안하는 그런 문제라고하는데,,, 그래서 다운그레이드가 필요했다. 일단 파셀을 글로벌로 설치했을 경우 parcel 명령어를 통해서 버전을 확인해볼 수 있다. parcel --version 1.12.4 1.12.4 버전을 삭제하고 1.12.3을 설치해보자. npm uninstall -g parcel-bundler npm install -g parcel-.. 2021. 3. 23.