본캠프 : Chapter 1 온보딩 주차 - 미니 프로젝트 4일차_최종 점검

오늘은 웹개발 종합반 강의 3~5주차를 복습했다.

 

3주차

<1>  jQuery

(1) postbox 열고 닫기

버튼에 onclick="openclose()" 지정

카드에 id="postingbox" 지정

toggle을 이용해 카드 열고 닫기

 

(2) 데이터 넣고 카드 생성

버튼에 onclick="makeCard()" 지정

데이터 입력칸에 id="image" "title" "content" "date" 지정

변수값 지정 let~

let temp_html = `` 안에 붙일 카드 코드 입력

붙여질 곳(id="card") 옆에 .append 입력

</head> 

  <script>

    function openclose() {

    $('#postingbox').toggle();

    }

    function makeCard() {

    let image = $('#image').val();

    let title = $('#title').val();

    let content = $('#content').val();

    let date = $('#date').val();

    let temp_html = `

                 <div class="col">

                 <div class="card h-100">

                 <img src="${image}" class="card-img-top" alt="..."/>

                 <div class="card-body">

                 <h5 class="card-title">${title}</h5>

                 <p class="card-text">${content}</p>

                 </div>

                 <div class="card-footer">

                 <small class="text-muted">${date}</small>

                 </div>

                 </div>

                 </div>`;

    $('#card').append(temp_html);

    }

  </script>

</head>

 

<2> fetch

새로고침(ready)이 될 때마다 자동으로 내용 변경되도록 fetch 설정

원하는 데이터 api url 입력

변수값 지정 let~

변경할 내용 문구에 id="msg" 지정

</head> 

  <script>

    $(document).ready(function () {

      let url = 'http://spartacodingclub.shop/sparta_api/seoulair';

      fetch(url).then((res) => res.json()).then((data) => {

          let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM'];

           $('#msg').text(mise);

        });

   });

  </script>

</head>

 

4주차

<1> 파이어베이스 & 파이어스토어

파이어베이스(Firebase)는 구글(Google)이 개발한 모바일 및 웹 애플리케이션 개발 플랫폼이다. 개발자들이 백엔드 인프라를 구축하거나 관리하는 복잡한 작업 없이 핵심 기능에 집중할 수 있도록 도와준다. 

파이어스토어(Firestore)는 구글의 클라우드 기반 NoSQL 데이터베이스이다. 데이터베이스 서비스로 데이터를 저장하고 관리할 수 있는 기능을 제공한다.

 

<2> 파이어스토어 시작하기

빌드에서 Firestore Database를 선택

테이터베이스 만들기

Cloud Firestore위치는 Seoul로 설정하고, 사용 설정

프로덕션 모드에서 시작하기

파이어스토어 규칙 수정하기

false → true 변경 후, 게시

파이어스토어 세팅 코드 넣기 

VSCODE <script type="module">로 변경

 

<script type="module">

// Firebase SDK 라이브러리 가져오기(기본값)
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

// Firebase 구성 정보 설정
const firebaseConfig = {
본인 설정 내용 채우기 (프로젝트 설정-일반-내 앱-SDK 설정  및 구성-구성-구성객체 복사하여 붙여넣기)
};

// Firebase 인스턴스 초기화(기본값)
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

</script>

 

<3> 데이터 입력 및 불러오기

[addDoc] 데이터 넣고, 화면 새로고침 하기(alert, location)

$('#postingbtn').click(async function () {

let image = $('#image').val();

let title = $('#title').val();

let content = $('#content').val();

let date = $('#date').val();

let doc = {

image: image,

title: title,

content: content,

date: date,

};

await addDoc(collection(db, 'albums'), doc);

alert('저장 완료!');

window.location.reload();

});

 

[getDocs] Firestore Database에서 데이터 가져오기

let docs = await getDocs(collection(db, 'albums'));

docs.forEach((doc) => {

let row = doc.data();

let image = row['image'];

let title = row['title'];

let content = row['content'];

let date = row['date'];

let temp_html = `

<div class="col">

<div class="card h-100">

<img

src="${image}"

class="card-img-top"

alt="..."

/>

<div class="card-body">

<h5 class="card-title">${title}</h5>

<p class="card-text">${content}</p>

</div>

<div class="card-footer">

<small class="text-muted">${date}</small>

</div>

</div>

</div>`;

$('#card').append(temp_html);

});

 

<4> <script type="module">로 변경 시

script는 마지막에 작동이 되며,

fuction openclose (버튼에는 onclick="openclose()") 미작동됨으로 .click으로 변경(동적으로 만들어야 함. 코드로 달아준다.)

$('#savebtn').click(async function () {

     $('#postingbox').toggle();

});

 

5주차

<GitHub> 

https://github.com/

깃허브는 인터넷에서 개발자들이 자신의 코드를 저장하고 다른 사람들과 공유하는 곳이다.

배포는 소프트웨어 개발 과정에서 개발한 애플리케이션, 웹사이트, 서비스 등을 실제 사용자들에게 제공하는 과정을 말합니다.

깃허브를 통해서 배포가 가능하다.

단, 원격 저장소에는 중요한 정보를 포함하지 않도록 주의! 비밀번호, API 키, 개인정보 등 민감한 정보는 소스 코드에서 제거!

 

<주말 목표>

다음주 화요일부터 JAVA 강의가 시작된다. 주말에 유튜브 또는 인프런 무료 강의로 예습을 얼른 하고 싶다!:)