React.js4 728x90 React #ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema. 에러문구 리엑트를 다루는 기술 9장 컴포넌트 스타일링 진행 중 sass 경로 간소화 설정 에러가 발생하였습니다. Failed to compile ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'includePaths'. These properties are valid: object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? } 에러 발생 원인 - CRA 버전.. 2020. 10. 12. React.js #JSX 인라인 스타일링 리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 적용할 수 없습니다. 그 대신 css 스타일을 자바스크립트 객체 형식으로 만들어 적용해야 하는데요. key는 카멜표기법(camelCase)으로 작성합니다. App.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 //(1) import React //리액트는 하나의 태그 안에 감싼 형태여야 합니다. //다중행의 태그로 선언하려할 땐 Fragment로 감쌀 수 있습니다. import React, { Component, Fragment } from 'react'; //(2) import css //style은 render(){}안에 .. 2019. 9. 3. React.js #리액트 시작 ※ 『리액트를 다루는 기술』을 읽고 공부한 과정을 기록합니다. 1장 리액트 시작 React.js 리액트는 자바스크립트 라이브러리로 유저 인터페이스를 만드는 데 사용합니다. 오직 V(View)만 신경 쓰는 라이브러리이며 리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것에 있습니다. 리액트 매뉴얼에는 다음 문장이 있습니다. 지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기 리액트는 뷰만 신경 쓰는 라이브러리이므로 기타 기능은 직접 구현하여 사용해야 합니다. 책에서는 코드 에디터 설치 후 git bash를 설치하지만 버전확인 순서를 위하여 git bash를 먼저 다운로드한 후 진행하였습니다. 실습환경 : Windows 10 Home / Node.js v8.11.1 / yarn 1.17... 2019. 9. 3. React.js #JSX란? JSX JSX는 리액트용이기 때문에 공식 자바스크립트 문법은 아니다. 자바스크립트의 확장 문법으로 XML과 매우 비슷하게 생겼으며, 이런 형식으로 작성된 코드는 나중에 코드가 번들링 되면서 babel-loader를 사용하여 자바스크립트로 변환한다. JSX 장점은 보기 쉽고 익숙하다는 것에 있다. JSX var hello = ( Hello world! ) JSX 바벨 변환 후 자바스크립트 형식 var hello = React.createElement( "div", null, React.createElement( "h1", null, "Hello world", React.createElement( "b" null, "!" ) ) ); 2019. 9. 1. 이전 1 다음
