10. 07. 05일차 TIL - 팀프로젝트_03 마무리 및 회고

오늘은 3일동안 만든 팀소개 페이지를 발표하는 날이다.

하지만 구현하고 싶었던 기능을 다 구현하지 못해 아쉬움이 많이 남는다.

---

이번에 미니프로젝트에서 구현한 주요 기능은 4가지이다.

 

1. 오픈 api를 이용한 실시간 날씨 정보 불러오기

2. 네비바를 클릭했을 때, 대응하는 섹션으로 이동하기

3. 멤버소개 카드를 클릭했을 때, 모달창 생성하기

4. firebase를 활용하여 DB를 생성하고 게시판으로 불러오기

 

나는 방문록 페이지를 담당하였고, 4번의 기능은 기초강의를 통해 배웠기에 이를 활용할 생각이었다.

하지만 랜덤으로 포스팅되는 것은 마음에 들지 않았고 때문에 게시판을 시간순(최신순)으로 정렬하고 싶었다.

1) 먼저 posting_btn을 클릭했을 때 입력창에 들어온 값을 DB에 저장한다.

// posting_btn을 클릭했을 때,

$("#posting_btn").click(async function () {

  // 입력창에 들어온 value값을 DB에 업데이트

  let user_name = $("#visitation_name_input").val();

  let comment = $("#visitation_text_input").val();

  // Date의 년,월,일,시,분 정보만 입력

  let doc = {

    visitation_name_input: user_name,

    visitation_text_input: comment,

    year: new Date().getFullYear(),

    month: new Date().getMonth(),

    day: new Date().getDate(),

    hour: new Date().getHours(),

    minute: new Date().getMinutes(),

    timestamp: new Date(),

  };

2) 이후 데이터가 저장이 되면 알림창을 생성하여 데이터값이 저장이 되었음을 알려준다.

  // 데이터 저장 후 알림창 생성

  await addDoc(collection(db, "ELM_visitation_list"), doc);

  alert("저장되었습니다.");

  window.location.reload();

});

3) firebase에서 컬렉션을 가져온 뒤 timestamp를 기준으로 내림차순 정렬하여 최신순으로 나오게 하였다.

// Firestore에서 데이터를 가져오는 함수

async function fetchData() {

  // Firestore에서 컬렉션을 가져오고 timestamp 기준으로 내림차순 정렬

  const q = query(collection(db, "ELM_visitation_list"), orderBy("timestamp", "desc"));

4) 웹으로 가져온 데이터를 배열로 저장시키고 저장된 데이터를 다시 웹으로 불러오는 방법을 사용하였다.

  try {

    const docs = await getDocs(q);

    // 가져온 데이터를 배열로 저장

    const postsList = docs.docs.map(doc => ({

      id: doc.id,

      ...doc.data()

    }));

    // 데이터를 기반으로 HTML 생성

    displayPosts(postsList);  // postsList 배열을 HTML로 표시하는 함수 호출

  } catch (error) {

    console.error("문서 가져오기 실패: ", error);

  }

5) 이제 불러온 데이터를 HTML을 생성하여 눈에 보이게 표시하였다.

// HTML을 생성하여 표시하는 함수

function displayPosts(postsList) {

  const visitationBoard = document.getElementById("visitation_board");

6) HTML을 생성하기 전 먼저 포스팅을 할 부분을 깔끔하게 비우고

  // 기존 콘텐츠 초기화

  visitationBoard.innerHTML = '';

7) forEach 함수를 사용하여 postsList 배열을 각 게시글에 생성하도록 하였다.

  // postsList 배열을 순회하면서 각 게시글의 HTML을 생성

  postsList.forEach(post => {

    let Y = post["year"];

    let Mth = post["month"];

    let D = post["day"];

    let H = post["hour"];

    let Min = post["minute"];

    let user_name = post["visitation_name_input"];

    let comment = post["visitation_text_input"];

    // HTML 생성

    let temp_html =

      `<div class="visitation_posted">

        <p>${user_name}</p>

        <p>${comment}</p>

        <br>      

        <p>${Y}년 ${Mth}월 ${D}일 ${H}시 ${Min}분</p>

      </div>`

    ;

    // 생성된 HTML을 DOM에 추가

    visitationBoard.innerHTML += temp_html;

  });

}

8) 마지막으로 페이지가 로드될 때 게시글을 불러오게 하였다.

// 페이지가 로드될 때 게시글을 불러오기

fetchData();

9) 하지만 바로 제대로 구현되진 않았다. 몇 시간 고민한 뒤 이유를 알게 되었는데 바로 firebase에서 웹사이트로 query와 orderBy를 가지고 올 수 있게 import 하지 않았기 때문이었다... (하.. 진짜 그동안 뭐한거지..) 즉, 쿼리를 만들어만 놓고 웹사이트로 불러올 수 있도록 설정하지 않았던 것이었다. 이유를 알고 나서 바로 firebase SDK 라이브러리에서 orderBy와 query를 가져올 수 있도록 import 한 후 제대로 작동하는지 확인하였다.

// 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, orderBy, query} from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

그 결과.. 원했던대로 게시판에 포스팅을 최신순으로 할 수 있게 되었다. 🐛

---

하지만. 완성된 사이트가 온전히 100퍼센트 마음에 들진 않는다. 아직 부족하다.

1. CRUD 기능 중 Update와 Delete기능을 구현하지 못하였다.

2. 방문록 text를 적는 부분에 textarea를 사용하지 않고 input태그를 사용하여 입력하는 내용이 길어지더라도 줄바꿈이 되지 않아 사용성이 좋지 않아 보인다.

→ 이것은 바로 수정이 가능하다. 하지만 textarea태그를 사용하였을 때 css 디자인이 적용되지 않는 이상한 오류가 생겨 input태그를 그대로 사용했었고, 줄바꿈효과는 script로 제어를 하려고 했었으나 연결하지 않았다... 아쉽다...

3. 마우스휠업 이벤트를 구현하지 못했다. (원스크롤 페이지를 구현하고 싶었다)

→ 마우스휠 이벤트에 deltaY값에 따라 섹션의 eq번호와 대응시켜 해당하는 섹션으로 이동할 수 있게.. 하면 될텐데 왜 버그가 생긴 것일까..? 추후 다시 생각해보니 모달창이 생성되면 window에 마우스휠이벤트를 막는 설정을 넣었던 것 같다.. 😂

4. side바가 어떤 기능을 하는지 ui&ux적으로 적절하지 못했다는 피드백을 받았다.

5. input창에 아무런 조건을 주지 않아 빈 내용을 등록해도 카드가 생성되는 불편함이 발생하였다.

→ input 창에 최소/최대 글자수를 설정하여 최소글자수 미만일 경우 게시글이 작성되지 않게, 또 너무 길게 작성할 수 없도록 막는 기능이 있었으면 좋겠다.

---

이러한 부분들에서는  나뿐만이 아닌  팀원들 마저 아쉬움이 많이 남아 있어 보였다.

이후 KPT를 작성하며 팀원들끼리 이야기를 나누었다.

Keep

1) 귀여웠던 UI컨셉

2) 팀원을 서로 존중, 배려하는 소통 방식

3) 능동적이고 적극적인 태도 (학구열)

4) 강한 추진력 기반의 빠른 진행

 

Problem

1) 디테일한 기능 구현이 부족하였다.

2) 코드 컨벤션을 미리 정하지 못하여 팀원들끼리 코드를 merge할 때 상당한 시간을 소요하였다.

3) 구현해야하는 기능을 정의를 먼저하지 않아 중간단계에서 기능에 맞춰 디자인을 수정하였다.

4) 디자인 요소의 세부적인 사이즈나 여백, 메인색상, 보조색상을 정하지 않았다.

 

Try

1) 코드 컨벤션을 정하고 프로젝트 시작하기

2) 구현해야하는 기능을 먼저 확인한 뒤 UI&UX에 적합한 디자인 정하기

3) 디자인 요소의 세부적인 설정(사이즈, 여백, 색상, 등) 정하기

4) 전문지식 늘리기 

5) merge한 이후에는 다 같이 자신이 작성한 코드 팀원에게 리뷰해주기

6) 마지막으로 첫 미니프로젝트의 미흡한 부분들을 열심히 배워 추후 보완하기

     - 입력 최소, 최대 글자 수 제한하기

     - CRUD에서 U, D 구현하기

---

★ 5일차 소감

우리는 다같이 앞으로도 열심히 배워 이번에 하지 못해 아쉬웠던 기능들을 추가하고, 또 사용성 부분에서도 조금 더 편하게 이용할 수 있도록 웹사이트를 보완해보자는 각오를 다지며 이번 미니 팀프로젝트를 끝마쳤다.

 

팀원분들이 모두 적극적이고 열정적이여서 너무 고맙고 감사합니다! 앞으로도 열심히 합시다!!