우아한 테크 러닝 3기 세미나 내용 정리 part.3🙌🙌

Jung Hyun Kim·2020년 9월 10일

우아한테크러닝

우아한 테크러닝 3기

목록 보기

3/5

우아한 테크러닝 세 번째 시간🤓

single source of truth

컴포넌트 디자인 및 (리덕스 미들웨어), 비동기 이해하기

상태 디자인 기준

개인적으로 구분이 안될때가 많으니 map함수로 돌리거나 할때는 컴포넌트로 구분해주어서 보기쉽게 만드는것도 좋다
비대해지기 전에 컴포넌트를 쪼개서 관리한다

통신과 정보를 주고받는것은 정보의 맥락이 일치되어야하는데 ,
실제로 그 수준을 레이어라고 생각하면,상대방이 이해할 수 있는 레이어를 파악하는것이 중요하다.

generator 와 비동기화

현 자바스크립트의 모던한 스펙

Promise


Promise();
//비 동기

const p = new Promise(function(resolve, reject) {
  resolve("1");
});
//


p.then(function(r) {
consol.elog(r)
});


const x = 10;
const y = x* 10;
//순차적 실행

const x = () => 10;
const y = x() * 10;
// 순차적 실행 x

Generator

function* foo () {}
//함수 이름 뒤에 * 가 붙으면 제너레이터 함수라고 한다.

function* make() {
return 1;
}

const i = make();
//보통의 함수는 1이 들어오지만 이 제너레이터 함수의 경우 객체(iterator)가 들어온다 
//코르틴 이라고 하는 함수의 구현체 
//함수는 인자를 받고, 계산을 한 다음 리턴을 하고, 리턴이 없으면 undefined여서 리턴없는 함수는 없지만

//함수인데 리턴을 여러번 할 수 있게 끔 하는 것은 다시 함수가 호출 될때 처음부터 시작이 아니라, 마지막 리턴한 지점부터 다시시작, 또 호출되면 마지막 호출에서 다시시작 한다는 의미 
//이걸 코르틴 이라고 하고 일부를 차용한 것이 제너레이터 이다 .
//계속 값을 생산해 낸다는 의미에서 제너레이터 라는 이름을 사용함 .

function* makeNumber () {
let num = 1;
  while(true) {
 yield num++; }
  //제너레이터에서 리턴이 yield라고 볼 수 있다. 
  
}

const i = makeNumber();

i.next();

//이렇게 호출했을때 yield나 return이 나올때까지 실행한다.콘솔에 찍으면 객체를 리턴하는데 
console.log(i.next())
//object {value : 1 , done : false } 를 리턴한다 
//yield는 함수를 끝내지 않는다 

//내부의 상태를 함수가 알고있다는 뜻

비동기를 동기처럼 코드작성

const delay = ms -> new Promise((resolve) => setTImeout(resolve,ms));
function* main() {
  console.log("시작")
  yield delay(3000);
  console.log("3chenl")
  //비동기를 동기적으로 풀수 있게 끔 보이는 상황 
  
}

const it= main();

console.log(it.next()) 

const {value} =it.next()

value.then(()=> {
  it.next()
}
 //동기적인 코드처럼 보일 수 있는 것이 redux-saga 이다
 //응답오면 보내주고, 보내주고 하는데 실상은 비동기 적 인것 
           
                

async function main2() {
console.log("시작")
await delay(3000)
console.log("end") ;
}

main2();
//하면 비동기를 동기 처럼 보이게끔 한다