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

DaramGee·2023년 11월 8일
APIMapforeach고차함수이벤트카카오콜백함수
0

클라우드 활용 자바개발자 양성과정(구디)

목록 보기
33/95

오늘 정리

자바스크립트 콜백함수는? 반드시 순서가 지켜져야 하는 경우 사용 가능하다.

자바스크립트에서 forEach(ES5), Map(ES6)는? 배열에 저장된 값을 하나씩 꺼내볼 수 있다.

강의 내용

  • JS의 함수
    • 고차함수

      • 고차함수는 리턴에 오는 값이 함수이니까 이것을 호출하려면 할당연산자로 일단 받아내고,

      • 반환형으로 함수사용할 수 있음

        //할당연산자로 받아내기 - 익명의 함수
const sayHello = () => {
  return function () {
    console.log('hello')
  }
}
console.log(sayHello) // [Function : sayHello]
const myFunc = sayHello() //여기서 myFunc은 sayHello의 리턴타입으로 있는 함수임!! 
sayHello()
console.log(myFunc) //[Function (anonymous : 익명 ]

      • { } - 객체, 참조형, 함수도 들어갈 수 있음.

  • 호이스팅이란?
    • 블록 안에서 선언된 지역변수가 코드블록 밖으로 끌어올려지면서 강제로 전역변수화 되는 현상
    • ES5 시절의 호이스팅 이슈 해결 → 즉시실행함수(IIFE)
      (functtion A(){실행문})();
    • ES6 이후부터는 var 대신 let을 사용하며 이슈 해결
  • 배열 [ ] Array
    • 연관된 값들을 하나의 그룹으로 묶어서 나열한 자료구조 → Map
    • Array → 내장 함수 → 얕은 복사, 깊은 복사 →forEach문 (하나씩 출력)
    • 얕은 복사와 깊은 복사

      • 얕은 복사 : 하나다, 주소, 속성, 값 동일(원본 오염 가능성 有)

      • 깊은 복사 : 독립적 관계, 새로운 배열을 추가하여 새롭게 생성(원본 오염 불가능)

        //얕은복사 : 주소, 속성, 값 동일하여 원본이 오염될 수 있음. 
const copy2 = names
console.log(names) //['지연', '제이', '람쥐']
console.log(copy2) //['지연', '제이', '람쥐']

//깊은복사 - 새롭게 배열을 추가하여 다른 배열로 생성됨.
copy.push('나제이')
console.log(names) //['지연', '제이', '람쥐']
console.log(copy)  //['지연', '제이', '람쥐', '나제이']
    • 내장함수
      • join - DOM API의 한계(가독성 떨어짐)
      • slice와 splice 비교
        • slice 얕은 복사
        • splice 깊은 복사 (start: number, deleteCount?: number | undefined): string[] (+1 overload)
      • sort() : 주로 정렬할 때 사용
    • 콜백함수

      • 함수의 파라미터 자리에 들어가는 함수-prototype

      • 반드시 순서가 지켜져야 하는 경우 사용 가능

        first = () => {
  console.log('1')
}
second = () => {
  console.log('2')
}
first()
//first 함수의 지연 발생
second()
        // 파라미터자리에 함수를 보내서 무조건 해당 순서대로 진행되도록 코드를 짤 수 잇음.
first = (param) => {
  console.log('1')
  param()
}
second = () => {
  console.log('2')
}
first(second)
//first 지연 발생 없음
    • spread syntax(전개 구문)

      • 문법 이름 그대로 객체 혹은 배열들을 펼칠 수 있게 해 준다.

      • push(), splice(), concat() 보다 훨씬 더 간결함.

      • 전개연산자 …

        const names = ['나신입', '강감찬', '이성계']
const names2 = [...names, '나초보']
**console.log(names) //['나신입', '강감찬', '이성계']
console.log(names2) //['나신입', '강감찬', '이성계', '나초보']**

[myBook]

  • 전체 그림

  • firebase
  • 작업지시서
    • logout 처리 완결
    • 이벤트 처리하기
    • 데이터 바인딩 지원하는 handlebars{{}}
  • 테스트 시나리오
    • local:3000 → 요청발생 → get방식 → restFull API → routers/index.js→/login → url 바뀜 → 3000/login → http프로토콜(비상태 프로토콜) → 유지x, 쿠키(문자열, 로컬메모리 사용), 세션 사용 필요(cache는 비쌈) stateless
    • 쿠키, 세션이 없다면 url 바뀔 때 마다 새로운 요청으로 여겨 기존의 정보가 다 날아간다.
  • 이벤트 이해

    • 이벤트 종류

      • 사용자가 발생시키는 이벤트 : click, mouseover, mousemove, scroll, key 등
      • 시스템이 발생시키는 이벤트 : load, error

    • 이벤트 헨들러 연결방법

      • 이벤트 핸들러 이용 (+on)
        • DOM 요소.onclick =() ⇒{ }
        • DOM 요소.onkeyup =() ⇒{ }
      • 내장함수 이용
        • 두 번째 파라미터의 함수를 콜백함수라 하며, 이벤트 발동 시 자동실행
        • DOM 요소.addEventListener(’이벤트명{on뺀 함수}’,( ) = >{ } ←콜백함수

    • 이벤트 발생대상(target🎯)

      • e.target : 이벤트 발생 시 마우스 포인터 위치에 있는 요소를 반환
      • e.currentTarget : 이벤트 발생 시 이벤트문 상에서 선택자 요소를 반환

    • 서브밋이란? form 태그의 모든 요소를 서버로 보냄

    • 책 검색 API 추가

강의 마무리

  • 도서 목록(조건 검색 조회 포함)
profile
DaramGee
이전 포스트

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

다음 포스트

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

0개의 댓글