리액트 기초반 1주차(1)

** vscode 정렬 alt + shift + f

DOM

- 문서 객체 모델, html 단위 하나하나를 객체로 생각하는 모델. 트리구조라는 뜻!

- dom tree는 콘솔에서 확인 할 수 있다

- MDN문서: https://developer.mozilla.org/ko/docs/Web/API/Document

Document - Web API | MDN

 

 

CSS 그리드 시스템

display: block;

넓이가 가로하나를 꽉 채우는 default 속성

display: flex;

영역을 유동적으로 바꿔주는 것. content의 실제 넓이 만큼만 넓이를 갖게 해준다.

 

 

CSS 사칙연산

width: calc(20% - 20px);

부모의 넓이 20%보다 20px 작게 설정한다.

 

 

JavaScript로 DOM에 접근하기

- document.getElementsByClassName : class명으로 DOM요소 접근

컬렉션 객체를 반환하기 때문에 wraps.style.background와 같이 안에 접근 할 수 없는듯?

<script>
    const wraps = document.getElementsByClassName("wrap");
    console.log(wraps);

</script>

* HTMLCollection은 유사배열이다. Array의 내장함수(map,filter,concat..)를 쓸 수 없다.

 

- document.getElementById : id로 DOM 요소에 접근. 스타일,이벤트(e.g. onclick) 등 접근 가능

<script>
	const title = document.getElementById("title");
	console.log(title);
</script>

사용 예시) 스타일 접근

//title의 element를 id로 가져온다.
const title = document.getElementById("title");
console.log(title);
//title의 속성인 style에 접근
title.style.backgroundColor = "yellow";

왜???

 

- document.getElementsByTagName : 태그명으로 DOM요소에 접근

//태그 이름으로 button의 element를 가져온다
const buttons = document.getElementsByTagName("button");
console.log(buttons);

//버튼을 눌렀을때 sayHello를 해!
for(let i=0; i<buttons.length; i++) {
	buttons[i].addEventListener("click", sayHello);
}
//.addEventListenr() 이벤트를 연결해 줄 때 사용하는 내장함수

 

document에 DOM 요소 추가하기

- document.createElement()

요소는 만들기만 하면 알아서 DOM에 뿅 생기지 않아요! 만들고 → DOM에 넣어주어야 합니다.

// 새 요소를 만들어요.
        const new_div = document.createElement("div");

        // 한 눈에 확인해볼 수 있도록 스타일을 조금 추가해줄게요. 그냥 div는 눈에 안보일테니까요!
        new_div.style.backgroundColor = "green";
        new_div.style.width = "100px";
        new_div.style.height = "100px";

        // 요소를 body에 추가해줍시다.
        document.body.appendChild(new_div);

 

자바스크립트 ES6

es6란? 자바스크립트 표준 문법중 하나

프론트앤드 개발자라면 es5,6,7정도는 알고있어야한다.

 

- Scope

변수에 접근할 수 있는 범위

var: 함수단위

let: block 단위 (값 재할당 가능)

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
	}
 	// if문 안의 a,b는 if문 밖의 a,b와 다른 변수이다. c만 같은 변수
	// 앗! c는 값이 변했죠? 
	// 그렇습니다. var는 함수 단위라서 if문 밖에서 선언한 값이 변했어요.
	// let과 const로 선언한 겂은 어떤가요? if문 안쪽 내용이 바깥 내용에 영향을 끼치지 않죠?
	
    console.log(a, b, c); // 0 0 1
}

 

- 함수

함수 선언식 : 

function do_something() { ... }

함수 표현식 : 함수가 변수 안에 들어가있다. 콜백으로 쓰기 좀더 편하다.

// 함수 이름은 생략해도 괜찮아요!
let do_something = function [함수 이름]() { ... }

화살표 함수 : 

// 화살표 함수는 함수 표현식의 단축형입니다.
// function까지 생력이 되었죠!
let do_something = () => { ... }

 

- Class

클래스란?

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

 

클래스를 구성하는 것

class Cat {
	// 생성자 함수, 값을 정의함, property 부분
    // 생성자는 객체에 대한 초기화를 한다.
  constructor(name) {
		// 여기서 this는 이 클래스입니다.
		this.name = name; 
	}

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

// 여기서 new는 키워드예요. 새로운 무언가를 만들기 위해서 생성자 함수와 함께 씁니다.
// 네, new와 생성자 함수는 세트예요 :) (소근 
let cat = new Cat('perl');
cat.showName();
console.log(cat); // perl

생성자 함수: 클래스 인스턴스를 생성하고 생성한 인스턴스를 초기화(초기 값을 설정한다고 생각하세요!)하는 역할을 합니다.

함수: 어떤 일을 하는 함수입니다.

 

클래스를 상속하려면?

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

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

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

let my_cat = new MyCat('perl', 4);
my_cat.showName();
my_cat.showAge();

 

- =과 ==과 ===

= : 할당을 뜻합니다. 어떤 변수에 값을 할당할 때 써요.

== : ==는 등차입니다. 유형을 비교하지 않는 등차예요. 변수 값을 기반으로 비교합니다.

ex. 0 == "0"은 true를 반환합니다.

=== : ===도 등차. 유형도 비교하는 등차. 엄격한 비교

ex. 0 === "0"은 false를 반환합니다. → 0은 숫자(number)고, "0"은 문자(string)이니까요!

 

- spread 연산자 (spread 문법)

어떤 객체 안에 있는 요소들을 객체 바깥으로 꺼내준다.

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

console.log(new_array);

let a1 = [1,2,3]
let a2 = [3,4,5]
let a3 = [...a1, ...a2]

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

 

- 조건부 삼항 연산자

if문의 단축 형태

조건 ?  참일 경우 : 거짓일 경우