sugar.kim

현재 두잇 리액트 보면서 실습 중에 해결 한 에러 : 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..

틸드는 간단히 말하면 현재 지정한 버전의 마지막 자리 내의 범위에서만 자동으로 업데이트한다.~0.0.1 : >=0.0.1 ~0.1.1 : >=0.1.1 ~0.1 : >=0.1.0 ~0 : >=0.0 그래서 다양한 방식으로 버전을 명시했을 때 위와 같은 범위내에서 자동으로 업데이트한다. 이 방식은 꽤 다루기가 편해서 그동안 유용하게 사용하고 있었다. Node.js도 그렇고 npm의 모듈은 모두 SemVer를 따르고 있다. SemVer는 MAJOR.MINOR.PATCH의 버저닝을 따르는데 각 의미는 다음과 같다.MAJOR version when you make incompatible API changes,MINOR version when you add functionality in a backwards-co..