sugar.kim

reduce함수는 리듀서(reducer) 함수를 실행하고 하나의 결과 값을 반환한다.reducer(리듀서)함수는 내장함수(메서드) 중 하나로 누적 값을 계산하는데 사용한다. (배열 형태를 순회하면서 단 하나의 값을 반환할 때 사용.)reducer(리듀서) 함수는 네개의 인자를 가진다. [1. 누산기(acc), 2. 현재값 (cur), 3. 현재 인덱스 (idx), 4. 원본 배열 (src)] : 함수의 반환 값이 누산기에 할당 되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 된다.실무에서 recude() 함수는 보통 배열을 특정 자료형으로 변환하는데 사용.reduce() JS 구문 arr.reduce(callback[, initialValue])(callback)콜백 함수 : 파라..

요즘 Do it! 리액트 프로그래밍의 정석 책에 맞춰서 실습 중....https://www.yes24.com/product/goods/87631428 Do it! 리액트 프로그래밍 정석 - 예스24실리콘밸리 리액트 클래스를 그대로 담았다!에어비앤비 프런트엔드 리드에게 배우는 리액트 프로그래밍!전 세계의 뛰어난 개발자들이 모여 일한다는 실리콘밸리! 실리콘밸리에서도 핫한 기업www.yes24.com하지만 실습 중에 자꾸 수많은 에러 메세지와 마주쳤다....yarn install도 안되고 일회성으로 --ignore-engines 옵션을 추가해서 모든 설치를 완료해도, 이 후에 실습에 필요한 패키지를 yarn add로 추가해주면 버전 에러가 자꾸 발생했다.... 그도 그럴만 한 것이 책에서 사용하는 nodeJS..

vscode  플러그인 설치 후 vscode 재실행 하기. 프로젝트 루트 경로에 [.prettierrc] 생성하고 코드 입력 스타일 정하기 jsx 파일 연 뒤에 ctrl + shitf + p 맥은 comm + shitf + p 눌러서 명령어 팔레트 열고 Format Document검색 후 엔터눌러서 실행하면 코드 스타일 적용이 된다. 아래는 파일 저장할 때 마다 자동 적용 되게 하는 방법. 위와같이 해주면 prettier 설정 적용이 잘됨.

/Users/{User}/{ProjectName}/node_modules/@storybook/core/node_modules/file-system-cache/lib/common/Util.js:23 return input.flat().filter((value) => !libs_1.R.isNil(value)); ^TypeError: input.flat is not a functionstorybook을 실행하면 자꾸 위의 에러가 났다. node 버전이 꼬여서 생긴 문제 같은데.... 지금 실습하는 노드 버전이 너무 낮아서 flat함수를 지원하지 않는 것 같았다. 그래서 그냥 해당 경로 모두 지워준 다음에 yarn 명령어 실행 후 story book 실행하니 문제없이 잘 실행됨..

현재 두잇 리액트 보면서 실습 중에 해결 한 에러 : material.css 는 문제 없이 잘 실행 되었는데 material.scss를 실행시키기 위해 node-sass 를 설치하는데 계속 해당 에러가 노출되었다. 더보기Error: Node Sass version 9.0.0 is incompatible with ^4.0.0.구글링 해보며 찾은 것들 다 해보아도 안되었는데(node-sass 이제 못쓰니까 삭제하고 sass 설치해서 써라. 아님 dart sass 설치해서 써라. 해보아도 계속 metarialize.scss를 사용하려면 node-sass를 설치하라는 에러가 떴다.)결론은 검색 결과는 도움이 안 되었고 ... node version에 맞춰서 node-sass를 설치해서 쓰거나, node-sass..

해당 내용은 컴포넌트의 생명 주기와 관련된 내용이다.  React Component Lifecycle (컴포넌트 생명 주기)컴포넌트는 생명주기마다 함수를 가지고 있는데 이 함수들을 이용하면 특정 시점에 원하는 동작을 하도록 만들 수도 있다.아래는 App컴포넌트의 자식 컴포넌트인 LifeCycleExample 컴포넌트를 만들sugarslayer.tistory.com아래 예제 코드를 통해서 상위 컴포넌트에서 전달받은 프로퍼티 값을 어떻게 동기화 할 수 있는지 살펴보자. 리액트 서버 구동 시에 최초로 실행되는 index.js에 App 컴포넌트 대신에 AppMakeCounter 컴포넌트를 만들어 예제 구현하였음. import React, { Component } from 'react';import Counter..

컴포넌트는 생명주기마다 함수를 가지고 있는데 이 함수들을 이용하면 특정 시점에 원하는 동작을 하도록 만들 수도 있다.아래는 App컴포넌트의 자식 컴포넌트인 LifeCycleExample 컴포넌트를 만들어 생명주기 함수의 흐름을 살펴 보았다.//단축키 RCFC하면 생명주기 함수와 함께 생성된다고.....import React, { Component } from 'react';class LifeCycleExample extends Component { /** getDerivedStateFromProps(props,state) * 1. 정적 함수이다. * 2. 인자로 props,state 전달할 수 있다. * 3. 인자로 전달된 props로 상위 컴포넌트에 전달된 값을 가져올 수 있다. * 4..

1. 템플릿 문자열 [template stirng]작은 따옴표(') 대신 백틱(`)으로 문자열을 표현병합연산자(+)를 사용해서 문자열+문자열, 문자열+변수 하던것을 그냥 백틱 안에 `문자열 문자열 ${변수}` 형태로 사용가능 2. 전개 연산자 [spread operator]독특하면서도 매우 유용한 문법나열형 자료를 추출하거나 연결할 때 사용한다. 사용 방법은 배열이나 객체 변수명 앞에 마침표 세 개(...)를 입력한다. 다만, 배열[], 객체{}, 함수 인자() 표현식 안에서만 사용해야 한다. 3. 가변변수와 불변변수 가변변수 : 값을 수정할 수 있는 변수, let 키워드로 선언한다.불변변수 : 값을 수정할 수 없는 변수, const 키워드로 선언한다.무결성 제약 조건에 위배되었다. > 불변 변수는 값을..