React.JS : Node 기반의 Fronte-End 라이브러리

Node.JS

• 브라우저 위에서만 동작하던 JS를 브라우저 없이 단독 프로그램으로 동작할 수 있게 해준 기적의 런타임

npm : Node Package Manager

JS ES6 대표 문법

• const, let 변수

  • 기존의 var 선언 변수는 중복 선언 등에 대한 보호가 없음

    var a = 1;
    for(var i = 0; i < 10; i++){
    	var a = 2;
    }
    
    console.log(a);
    
    // 결과
    // a 변수가 for 내에서 재선언되고, 2로 할당되었으나,
    // for 이전에 선언된 외부의 a 변수에도 2가 저장됨
    

  • let 선언 변수는 중복 선언에 대한 보호가 추가되고, const 선언 변수는 값을 수정할 수 없는 상수 변수로 지정됨

    let a = 1;
    for(let i = 0; i < 10; i++){
    	let a = 2;
    }
    
    // 결과
    // for 내에서 a 변수가 재선언되면서,
    // 이미 존재하는 변수라는 오류가 나면서 동작하지 않음
    

• 템플릿 리터럴

  • 기존의 문자열 포매팅 방식

    var month = 7;
    var word = "오늘은 " + month + "월 입니다.";
    

  • 새로운 문자열 포매팅 방식

    let month = 7;
    let word = `오늘은 ${month}월 입니다.`;
    

• 화살표 함수

  • 고전적인 함수 선언 방식 : var 변수와 같이 재선언으로 덮어씌워질 수 있음

    function sum(a, b){
    	return a + b;
    }
    

  • 새로운 화살표 함수 선언 방식 : const 형식으로 선언되어 추후 수정이 불가한 변수로 취급

    const sum = (a, b) => {
    	return a + b;
    }
    

Node 기반 프론트엔드 삼대장 : React.JS / Angular / Vue.JS

• 왜 React.JS인가
  • Facebook이 개발한 이후로, 가장 점유율이 높은 JS 프론트엔드 라이브러리
• React.JS vs Vanilla Web