리액트 이론_2

var a = 1;

선언 할당

 

var

: 재선언 가능, 재할당 가능

: 호이스팅으로 인해 선언을 하기전에도 쓸 수 있음

 

※ 호이스팅 : 선언을 문서 맨위로 끌어올려줌(변수를 아래에 선언해도 맨위에 온것처럼 동작한다)

                  let, const도 호이스팅은 되지만, 아래에 선언할 경우 에러남

let : 재선언 불가, 재할당 가능

const : 재할당 불가 상수,

 

객체 {key,value} 한 쌍을 property라고 한다.

key는 무조건 문자형이고, value는 모든 자료형이 들어갈 수 있다.

 

let a = {b=1, c=2};

a.b

출력값 1

a['b']

출력값 1

 

let a = [0,1,2]

key가 없다? no!

index 순서로 가져올 수 있다. 따라서 객체이다.

 

객체 생성법

1) 객체 생성자 new로 만들기

let cat = new Object;

2) 객체 리터럴로 만들기(literal}

let cat={ }

 

const로 상수를 만들어도 주소는 안변하기때문에 객체자체 수정이 가능하다.

 

함수

자바스크립트는 함수영을 문자형

 

( )가 있으면 함수실행. 없으면 없이 싱행

 

지역변수 & 외부변수

블록스코프 => { } 중괄호

 

함수스코프 => 함수의 중괄호 범위

 

내부변수가 외부변수보다 사용하는 우선순위가 더 높다.

function b ( ){
let p = 1; //외부변수
let a = function ( ){
	let p = 2; //내부변수
	console.log(p);
};
a();
}

출력값 => 2

매개변수와 인수

객체는 메모리에 모두 저장됨

함수에 값을 넘겨주면 함수는 복사를 해버림. 그리고 함수 내에서 쓰고 버림

 

매개변수(parameter)는 인수(argument)를 복사한 값

그래서 원본값이 손상되지 않는다.

 

클래스 기반언어는 객체 생성하기전에 클래스를 생성하고

클래스를 통해 객체(instance)를 생성한다.

 

자바스크립트는 클래스 없이 함수를 가지고 객체를 생성한다

객체는 자기가 어디서 복제되고 생성되었는지 알고있다

 

프로토타입

: 자바스크립트가 객체를 어떻게든 저렴하게 리소스 낭비 없이 생성해 보려는 노력

 

컴포넌트 쪼개기

 

1)뷰만 생각하기

2)데이터로 나눠보기

 

 

css flex 속성에 관한 모든것을 잘 알려주는 블로그인거 같다.

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

 

Promise

비동기 : 요청을 해놓고서 나는 다른일 하는것

자바스크립트: 싱글 쓰레드,

 

쓰레드? 작업을 하는 일꾼

싱글 쓰레드 : 일꾼이 하나뿐이라 작업을 하나씩 수행함. 동시작업 불가

 

자바스크립트 엔진

 

메모리힙 + 콜스택(호출스택)+콜백큐

싱글 쓰레드는 이 호출스택이 한개뿐이라는것

여러 호출이 들어오면 쌓였다가 수행을 하고나면 사라짐

 

비동기는 자바스크립트 실행을 도와주는 친구들과 같이 처리

WebAPI : AJAX, DOM, setTimeout...

 

비동기작업은 동시에이뤄질수 있다

엔진을 돕는 친구들 덕분에 동시처리가 가능한것

 

비동기 요청이 들어옴

콜스택이 쌓임(setTimeout 등)

콜스택은 WebAPI에게 요청을 함(보내버림)

예를들어 콜스택이 setTimeout에게 요청 할 때 함수와 시간을 넘겨주잖아?(콜백함수를 넘겨주는것).

처리후에 콜백큐에 콜백함수를 넘겨줌(이제 하면돼!)

콜스택 사라짐

콜백큐는 이벤트 루프!

이벤트 루프를 통해 콜스택에 콜백함수를 다시 넣어버림

콜스택은 콜백함수 다시실행

실행후 사라짐

 

=> 이게 비동기 작업 방식!

하지만 문제점이 있다. 비동기 작업이 중첩되는 과정에서 코드가 깊어지고 관리가 어려워짐 => 콜백헬

 

그래서 나온게 Promise!

비동기 연산이 종료된 이후에 결과를 알기위해 사용하는 객체

비동기 처리시점을 좀 더 명확하게 표현할 수 있기 때문에 비동기 처리 결과를 알기가 쉬움

Promise는 객체!

// 이 실행자는 비동기 작업이 끝나면 바로 두 가지 콜백 중 하나를 실행합니다.
// resolve: 작업이 성공한 경우 호출할 콜백
// reject: 작업이 실패한 경우 호출할 콜백
const promise = new Promise((resolve, reject) => {
	if(...){
		...
		resolve("성공!");
	}else{
		...
		reject("실패!");
	}
});

 

Promise의 후속처리 메서드

.then(성공 시, 실패 시)

첫 인자는 성공시 실행, 두번째 인자는 실패시 실행됨.(첫번째 인자만 넘겨도 됨)

.catch(실패 시)

 

두 메서드는 동시에 사용할 수도 있다

프라미스 체이닝(Promise Channing)

Promise는 여러번 쓸수있다.

콜백헬을 해결할 수 있다.

new Promise((resolve, reject) => {
	setTimeout(() => resolve("promise 1"), 1000);
}).then((result) => { // 후속 처리 메서드 하나를 쓰고,
	console.log(result); // promise 1
	return "promise 2";
}).then((result) => { // 이렇게 연달아 then을 써서 이어줌
	console.log(result);
	return "promise 3";
}).then(...);
//.catch를 쓰고 싶다면 이어서 써주면 됨

먼저해야하는 비동기작업을 묶어서 먼저 promise객체에 담아준다.

 

async - await

1)async

함수 앞에 async를 붙여서 사용

항상 프라미스를 반환함 (프라미스가 아닌 값이라도, 프라미스로 감싸서 반환)

 

async function myFunc(){
	return "hello";
}
myFunc().then(result=>{
	console.log(result);
})

출력값 => hello
		  Promise{<fulfilled>:undefined} //완료됐다
          
//return에 문자열만 넣었는데도 Promise를 반환함​

2)await

async 함수 안에서만 동작함

Promise가 처리될때까지 기다렸다가 그 이후에 결과 반환

async function myFunc(){
	let promise = new Promise((resolve, reject) => {
		setTimeout(() => resolve("hello"), 1000); //1초 있다가 알려줘
	});

    console.log(promise); //첫번째 콘솔
    //아직 안끝났을거야

	let result = await promise; // 여기서 기다리자!하고 신호를 줌

    console.log(promise); //두번째 콘솔

	console.log(result);
}

//출력값
//첫번째 콘솔
//Promise{<pending>}

//두번째 콘솔
//then(후처리 함수)를 쓰지 않았는데도, 1초 후에 완료!가 콘솔에 찍힘

//세번째 콘솔
//hello

어떨 때 사용하나?

• 비동기 작업을 겹쳐서 해야할 때 유용함
• 파이어베이스 인증을 사용한 로그인 회원가입 구현 시 유저 정보를 알아야 하는데 .then(후처리 메서드)가 많이 쓰이게됨