sugar.kim

/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 키워드로 선언한다.무결성 제약 조건에 위배되었다. > 불변 변수는 값을..

1. Code Runner 플러그인 설치 후에 런 버튼 혹은 단축키로 js 파일 실행code runner 실행 단축키는 아래와 같음.macwindows[control] + [option] +[ n][control] + [alt] +[n]두번 째 방법은 node 명령어로 실행하기 - 실행하고 싶은 js 파일이 있는 경로포함해서 'node >' 하거나 js 파일이 있는 경로까지 이동 한뒤 'node >' 해주기.

https://code.visualstudio.com/ Visual Studio Code - Code Editing. RedefinedVisual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.code.visualstudio.com위의 링크에서 Downloads for macOS 버튼 눌러서 설치 진행하면 됨비주얼 스튜디오 코드 : 윈도우, 리눅스, macOS 등 대부분의 운영 체..

설치하려는 패키지와 로컬에 설치되어 있는 node 버전이 맞지 않아서 발생하는 에러다.이 에러를 해결하기 위해서는 크게 두 가지 방법이 있으나 나는 2번 버전으로 진행함.왜냐하면 지금 Do it 책으로 실습중이라 버전은 맞춰줘야 할 것 같아서.....두개 방법 다 정리하겠음. 1번. 로컬에 설치되어 있는 node 버전을 업데이트 하는 방법#노드 버전 확인node -v#캐시지우기npm cache clean -f#노드 버전 관리 플러그인 n 설치npm install -g n노드 버전별 설치 최신n latestlts 버전n lts안정 버전n stablenpm 업데이트 #npm 버전 업데이트npm i -g npm버전 맞춰서 설치 해야할 때 2번. 노드 버전 무시하고 강제로 설치하기. # yarn 설치yarn i..