현재 버전 확인 # node -v v10.24.0 npm 캐쉬 삭제 # npm cache clean -f npm WARN using --force I sure hope you know what you are doing. node 버전을 관리하는 n 모듈 설치 # npm install -g n /usr/local/bin/n -> /usr/local/lib/node_modules/n/bin/n + n@7.3.1 updated 1 package in 2.018s n 모듈을 통해 최신 버전 설치 # n latest installed : v16.8.0 (with npm 7.21.0) 업데이트 후에도 버전이 그대로일 경우, 링크를 재 설정해주자 # ln -sf /usr/local/n/versions/node/16...
모든 컴포넌트는 생명주기 메서드를 가지며, 크게 마운트(mount) / 업데이트(update) / 언마운트(unmount) 의 개념으로 구분됩니다. 아래 생명주기 도표를 참고하면서, 생명주기 메서드에 대해서 알아보겠습니다. render( ) 클래스 컴포넌트 생성 시, 필수로 생성해야 하는 메서드로 호출될때마다 동일한 결과를 반환해야 하며, 브라우저와 직접적인 상호작용을 하지 않습니다. constructor( ) 생성자로 컴포넌트 생성시 처음 실행됩니다. 단, 바인딩, state 초기화 작업이 없다면, 생성하지 않아도 됩니다. ( * 메서드 생성 시, super(props)를 반드시 정의 해줘야 합니다.) getDerivedStateFromProps( ) 컴포넌트를 마운트할 때와 업데이트 할때 render..
== Equal Operator / 변수값(value)을 기준으로 비교연산 한다. console.log(1=="1"); // true console.log(0=="0"); // true console.log(1==true); // true console.log(0==false); // true console.log(null==undefined);// true === Strict Equal Operator / 변수값(Value)과 자료형(Type)을 기준으로 비교연산 한다. console.log(1==="1"); // false console.log(0==="0"); // false console.log(1===true); // false console.log(0===false); // false cons..
비구조화 할당 배열 안에 있는 값을 쉽고 간결하게 사용할 수 있는 문법 구조입니다. 기존 방식 보다 선언이 쉬우며, 가독성이 높습니다. // 기존 배열 문법 구조 const array = ['a', 'b', 'c']; const one = array[0]; const two = array[1]; const three = array[2]; console.log(one);// a console.log(two);// b console.log(three);// c // 비구조화 문법 구조 const array = ['a', 'b', 'c']; const [one, two, three] = array; console.log(one);// a console.log(two);// b console.log(three)..
Reactjs code snippets VS Code를 사용 중이라면, Reactjs code snippets 확장 프로그램을 통해 , 컴포넌트 생성을 쉽게 할 수 있다. rsc : 함수형 컴포넌트 코드 생성 설치 후, Component 파일 생성하여 에디터에 'rsc(함수형 컴포넌트)'를 입력한다. Component 파일명에 맞는 컴포넌트 코드가 자동으로 생성되는걸 확인할 수 있다. rcc : 클래스형 컴포넌트 코드 생성 설치 후, Component 파일 생성하여 에디터에 'rcc(함수형 컴포넌트)'를 입력한다. Component 파일명에 맞는 컴포넌트 코드가 자동으로 생성되는걸 확인할 수 있다.
Math.random 0 ~ 1 사이의 랜덤한 숫자를 반환합니다. 단, 1은 포함되지 않는 부동소수점의 수를 발생 시키기 때문에 정수형 데이터로 변환해야 합니다. Math.random(); // 함수 실행 시, 아래와 같은 결과값 반환 0.787910016396766 0.9811818120683229 0.018731720450270606 0.26159482631296616 0.4618645356440654 0.5720506552882538 0.8146460036266621 Math.floor 입력값을 내림한 가장 작은 정수값을 반환 합니다. Math.floor(-1.7) : -2 Math.floor(-1.5) : -2 Math.floor(-1.3) : -2 Math.floor(-1) : -1 Math.f..
Script - mouseover / mouseout 대부분 script 를 이용하여, selector를 지정하여 mouseover / mouseout 이벤트를 구현 한다. // jquery - mouseover / mouseout $(".card").on({ "mouseover":function(){ console.log("Mouse Over"); $(this).css({'background-color':'red'}); }, "mouseout":function(){ console.log("Mouse Out"); $(this).css({'background-color':'white'}); } }); CSS - :hover CSS :hover selector 를 이용하면, 마우스 오버(mouseover) ..