[스파르타 _ 리액트 과정] 14일차

et Ji·2022년 11월 17일
1

TIL

목록 보기
19/40

📜 진행 내용

  • [자습] 프로젝트 기획 관련 자료 정리
  • [자습] 자바스크립트 - 콜백, promise
  • [자습] js로 SPA 만들기
  • [강의수강] FIREBASE에 대한 이해, 활용법 - 류제천 튜터님

💡 배운내용

< 프로젝트 기획 관련 정리 >

보충 하기

기획안 구성

  • 웹사이트 컨셉 / 목적/ 목표
  • 사용 기술
  • 레이아웃(와이어프레임) + 요소별 기능
    • 미디어쿼리 부분 넣기
      • 참고 - 즐겨찾기 - 자료 - 기획
  • 구현기능
    • 참고 - 좀더 찾기
  • 역할분담
    • 참고 - 발표자료 스크랩 구글 시트

필수 체크

  • 프론트
    • UI 일관성
    • 반응형
    • UX ( 유효성 검증, 버튼 등의 클릭 유도시 커서- 포인터 적용 등)
    • 데이터 삭제는 DELETE 아닌, POST로 가려주기
    • 코드 재사용성 고려
    • 사용성 많은 곳에 통신 적게 적용

< JS - Promise >

👉 상황 예시 :

음식점에서 포장 주문을 한 경우, 결과를 알 수 있는 방법

방법 1 ) 기다리면서 포장이 완료될 때까지 계속 진행 상태를 묻는다.

손님 : 다 됐나요?

사장 : 아니오.

*** 반복

손님 : 다 됐나요?

사장 : 네 됐습니다.

방법 2)  포장 주문이 완료되면 연락을 받을 수 있도록 전화번호를 주고 나올 수도 있다.

그러면 손님도 연락이 올 때까지 다른 일들을 할 수 있다. 그리고 사장도 주문 상품이 완료되거나 혹은 실패하더라도 전화번호를 기억했다가 연락을 해서 알려줄 수 있다. 

이 방법처럼 사용하는 것이 바로 ‘promise’ 이다.
  • promise의 사용
    • 타입 : 객체

    • 생성 키워드 : new Promise

    • 콜백 함수의 인수 : resolve, reject

      • const pr = new Promise((resolve, reject) ⇒ { // code });

      • resolve : 성공한 경우 실행 함수

      • reject : 실패한 경우 실행 함수

        ※ 콜백 함수(callback) : 어떤 일이 완료된 후 실행되는 함수

        Untitled

    • 생산자와 소비자 (Productor & Consumer)

      Untitled

      • Productor 생산자의 코드
        - 프로퍼티 : state, result
        • 초기 상태
          • state - pending
          • result - undefined
        • resoleve 호출 : 성공
          • state - fulfilled : 이행된(성공) 상태
          • result - value : resolve함수로 전달된 값
        • reject 호출 : 실패
          • state - rejected : 거부된 상태
          • result - error : reject 함수로 전달된 에러
          • new Error : error 객체를 생성. new Error로 처리를 안하면, Uncaught error로 표현된다.
      • Consumer 소비자의 코드
        • then
          • then 으로 resolve와 reject를 처리할 수 있다.
          • 첫 번째 함수는 프로미스가 이행되었을 때 실행 (reject)
          • 두 번째 함수는 프로미스가 거부 되었을 때 실행 (resolve)
        • catch
          • 에러가 발생하면 reject인 경우만 실행된다.
          • 즉 then에서 두 번째 함수 부분을 catch로 명확하게 구분해줌으로써 가독성을 높이고, 첫 번째 함수의 에러를 잡아줄 수 있다.
        • finally
          • 이행이든 거부든 처리가 완료되면 항상 실행된다.
          • 로딩 화면 같은 것을 없을 때 유용하다.

👉 프로미스로 콜백지옥을 해결할 수 있다!

※ 콜백 지옥 : depth 가 깊어지면서 계속 콜백 함수를 호출하는 형태

const f1 = (callback) => {
    setTimeout(function () {
      console.log('1번 주문 완료');
      callback();
    }, 1000);
  };

.... f2, f3 

console.log('시작');
  f1(function () {
    f2(function () {
      f3(function () {
        console.log('끝');
      });
    });
  });
  • Promises chaining : 프로미스가 연결, 연결되어 있는 형태
    f1()
        .then((res) => f2(res))
        .then((res) => f3(res))
        .then((res) => console.log(res))
        .catch(console.log)
        .finally(() => console.timeEnd('x'));
  • Promise.all
    Promise.all([f1(), f2(), f3()])
        .then(res => {
          console.log
        })
    • 프로미스는 각각의 실행 시간이 다르다. 순차적으로 실행될 때 실행 속도를 줄이고 싶다면 promise all 을 사용할 수 있다.
      • 프로미스 시작을 동시에 실행할 수 있다.
      • ( [ ] )안의 프로미스가 모두 완료되어야 그 다음 then이 실행된다.
    • 프로미스 들을 배열 형태로 받는다.
    • 실행시간을 절약할 수 있다.
    • 한번에 실행하여, 모두 이행되면 값을 사용할 수 있다. 하나라도 실패하면 모두 실패한 것으로 보인다. (주의)
    • 하나의 정보라도 누락되면 페이지를 안 보여줘야 할 경우 사용할 수 있다.

👉 실행 속도 차이

  • (좌) Promises chaining / (우) Promise all
  • Promise all 이 더 빠른 것이 확인된다.
  • Promise.race : 하나라도 완료되면 (일등하면) 끝낸다.
    • 용량이 큰 이미지를 로딩하는 경우, 그 중 하나라도 완료되면 그 이미지를 보여줄 때 사용한다.

      // console.time('x');
      Promise.race([f1(), f2(), f3()]).then((res) => {
          console.log(res);
          // console.timeEnd('x');
        });

Untitled

- 1번 프로미스가 완료되고, 2번 result를 예정하고 있었으나, 1번이 완료되었기 때문에 무시된다.

예제 코드 추가

  • async 와 await

    : promise를 조금 더 간단하고 가독성 좋게, 동기적으로 실행되는 것처럼 보이게 만들어준다.

    : 기존에 존재하는 Promise 위에 조금더 간편한 API를 제공한다.

    • async
      • 사용 방법 : 함수 function 키워드 앞에 async를 붙여주면, 따로 promise 생성을 하지 않아도 promise처럼 사용할 수 있게 된다.
    • await
      • 사용 방법 : async 함수 안에서만 사용할 수 있다.
      • promise가 처리될 때까지 함수 실행을 기다리게 만든다.
      • promise가 처리된 후 결과와 함께 함수 실행이 재개되도록 한다.
      • promse가 처리되는 동안 엔진이 다른 처리를 할 수 있도록 한다.
        • 병렬적으로 동시 다발 기능을 수행해야하는 경우 사용함

⁉️ 어려웠던 내용

  • Promise, async, await

❎ 한 번 더 공부할 내용

  • Promise, async, await
  • js로 SPA 만들기

🎯 문제와 해결

  • 특강이 진행된 후, 녹화 영상 및 강의 자료가 늦게 업로드 되어서 당일 복습하는 데에 불편을 느꼈다. 그래서 녹화 영상은 줌 기록 때문에 늦더라도 강의 자료는 미리 올라달라고 운영팀에 요청을 드렸다. 다이렉트 메시지 요청이 아닌 자체 질문 양식폼으로 제출했는데 금방 요청을 들어주셨다.

🔗 출처 및 참고자료

profile
codesign

0개의 댓글