21.06.25 React 기본주차 시작, 웹 동작개념 및 class

내 주특기인 프론트엔드 시작한날이다.
스파르타코딩클럽 프론트엔드 리엑트 강의 1주차 강의 다 듣고 제출하는거까지가 오늘 당장의 과제였다ㅏㅏ,,,

Component를 만드는 js파일을 따로 하나씩 만들고 component를 만드는 class형, 함수형 두개를 갖고 만들었다.

각각의 컴포넌트 js 파일을 App.js로 import 하고 뭐시기 틀을 잡는 개념강의가 1주차 였다.
리액트를 돌리기위해 nvm, npm, yarn 이거 설명에서 아직 확실히 개념잡히진 안았지만 몇번 써보니 알아 가고있는거 같고...

과제하러 20,000!

1주차 내용

웹의 동작 개념 - HTML만 받는 경우 :

우리가 보는 웹페이지는 모두 서버에서 미리 준비해 둔 데이터들을 "받아서",
"그려주는"것이다. 브라우저가 하는 일은

• 요청을보내고
• 받은 HTML파일을 그려주는 일을 한다!

요청을 보낸다는 것은 서버가 만들어 놓은 창구 즉, API에 요청을 보내는 거다💪🏽

웹의 동작 개념 - 데이터만 받는 경우 :

항상 HTML을만 내려주는 것이 아닌 데이터만 내려 줄 때가 더 많다!!
어떻게?

• 보고 있던 페이지에 데이터만 받아 끼우면 되기때문이쥬?!
• 데이터만 받을때에는 JSON형식으로 받는다!!👸🏽
  
  위에 사진처럼!

Class

- 클래스가 뭐쥬?

객체 지향 프로그래밍에서 클래스란
특정 객체를 생성하기 위해 변수와 함수를 정의하는 일종의 틀을 말한다! 객체를 정의하기 위한 '상태'와 '함수'로 구성되어있당
객체 단위로 코드를 그룹화 하고 쉽게 재사용하려고 사용한다!!

클래스는 아래처럼 생겼다

class Cat {
	// 생성자 함수
  constructor(name) {
		// 여기서 this는 이 클래스입니다.
		this.name = name; 
	}

	// 함수
	showName(){
		console.log(this.name);
	}
}

let cat = new Cat('perl');
cat.showName();
console.log(cat);

클래스를 상속한다는 내용이 있었는데
상속한다는 건 뭐시다야?🤷🏽‍♀️🤷🏽‍♂️

이미 만들어둔 클래스를 가지고 자식 클래스를 만든다는게 상속한다는 뜻인갑다!

아래를 보고 상속한다는걸 알아보쟈!

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();
my_cat.showAge();