[내일배움캠프-사전캠프 11일차] Web 프로젝트 1일차

1. 웹 프로젝트 기획: 목표 설정과 핵심 기능 정리하기

1) 프로젝트 목적과 목표 설정

- TodoApp 을 만들것이다. 

2) 핵심 기능 정리

- 일정 추가, 수정, 삭제가 가능하게끔 할것이다.

3) 간단한 화면 설계 

 

2. 웹 프로젝트 설계: 프론트엔드, 백엔드, 데이터베이스 구조

1) 프론트엔드 디자인

- 3-5일 정도로 하는 간단한 프로젝트 이기 때문에, 간단하게 html, css, js + bootstrap 으로만 디자인 할 예정이다. 

2) 백엔드 설계

- FireBase만을 이용할 것이다.

3) 데이터베이스

- NonSql 이라 따로 생각하지 않겠다.

 

3. 구현하기

1) 간단한 html 만들기  

-> 추후에 꾸며줄 예정이다.

2) firebase db랑 연결해주기

// 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 구성 정보 설정
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
	//비공개
};

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

 

3) 데이터 전달하기

// 버튼 클릭시, DB에 전달 
$('#todoBtn').click(async function () {
    let text = $('#todoText').val();
    let complete = false;
    let id = Date.now().toString();
    let doc = {
        'id': id,
        'text' : text,
        'complete':complete
    }

    try {
        await addDoc(collection(db, "todos"), doc);
        alert('일정이 추가 되었습니다.');
        window.location.reload();
    } catch (error) {
        console.error("에러가 발생했습니다. ", error);
    }
})

- id 값을 고유로 설정하고 싶었는데, 이 Firebase는 그런게 없단다 .. 그리하여 시간을 밀리초로 변환한 값을 id 값으로 주기로 했다.

 

4) 데이터 띄우기

// DB에서 가져와서 화면에 띄우기
let todos = await getDocs(collection(db,"todos"))
todos.forEach((todo) => {
    let text = todo.data()['text'];
    let complete = todo.data()['complete'];
    let id = todo.data()['id'];
    let temp_html =``
    if(complete===true) {
        temp_html = `
            <li class="list-group-item" " id="${id}">
                <input class="form-check-input me-1" type="checkbox" checked>
                <label class="form-check-label" for="firstCheckbox">${text}</label>
                <button></button>
            </li>`;
    }else{
        temp_html = `
            <li class="list-group-item" " id="${id}">
                <input class="form-check-input me-1" type="checkbox">
                <label class="form-check-label" for="firstCheckbox">${text}</label>
                <button></button>
            </li>`;
    }

    console.log(temp_html);
    $('#text-stack').append(temp_html);
});

- complete 라는 걸 만들었는데, 진행여부를 알 수 있는 데이터이다.

- 일단은 True 면 체크박스를 체크해주고, False면 체크박스를 풀어주는 형태로 진행했다.

---

오늘의 회고 

나만의 공부를 시작하기로 했다. 퀘스트와 강의를 모두 끝냈기 때문이다.

작은 프로젝트 하나를 할려고 하는데, 이전에 하다가 못했던 Todoapp을 Firebase로 구현해보고자 한다.

일단은 간단한 프론트와 데이터 추가 및 테이터 조회 는 가능하게 했다.

데이터 수정까지는 한번 해볼려고 했으나, 시간 관계상 이 정도만 하기로 했다.

내일 수정과 삭제, 버튼 요소 두가지 추가(수정, 삭제버튼) 를 할 예정이다.

프론트 전체적인 디자인은 주말이나 다음주 월요일날에 시작할 듯 싶다.

이전에 배웠던 Fetch > 서울시 날짜 or 김해시 날자 를 가져와서 오늘의 날씨도 알려주는 태그를 넣는 것도 해야겠다.

 

공부에 대한 회고는 여기서 끝이고,

오늘 1 on 1 상담을 진행했다.

간단하게 나의 장단점, 이전에 전공자였는지? 이전에 공부했던 내용이 있었는지 정도의 질문을 주셨다.

추가적으로 궁금했던 점 있냐고 하셔서 사전캠프 조원들이 이후에도 지속되나요?라고 여쭈어 보았다.

하지만, 그럴 가능성은 거의 없다고 하셨다. 그럴만도 한게 지금 인원이 90명 가까이 되어서 어쩔 수 없이 섞나보다.

우리 조원들과 정이 쌓였지만, 추후에 다시 만날 일이 있다면,, 좋겟다 ㅠ