[2023.11.16] 개발자 교육 39일 차 : 강의-JavaScript with 실습 [구디 아카데미]

DaramGee·2023년 11월 16일
APIFirebaseejsmoment모달비동기
0

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

목록 보기
39/95

오늘 정리

EJS?? JavaScript로 HTML 마크업을 생성할 수 있는 간단한 템플릿 언어 (탬플릿 生)

복습과 활용이 필요하다? 학습했던 프로젝트 확인 및 추가적 실습 필요(실질적 복습)하다.

복습

[EJS]

  • JavaScript로 HTML 마크업을 생성할 수 있는 간단한 템플릿 언어 (탬플릿 生)
  • 해커뉴스 step3 - index.js 형식

    • 서버에서 가져오는 데이터셋을 출력하기 위해 아래처럼 작성 → 양 많고, 가독성이 떨어짐.

      //비동기처리 후 - ajax, getData() 
const ul = document.createElement(’ul’);
ul.appendChild(div.firstElementChild);
  • 만약, ejs 형식으로 작성하는 경우, html, js를 한 페이지에 작성 가능 → 가독성이 좋아짐.

    • 코드, 변수 내장 <% %> 태그

      //html 작성 부분
<ul></ul>
---------------------------------------------------
//javascript 작성 부분
<script type="module"> </script>

강의 내용

[myBook 실습]

💡학습목표
1. 라우터 복습 → 화면갱신, 페이지 변화 (이동이 아님, 이동은 데이터 유지X)
2. 데이터 영속성 → 오라클, MySQL(파이어베이스-DB→통합 서비스), NoSQL(경량화 무기)
3. 추가 작업 → 게시판 추가(목록,CRUD,채팅(DB사용)), 대시보드 작업(장바구니, 회원가입, myPage, 회원 정보 수정 등), auth(카카오, 네이버 로그인 도전)

💡 작업지시서

[myBook 소스리뷰]

  • ♒myBook의 흐름
    • firebase를 통해 앱으로 만듦(initializeApp함수) → Auth를 통해 가입된 사용자를 관리하고, 구글 인증도 추가함 → 로그인 여부에 따라 메뉴 표시를 다르게 함. → 각 메뉴별 코드의 흐름을 구상함(예 : 책 검색(포스트맨-카카오 책검색 API), 게시판(firestroe DB로 사용) 등 각 메뉴별 실행을 구성함.)
  • 🗂️bin(모듈 사용 시)
    • 모듈 사이 의존 관계 있을 수 있음.
    • 반드시 입력해야 모듈 사용 가능
    • nodejs기반 프로젝트 진행 시 require 예약어(node-modules 가져옴) 사용해야 함
  • 🗂️public - javascripts

    • dbLogic.js 생성 → db와 만나는 부분(비동기 처리 필요)

    • 왜? 서버가 다르기 때문에

    • 단, export를 꼭 붙인다!!

    • fetch & axios 코드 비교 (axios? (https://www.npmjs.com/package/axios) )

      import axios from 'axios';
//Insert - axios 사용
export const memberInsertDB = (params) => {
  return new Promise((resolve, reject) => {
    try {
      //axios(object,)
      const response = axios({
        method : 'GET',
        url : 'http://172.16.2.11:9000/member/memberInsert',
        params : params   //params는 사용자가 입력한 값 -> 예 : 
      })
      resolve(response); //response => [{'mem-name':'나신입', 'mem-email':'na@hot.com'}] =>쿠키나 세션에 담음 
    } catch (error) {
      reject(error);
    }
  });
};

//List - fetch 시
export const memberListDB = (params) => {
  return new Promise((resolve, reject) => {
    try {
      const response = fetch(`http://172.16.2.11:9000/member/memberList`);
      resolve(response);
    } catch (error) {
      reject(error);
    }
  });
};
  • 🗂️view - board
    • 글 등록 클릭 시 이벤트 처리(db 연결) ←jquery 형식 $ 사용 (서브밋 오류 처리 필수!!)
    • 날짜 가져오기(moment)

      • https://cdnjs.com/libraries/moment.js

        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js" integrity="sha512-CryKbMe7sjSCDPl18jtJI5DR5jtkUWxPXWaLCst6QjH8wxDexfRJic2WRmRXmstr2Y8SxDDWuBO6CQC6IE4KTA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="module"> 
  import {app} from '/javascripts/firebase.js'
  import { getFirestore, collection, addDoc } from 'https://www.gstatic.com/firebasejs/9.22.1/firebasestore.js';
  const db = getFirestore(app)

  //이벤트처리!! 버튼이 눌렸을 때, db에 보내져야 함!
  $(frm).on('submit',async(event)=>{
    event.preventDefault() //버튼 서브밋으로 인한 새로고침 방지(사이드이펙트)
    let title = $(frm.title).val() //val() 사용자 입력 제목
    let body = $(frm.body).val() //val() 사용자 입력 
    //로그인 성공 후 로컬스토리지에 담기는 email가져와서 작성자로 한다. 
    let email = localStorage.getItem('email')
    //날짜 설정
    let date = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
    //쌍 이름이 같으면 생략 가능하지만 유의해야함. 
    await addDoc(collection(db,'board'),{email:email,title:title,body:body,date:date})
    //firebase 서버 저장되면 어디로 가야하지?? 
  })
</script>
    • ♒게시판 흐름
      • 게시판 등록 시, app을 가져옴 → (list) 로그인 여부 확인하여 글 등록 버튼 이벤트 → (write)새로운 글쓰기 → (버튼이벤트)firebase firestore의 board 카테고리에 작성된 글이 등록됨.
      • 이벤트(글작성 여부에 따라 모달창 띄움)
      • 게시판 조회 시, firestore에 저장된 id 값과 데이터를 가져와서 핸들바스를 통해 화면에 표시

[🔥firebase]

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyATfx1b1yCgIlUzKrkjdES25MUtYqgTihI",
  authDomain: "mybook2-70005.firebaseapp.com",
  projectId: "mybook2-70005",
  storageBucket: "mybook2-70005.appspot.com",
  messagingSenderId: "642271234688",
  appId: "1:642271234688:web:3ff67d098fc78f6ba7b465"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

강의 마무리

[프로젝트 복기]

  • 학습했던 프로젝트 확인 및 추가적 실습 필요(실질적 복습)
    • 작성 코드가 ct 사이드의 코드인지, server 사이드의 코드인지 알아야 함.
      • ct 사이드 : html, css, js(모듈화할건지, 외부라이브러리 사용할건지?)
      • server 사이드 : 베이스 설정(spring, jsp, React, 넥사크로 등등)
    • 프로젝트 설정 과정
      • 메뉴 구상, 추가 → 라우터 등록(인덱스, 유저) → 화면구성(front-jsp,Vue,React,넥사크로,UI솔루션 등) → ct/server 구축 → 🚩서비스 오픈(도메인 설정/AWS, ct-번들러, 웹팩/server-메이븐, 그레이들)

[API 학습]

profile
DaramGee
이전 포스트

[2023.11.15] 개발자 교육 38일 차 : 강의-JavaScript with 실습 [구디 아카데미]

다음 포스트

[2023.11.17] 개발자 교육 40일 차 : 강의-JavaScript with 실습 [구디 아카데미]

0개의 댓글