[2023.11.09] 개발자 교육 34일 차 : 강의-JavaScript with Firebase [구디 아카데미]

오늘 정리

자바스크립트에서 구조분해 할당은? 배열이나 객체의 속성을 해체하여 그 초기화를 간단하게 진행할 수 있다.

콜백함수는? 어떠한 조건(태스크)이 맞기 전에는 실행되지 않도록 하여 그 후 실행되도록 순서를 넣어줄 수 있다.

복습

• form태그 submit
  • submit : 폼을 전송하는 방법
  • form태그로 정보를 감쌈 → 뷰 안에는 조회(get), 수정(update), 삭제(delete), 추가(post)가 들어감. → submit을 통해 쿠키와 세션으로 전송(처리)
  • : 새로고침에 대한 이슈 有
  • action → 백엔드에서 처리 가능
  • submit 부작용(새로고침) → e.preventDefault() 사용하여 이벤트 전이 차단
  • submit 속성
    • → form 데이터가 서버로 제출될 때 사용되는 http 메소드
    • get → 폼 데이터를 HTTP GET 메소드로 전송함.
    • post → 폼 데이터를 HTTP POST 메소드로 전송함.
• 얕은복사 vs 깊은복사
  • 얕은복사(객체의 참조값, 주소값을 복사) → 원본값 변경 가능성 있음.
    • 치환, slice(), 전개연산자(2차원의 경우)
  • 깊은복사(객체의 실제값, 참조가 완전 끊어진 복사)
    • JSON.parse() → json 문자열 ⇒ 객체로
    • JSON.stringify() → 파라미터에 들어온 객체 ⇒ json 문자열로
    • Object.assign()
• 콜백함수(다른 함수의 파라미터로 전달되는 함수)
  • 다시 한 번 말하지만 자바스크립트에서 함수는 객체이다
  • 콜백은 어떠한 조건(태스크)이 맞기 전에는 실행되지 않도록 하여 그 후 실행되도록 순서를 넣어줄 수 있음.
  • 파라미터에 넣기, 타이밍주기(예 : setTimeout), 이벤트리스너의 파라미터에 넣기(예 : .addEventListener("click", function() {})

강의 내용

• 구조분해 할당 Destructuring assignment
  • 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식(리액트에서 많이 사용)
  • 함수에 객체나 배열을 전달해야 하는 경우가 생기곤 한다. 가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생긴다
  • 장점 : Array에 대한 초기화를 한 줄에 끝냄.

    const colors = ['red', 'yellow', 'green']
    
    //ES5 : 변수 하나하나 호출 -> 코드양 많음(비효율)
    const color1 = colors[0]
    const color2 = colors[1]
    const color3 = colors[2]
    console.log(color1, color2, color3) //'red', 'yellow', 'green'
    
    //ES6 : 구조분해할당을 사용하여 개선 (배열, 객체 다 가능)
    //1.배열
    const [c1, c2, c3] = colors
    console.log(c1, c2, c3) //'red', 'yellow', 'green'
    
    //2.객체
    const dept = {
      deptno: 10,
      dname: '개발부',
      loc: '서울',
    }
    const { deptno, dname, loc } = dept
    console.log(dept) //{deptno: 10, dname: '개발부',loc: '서울'}

---

• Array.prototype.filter()
  • prototype : 다른 곳에서도 사용 가능??
  • 필터값인 result는 array(배열), object이고, 새로운 배열을 생성한다(깊은복사)
  • filter는 다른 여러 객체에서 재사용할 수 있는 prototype이 생성되는 것이다.

---

• myBook-API 활용

• firebase/authLogic → 각 API 활용법 학습

  • import 시 주의사항

    • export defauult가 붙은 경우, {} 쓰지 않음.

    • export만 있는 경우, {} 씀.

      import {firebaseapp} from "../서비스/firebase.js"
      import {getAuth} from 'https://www.gstatic.com/firebasejs/9.22.1/firebase-auth.js'
      import AuthLogic from "../서비스/authLogic.js"

  • 구글 인증 API 활용 방법(https://firebase.google.com/docs/auth/web/google-signin?hl=ko)

    

---

• 핸들바스 실습 (https://blog.naver.com/seek316/222247946319)
  • 테이블 레이아웃(https://getbootstrap.kr/docs/5.3/content/tables/#개요) 참고
  • 핸들바스는 JS의 템플릿엔진 중 하나

💡 템플릿 엔진(**Template Engine)**이란? 지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어입니다. 웹사이트 화면을 어떤 형태로 만들지 도와주는 양식이다.

강의 마무리

• url 파라미터 https://gurtn.tistory.com/126 (게시판 활용 시 참고)

• 복습할 내용

  • 구조문해할당(ES6)
  • 얕은복사, 깊은복사
  • JSON.stringify(), JSON.parse()
  • 콜백함수 (파라미터 자리의 함수)

• 오늘 학습

  • 구글 API 소셜로그인 구현 → flow chart 그려보기
    • 소셜로그인을 위한 전처리, 후처리 방법 및 과정
    • 고차함수 예 : return new Promise()

• 다음주 예정

  • 동기와 비동기처리
  • 유튜브 클론코딩
  • ES6 정리
  • myBook 마무리 - 로그인처리, 페이지 처리, 공지사항 게시판(혼자서라도)