Study Note/React17 728x90 React #리듀서 함수 생성 리듀서 변화를 일으키는 함수. 리듀서 함수 생성 파라미터를 두 개 받는 리듀서를 생성하는 예제소스입니다. 첫 번째 파라미터는 현재 상태이고, 두 번째 파라미터는 액션 객체입니다. jsbin.com 에서 간단히 실습합니다. html javascript //12.2.2 액션과 액션 생성 함수 //액션 : 스토어에서 상태 변화를 일으킬 때 참조하는 객체. type값 필수 // 대문자, 밑줄을 조합하여 만듭니다. const INCREMENT = 'INCREMENT'; //숫자의 값을 더하는 액션 const DECREMENT = 'DECREMENT'; //숫자의 값을 빼는 액션 const increment = (diff) => ({ type: INCREMENT, diff: diff }); const decreme.. 2020. 10. 18. 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. error #yarn: 'yarn' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 오류해결 오류 현상 yarn 을 설치하였으나 vscode의 터미널로 yarn start 가 실행되지 않았습니다. 시도한 경로 : 실행하고자 한 react 프로젝트 경로 yarn: 'yarn' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 오류 해결 방법 내컴퓨터 속성의 yarn 환경변수를 추가해줍니다. 경로는 Yarn 이 설치된 경로로 정의합니다. 1. 고급 시스템 설정 > 고급 > 환경변수 클릭 2. 환경 변수 > 시스템 변수 > Path 더블 클릭 3. 환경 변수 편집 > 새로 만들기 > 찾아보기 > C:\Program Files (x86)\Yarn > 확인 2020. 10. 4. 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. Git Bash #명령어 정리 리액트를 공부함에 있어 사용 중인 커맨드 라인 git bash의 명령어를 정리하였습니다. [파란글씨]는 명령어가 아닌 사용자가 기입하여야할 부분입니다. 공백에 유의하여 작성합니다. - 커맨드창 명령어 - 커맨드창 화면 초기화 Ctrl + L 명령어 맨 앞 / 맨 뒤로 이동 Ctrl + A / Ctrl + E 디렉토리 이동 $ cd [이동할 하위 디렉토리명] 디렉토리 생성 $ mkdir [현재 경로에 생성할 디렉토리명] 디렉토리 삭제 $ git rm -r [삭제할 디렉토리명] 디렉토리 목록 조회 (2 가지) $ dir $ ls 파일 내용 조회 $ cat [파일명] - 깃허브 계정정보 세팅 - 리모트 저장소에 Github 사용자 정보 세팅 $ git config [--global] user.name "Ful.. 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 2 다음
