[스파르타코딩클럽] 리액트 React.js week 1-1

서버와 클라이언트, 서버리스(Serverless)

서버는 웹사이트에 보여줄 것을 클라이언트에 전달하는 역할을 한다.

클라이언트는 우리가 웹사이트를 보는 도구이다.

서버리스(Serverless)는 내가 서버를 만드는 것이 아닌 이미 작업이 완료된 서버를 빌려 쓰는 것이다. 백엔드리스 X

 

DOM (Document Object Model)

DOM은 HTML 단위 하나하나를 객체(object)로 생각하는 모델이며 트리구조로 되어있다.

 

---

React

리액트(React)는 자바스크립트 라이브러리의 한 종류이다.

 

※ 자바스크립트 문법 알아보기

Class - 객체 지향 프로그래밍에서 특정 객체를 생성하기 위한 변수와 함수를 정의하는 틀

1. 클래스 구성

   class Cat {
   	// 생성자 함수
     constructor(name) {
   		// 여기서 this는 이 클래스입니다.
   		this.name = name; 
   	}
   
   	// 함수
   	showName(){
   		console.log(this.name);
   	}
   }
   
   let cat = new Cat('perl');
   cat.showName();
   console.log(cat);​

    //  생성자 함수: 클래스 인스턴스를 생성하고 생성한 인스턴스를 초기화 하는 역할(초기 값 설정)
   //  함수: 어떤 일을 하는 역할
2. 클래스 상속 - 이미 만들어 둔 클래스를 가지고 자식 클래스를 만드는 것
   

   class Cat {
   	// 생성자 함수
     constructor(name) {
   		// 여기서 this는 이 클래스입니다.
   		this.name = name; 
   	}
   
   	// 함수
   	showName(){
   		return this.name;
   	}
   }
   
   // extends는 Cat 클래스를 상속 받아 온단 뜻입니다.
   class MyCat extends Cat {
   	// 생성자 함수
     constructor(name, age) {
   		// super를 메서드로 사용하기
   		super(name); 
   		this.age = age; 
   	}
   	
   	// 부모 클래스가 가진 것과 같은 이름의 함수를 만들 수 있습니다.
   	// 오버라이딩한다고 해요.
   	showName(){
   		// super를 키워드로 사용하기
   		return '내 고양이 이름은 '+super.showName()+'입니다.';
   	}
   	
   	showAge(){
   		console.log('내 고양이는 '+this.age+'살 입니다!');
   	}
   }
   
   let my_cat = new MyCat('perl', 4);
   my_cat.showName();	//  "내 고양이 이름은 perl입니다."
   my_cat.showAge();​	//  내 고양이는 4살 입니다!

   //  super
       1. 메소드로 사용하기 (constructor 안에서) - 부모 constructor를 호출하며 인수 전달, this를 쓸 수 있게 해줌
       2. 키워드로 사용하기 - 부모클래스에 대한 필드나 함수를 참조할 수 있음

 

let, const와 scope

• 스코프(scope): 변수 선언 시, 유효 범위
• var: 함수 단위
• let: block 단위(변수: let으로 선언한 변수는 값 재설정 가능.)
• const: block 단위(상수: 한번 선언한 값은 재설정 불가능.) 
• function scope(){ const a = 0; let b = 0; var c = 0; // {} 증괄호 안에 든 내용을 블럭이라고 표현해요. if(a === 0){ const a = 1; let b = 1; var c = 1; console.log(a, b, c); //1,1,1 } // 앗! c는 값이 변했죠? // 그렇습니다. var는 함수 단위라서 if문 밖에서 선언한 값이 변했어요. // let과 const로 선언한 겂은 어떤가요? if문 안쪽 내용이 바깥 내용에 영향을 끼치지 않죠? console.log(a, b, c); //0,0,1 }​

 

=과 ==과 ===

• =: 할당, 어떠한 변수에 값을 할당 할 때
  eg. let a = 1;
• ==: 유형을 비교하지 않는 등차
  eg. 0 == "0"    //  true
• ===: 유형을 비교하는 등차
  eg. 0 == "0"    //  false

 

Spread 연산자 (Spread 문법) - 객체 안에 있는 요소들을 객체 바깥으로 꺼내주는 친구

let array = [1,2,3,4,5];
// ... <- 이 점 3개를 스프레드 문법이라고 불러요.
// 배열 안에 있는 항목들(요소들)을 전부 꺼내준다는 뜻입니다.
// 즉 [...array]은 array에 있는 항목을 전부 꺼내 
// 새로운 배열([] => 이 껍데기가 새로운 배열을 뜻하죠!)에 넣어주겠단 말입니다!
let new_array = [...array];

console.log(new_array);	//  (5) [1, 2, 3, 4, 5]

조건부 삼항 연산자 - 삼항 연산자는 if문의 단축 형태

• 사용법: 조건 ? 참일 경우 : 거짓일 경우
  

  let info = {name: "mean0", id: 0};
  
  let is_me = info.name === "mean0"? true : false;
  
  console.log(is_me);	//  true​

 

---

자바스크립트 공부가 부족해서 인지 쫌 어렵네..!

포기하지 말자!!