-
[스파르타코딩클럽] 리액트 React.js week 1-1SPARTA CODING CLUB 2021. 8. 3. 21:00
서버와 클라이언트, 서버리스(Serverless)
서버는 웹사이트에 보여줄 것을 클라이언트에 전달하는 역할을 한다.
클라이언트는 우리가 웹사이트를 보는 도구이다.
서버리스(Serverless)는 내가 서버를 만드는 것이 아닌 이미 작업이 완료된 서버를 빌려 쓰는 것이다. 백엔드리스 X
DOM (Document Object Model)
DOM은 HTML 단위 하나하나를 객체(object)로 생각하는 모델이며 트리구조로 되어있다.
React
리액트(React)는 자바스크립트 라이브러리의 한 종류이다.
※ 자바스크립트 문법 알아보기
Class - 객체 지향 프로그래밍에서 특정 객체를 생성하기 위한 변수와 함수를 정의하는 틀
- 클래스 구성
// 생성자 함수: 클래스 인스턴스를 생성하고 생성한 인스턴스를 초기화 하는 역할(초기 값 설정)class Cat { // 생성자 함수 constructor(name) { // 여기서 this는 이 클래스입니다. this.name = name; } // 함수 showName(){ console.log(this.name); } } let cat = new Cat('perl'); cat.showName(); console.log(cat);
// 함수: 어떤 일을 하는 역할 - 클래스 상속 - 이미 만들어 둔 클래스를 가지고 자식 클래스를 만드는 것
// superclass 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살 입니다!
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
자바스크립트 공부가 부족해서 인지 쫌 어렵네..!
포기하지 말자!!
반응형'SPARTA CODING CLUB' 카테고리의 다른 글
[스파르타코딩클럽] 리액트 React.js week 1-3 (0) 2021.08.09 [스파르타코딩클럽] 리액트 React.js week 1-2 (0) 2021.08.04 - 클래스 구성