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

DaramGee·2023년 11월 7일
express모듈비동기인증캐러셀함수
0

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

목록 보기
32/95

오늘 정리

자바스크립트에서 불변성이란?? 객체가 생성된 이후 그 상태를 변경할 수 없는 것을 의미한다. 원시형 타입은 불변성을 유지하고, 참조형 타입들은 변경이 가능하다.

자바스크립트의 함수는 객체다?? 함수의 치환이 되면, 두 함수는 같은 주소번지를 갖게 된다. 객체이기 때문에 같은 이름으로 함수를 선언할 수 없다.(오버로딩x)

복습

  • 자바스크립트의 함수란?

    • 특정한 일을 수행하는 코드의 집합

    • 장점 : 묶어두면 재사용이 가능하고, 높은 가독성을 가지면서 유지보수성 좋음

      💡 **언제 선언하지?** 같은 일을 반복하지 않고, 함수로 만들어서 재사용 가능
  • 백킥 : 문자열, 변수 같이 사용 가능
  • const : 상수/let : 변수(재정의, 재할당 가능
  • myBook 프로젝트 복기
    • 모듈 by yarn, npm … →외부 라이브러리(특징 : 개발자에게 제어권 없음) 손쉽게 사용 가능해짐
    • 모듈 설치 과정(로컬에 설치되어있을 때 사용하기)
      • nodeJS 설치(선행) → npm 명령으로 사용하려는 모듈 다운로드(로컬에 node_modules폴더 생성 & package.json에도 추가됨)

- npm 설치옵션 차이(https://phsun102.tistory.com/29)
- --save : devDependencies가 아니라 dependencies에 패키지가 추가(npm5 이후부터는 자동 설치되므로 생략 가능)
- -D : devDependencies에 패키지들이 추가
- 익스프레스 프로젝트를 자동으로 생성해주는 express-generator모듈을 설치

  • 함수

    • 기존 작성법/Arrow함수 작성법

      // 순차적진행 -> Arrow 함수는 위에서 사용x, 일반함수는 호이스팅 이슈와 같이 무조건 제일 앞쪽
console.log(funName2('이','지연')); //사용 o
console.log(funName('이','지연'));  //defined
// 함수(에로우 함수)
funName = (firstName, lastName) => {
  return `${firstName} ${lastName}`;
};
// 함수(기존작성)
function funName2(firstName, lastName) {
  return `${firstName} ${lastName}`;
}

    • JS에서 함수는 객체

      • JS의 데이터타입 원시형(값)/참조형(주소번지)
      • 함수가 객체라고? → 그럼 주소 값을 가지고 있네? 어디에 저장되나? 메모리에 저장

    • JS 함수의 치환 가능(객체 급이니까) → 치환이 된 두 함수는 같은 주소번지를 갖게 됨.
      - 같은 이름의 함수를 가질 수 없음(오버로딩 x)

       const hap = add          //같은 주소번지
 console.log(hap == add)  //같은 값
 console.log(hap === add) //같은 타입
 console.log(typeof hap) 
 console.log(typeof add)
 ```

      [파라미터]

    • JS의 파라미터의 기본값은 undefined이다.

    • JS는 파라미터 정보는 함수 내부 접근 가능한 arguments 객체에 저장됨

      function hap(a, b) {
  console.log(arguments) //[Argument] {'0':1,'1':2,'2':3} [Arguments] {'0':1,'1':2,'2':null}
  console.log(arguments[0]) // 1 1
  console.log(arguments[2]) // 3 null
  // return a + b + arguments[2] //2
  return a + b + arguments[1] // -> 이렇게도 사용이 가능함, but 사이드 이펙트 생길 수 있음.
  // return a + b
}

console.log(hap(1, 2, 3)) //5
console.log(hap(1, 2, null)) //5
console.log(hap(4, 5, 4)) //14

    • ES6 이후(Parcel, Webpack), 매개변수의 기본 값을 줄 수 있음. (따로 호출할 때 값을 주지 않으면 초기 값인 파라미터로 계산됨)

      function hap3(a=2,b=3){
  return a+b
}

    • Rest Parameter → numbers의 값이 아래 호출된 값으로 치환이 됨

      ```jsx
function sum(...numbers) {
  console.log(numbers) // [1,3,5,7,9]
}
sum(1,3,5,7,9)

function sum2(x, y, ...numbers) {
  console.log(x) //1
  console.log(y) //3
  console.log(numbers) // [5,7,9]
}
sum2(1, 3, 5, 7, 9)
```

      [리턴타입]

    • JS는 리턴타입 선언 자리 x → 쓰지 않으면 undefined 반환

    • return을 함수 중간에 만나면 함수가 종료

      ```jsx
//전달되는 것이 유효성 체크(예:음의 정수는 계산x)
function m(num) {
  if (num > 0) {
    console.log(num)
  } else {
    return
  }
}
console.log(m(4))  //4
console.log(m(-4)) //
```

      [콜백함수]

    • 함수도 객체가 될 수 있다. 일급 객체라고 말하기도 함.

    • 언제 호출될지 모르는 경우에도 콜백함수라고 함.

      [일급객체]

    • 일반객체 처럼 모든 연산이 가능

    • 함수의 매개변수로 전달 가능

    • 함수의 반환값으로 쓸 수 있음

    • 할당 명령문 사용 가능

    • 동일비교대상

      [일급함수] → first-classfunction - 코트린이나 파이썬에서도 지원. 자바도 8부터

    • 함수가 일반객체 처럼 모든 연산이 가능한 것

    • 함수의 매개변수로 전달 가능함

    • 함수의 반환값으로 쓸 수 있음

    • 할당 명령문 사용 가능

    • 동일비교대상

      [고차함수] - Higher-order function

    • 인자로 함수를 받거나(콜백함수)

    • 함수를 반환하는 함수를 고차함수라함

      ```jsx
const hap = (a, b) => a + b
const minus = (a, b) => a - b
// 고차함수 -> 매개변수에 함수가 들어감 (매개변수 값은 함수 밖에서 호출할 때 결정된다 ->콜백함수)
function account(a, b, action) {
  if (a < 0 || b < 0) {
    //or
    return
  }
  let result = action(a, b)
  return result
}
//action은 콜백함수, 언제 호출될지 모르는 경우에도 콜백함수라고 함.
//전달 당시 바로 호출해서 반환값을 전달하는 것이 아니라 함수를 가리키고 있는 함수의 참조값이 전달
//필요한 순간 호출
console.log(account(1, 2, hap)) //3
console.log(account(1, 2, minus)) //-1
console.log(account(-1, 2, minus)) //undefined
```

      [함수 표현식]

    • 함수 선언문 function name(){}

    • 함수 표현식 const name = function(){} - 익명함수

      • (자바;익명클래스와 비슷한 개념) → 외부 사용x

    • 즉시 실행 함수 표현 IIFE(Immedicately-Invoked Function Expressions) ->선언하면서 ();에서 바로 호출

      ```jsx
let hap = function(a,b){
  return a+b
}
hap =(a,b)=>a+b //return 생략 가능
console.log(hap(1,2));
(function run(){
  console.log('run');
})();
```

      [함수 작성 주의사항]

    • 불변성 Immutability

      • 자바스크립트에서 불변성이란 객체가 생성된 이후 그 상태를 변경할 수 없는 것을 의미

      • 원시형은 원본 영향 x 불변성을 유지하고, 참조형은 원본 영향 o 변경이 가능하다.

        function funcA(num) {
  num = 5
  console.log(num)
}
// console.log(num) //defined

//원시형인 경우, 함수내부에서 변경되더라도 외부에 영향 x
const value = 3 //3으로 초기화
funcA(value) //함수내부에서 값이 바뀜
console.log(value) //바깥에는 영향이 없음

//참조형인경우 원본이 바뀜 -> 가급적 자제 (call by reference)
const fruit = { name: '🍓' }
function funcB(obj) {
  obj.name = '🍉'
  console.log(obj)
}
funcB(fruit)
console.log(fruit) //{ name: '🍉' }

[객체생성]

  • key - 문자, 숫자, 문자열, 심볼
  • value - 원시값, 객체(함수)
  • 데이터 접근방법 → 다트연산자, [’ ’]
  • 클래스 선언

    • 고전 - 생성자 함수

    • ES6 이후 클래스 내부에 함수 추가 가능(에로우 함수로 작성)

      class Fruit {
  constructor(name, emoji) {
    this.name = name
    this.emoji = emoji
  }
  display = () => {
    console.log(`${this.name} ${this.emoji}`)
  }
}

//클래스 인스턴스화 - kiwi와 watermelon은 Fruit 클래스의 인스턴스 변수
const kiwi = new Fruit('kiwi', '🥝')
const watermelon = new Fruit('watermelon', '🍉')

console.log(kiwi)
console.log(`${kiwi.name} ${kiwi.emoji}`)
console.log(`${watermelon.name} ${watermelon.emoji}`)
kiwi.display
watermelon.display
  • import/export

    • import

        import { DeptVO } from './deptvo'
           -------         --------
//import {클래스이름} from '위치경로'

강의 내용

  • myBook 프로젝트
    • express 모듈? 웹 서비스를 가능하게 하는 웹프레임워크
      • 왜? 웹 서비스가 가능하지? Restful API를 지원해준다.(get, post, put, delete)
      • 자바의 입장에서 express는 서블릿, JSP와 비슷하다. 그 중 app. use(req, req, next)??
      • RestFul API??? (https://aws.amazon.com/ko/what-is/restful-api/)
      • express 모듈 설치방법(복습)/ [설치 전제조건] - node.js설치 완료 [프로젝트 생성]
        express -e [프로젝트명=mybook] express 모듈이 내장된 프로젝트를 생성한다 (e : embeded(내장된, JSP에서 제공하는 스크립트와 유사)) [express 모듈 설치] 프로젝트 폴더에서 Cmder창에서
        npm install express-generator -g 엔터 ※npm install [모듈명] -g (g : 전역적 설치, 전체 프로젝트 공통 사용 가능) [package.json 생성 및 모듈 추가] npm install express
        (현재 작업 중인 프로젝트에 모듈을 설치할 때 사용하는 방식)
        옵션으로 현재 플젝의 package.json에 모듈이름과 버전을 추가함. 💡 **에러발생시?** npm install 엔터 → 의존성 관계에 있는 외부라이브러리 모두 재설치
    • 프로젝트 구상 💡 **개발자가 작성한 코드의 물리적 위치는??** views 폴더 아래에 위치해야 함. 그 외의 영역은 express 설정에 따라 파일 작성 및 사용
폴더구성내용
binwwwexpress 사용 관련 함수, 포트설정(3000)
public-javascriptsauthLogic인증 관련 js(구글, 카카오 인증 API 활용)
public-javascriptsfirebase.js구글firebase 연결 관련
public-styleshteetsstyle.css페이지 구성관련
routes(화면중계)index.js페이지 설계, 로그인(물리적 위치→login.ejs)
routesusers.js라우터 설정(대쉬보드, 회원가입, 장바구니 등 가능)
viewserror.ejshtml 랜더링(브라우저에 표시)
viewsfooter.ejsfooter 구성
viewsheader.ejsheader구성(whit 부트스트랩)
viewshome.ejs홈페이지 글
viewsindex.ejsHTML 문서의 구조와 외부 리소스를 로드
views-authlogin.ejs웹 애플리케이션의 기본 설정
-app.js뷰 엔진 설정, 정적페이지의 위치 설정, 에러 핸들러 등(모듈로딩, 앱 생성, 미들웨어 생성-이동(next), 라우트설정, 에러 핸들러, 앱 내보내기 등)
  • 서버
    - web app server : 정적 페이지 위주 처리(CSS, html, js) - front server → public 폴더 배포(리소스-이미지, 영상, css 등)
    - enterprise server : 동적 처리 지원(JAVA기반, 스토리지 지원, 백업서버), 대형 시스템, DB 커넥션 풀기능 지원, 원격객체 호출지원 등 - backend server(예 : JBOSS, JEUS, Webspere 등)
  • firebase 인증 가져오기 (https://firebase.google.com/docs/auth?hl=ko)

    • import, get함수로 생성

      import {
  getAuth,
  GithubAuthProvider,
  GoogleAuthProvider,
} from 'https://www.gstatic.com/firebasejs/9.22.1/firebase-auth.js';

class AuthLogic {
  constructor() {
    this.auth = getAuth();
    this.gitProvider = new GithubAuthProvider();
    this.googleProvider = new GoogleAuthProvider();
  }
  getUserAuth = () => {
    return this.auth;
  };
  getGithubAuthProvider = () => {
    return this.gitProvider;
  };
  getGoogleAuthProvider = () => {
    return this.googleProvider;
  };
}
  • 카카오 인증 가져오기(전처리 필요)

    • export로 요청 → 콜백

      export const loginKakao = (params) => {
  return new Promise((resolve, reject) => {
    try {
      const response = axios({
        method: 'get',
        url: '카카오토큰을 받아올 URL주소 -카카오개발자 센터 긁어옴',
        params: params,
      });
      console.log(response);
      resolve(response);
    } catch (error) {
      reject(error);
    }
  });
}; //end of loginKakao
  • 프로젝트 화면 꾸미기
  • 캐러셀 추가 (https://getbootstrap.kr/docs/5.0/components/carousel/)
    • 캐러셀 : 캐러셀은 이미지나 텍스트의 슬라이드를 가로로 슬라이드시켜 여러 개를 표시하는 컴포넌트
    • 스크립트 이벤트(applySlider)
  • 스타일은 클래스나 태로, 이벤트는 id로!!
  • 이벤트 추가
    • 로컬스토리지에 ‘email’키가 있을 때(firebase에서 해당 아이디가 사용자로 추가되어있을 때) → 토글 함수 실행

      • toggle() 켜져있음 꺼주고, 꺼져있음 켜주는 것

        <script>
  console.log(`header - ${localStorage.getItem('email')}`);
  // 로컬스토리지에 이메일 주소 있어?? 
  // toggle() 켜져있음 꺼주고, 꺼져있음 켜주는 것
  if(localStorage.getItem('email')){ //값이 들어가기 때문에 true임!! 
    $('#login,#logout,#cart,#mypage').toggle();
    $('#logout a').html(localStorage.getItem('email'))
  }
  // 로그아웃 클릭 시 처음 페이지로 돌아가도록 설정 localhost:3000/으로 이동
  $('#logout').on('click',()=>{
    localStorage.clear()
    location.href="/"
  })
    • 캐러셀 실행
      • public image 폴더에 들어있는 사진들을 슬라이드 형식으로 표시되도록 설정

  • 기타 학습

    • 라이브러리 vs 프레임워크?

      💡 **라이브러리(활용가능 도구집합) vs 프레임워크(클래스, 인터페이스 집합)?** 둘의 차이는 제어 흐름의 주도성이 누구에게(어디에) 있는가에 있음. Flow를 누가 쥐고 있느냐. 둘프레임워크는 개발자가 흐름을 쥐어 코드를 완성성 라이브러리는 개발자가 흐름을 만들지만, 그 흐름 속에 라이브러리를 가져와서 사용하는 것
  • 비동기처리 HTTP 통신 종류(ajax, fetch, axios) for 클라이언트와 서버 간 데이터를 주고 받기 위해!!
Ajaxfetch APIAxios
빠르게 동작하는 동적 웹페이지 개발 용이내장 라이브러리, import없이 사용브라우저, Node.js위한 promise API 활용 라이브러리
핵심 객체 XMLHttpRequest 객체(웹페이지 일부 갱신 가능(비동기처리))XMLHttpRequest의 대체자(비동기 요청 더 쉽게)브라우저 호환성 뛰어남.
최근은 JQuery 내 ajax가 대세?promise기반 동작→콜백지옥 탈출자동으로 JSON 형식으로 변환, React에서 주로 사용
콜백지옥 생길수도..구형브라우저 지원x, API요청 취소x라이브러리 설치 필요, 아직 fecth보다 기능 적음

강의 마무리

  • 유튜브 클론코딩(다음주)
profile
DaramGee
이전 포스트

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

다음 포스트

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

0개의 댓글