팀 소개 페이지 미니 프로젝트(1)

2023.10.04

git & GitHub

• git : 분산형 버전 관리 시스템으로 코드 변경점을 기록하기 위한 도구, 버전 관리 도구 / 형상 관리 도구(소프트웨어의 변경사항을 체계적으로 추적하고 통제하는 것)
• GitHub : 내 코드를 온라인에 백업하거나 다른 사람과 협업하는 도구로, git 저장소를 관리하는 클라우드 기반 호스팅 서비스

git init : 새로운 git 저장소를 생성한다(.git 파일을 생성). 프로그래밍을 git으로 관리하기 위해 한 번만 입력하면 된다.

 

git add 파일명 : 파일을 스테이징 영역에 추가하여 staged 상태로 만든다. 저장할 파일을 지정하는 명령어이다.

(스테이징 영역 : 작업 디렉토리와 git 저장소의 변경 이력 사이의 징검다리 역할, 커밋할 준비가 된 변경 내용이 git 저장소에 기록되기 전에 대기하는 장소)

→ git add . : 변경 된 모든 파일을 스테이징 영역에 추가한다.

git commit -m “ commit 메세지 입력” : 실제로 파일을 저장하는 명령어이다. commit 메시지에는 특정 소스가 변경된 이유를 적는다.

 

git status : 어떤 파일이 add 됐는지, 어떤 파일이 변경됐는지, 현재 브랜치명 확인 등 확인 가능한 명령어 

git log : 저장한 커밋 내역 확인

 

git push origin 브랜치명 : 로컬 저장소에 있는 수정된 코드를 깃허브 원격 저장소에 백업

 

git clone : github에 있는 프로젝트 전체를 로컬 저장소에 복제한다.

git pull : github 에서 변경된 코드만을  로컬 저장소에 적용한다.

 

팀 소개 페이지 미니 프로젝트 1일차.

팀원들끼리 아이디어를 모은 후 와이어프레임을 만들고 메인 페이지 구현을 위해 역할을 분담했다. 개인 페이지는 각자 만들기로 했다.

 

2023.10.05

팀 소개 페이지 미니 프로젝트 2일차.

나는 팀원들에게 메세지를 남기는 방명록 기능을 맡았다.

부트스트랩에서 드롭 다운이 있는 버튼 코드와 오픈캠버스 네비바 코드를 가져와 방명록의 틀을 만들었다. 

드롭 다운 버튼의 경우 <ul>과 <li> 요소로 구성되어 있었는데, 멤버명 변수값을 받아오기 쉽도록 <select>로 변경하고 버튼도 추가하였다.

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>

▼ 변경한 코드

<div class="input-group mb-3 inputbox">
                <div class="select">
                    <select class="form-select" id="selectName">
                        <option selected>받는사람선택</option>
                        <option value="5i5i">5i5i</option>
                        <option value="이름">이름</option>
                        <option value="이름">이름</option>
                        <option value="이름">이름</option>
                        <option value="이름">이름</option>
                        <option value="이름">이름</option>
                    </select>
                </div>
                <input id="commentText" type="text" class="form-control" placeholder="응원의 한마디!"
                    aria-label="Recipient's username" aria-describedby="button-addon2">
                <button class="btn btn-outline-secondary" type="button" id="inputBtn">입력</button>
            </div>
            
            <!-- 댓글 출력란 -->
            <div id="commentList" class="commentList my-3 p-3 m-auto bg-body rounded shadow-sm">

틀을 완성한 후에 파이어베이스 'guestBook' DB에 멤버명과 코멘트값 방명록 데이터를 저장하도록 했다.

미니 프로젝트를 시작하기 전에 공부했던 대로 적용해서 코드를 짰는데도 DB에 계속해서 저장이 안돼서 굉장히 답답했는데, 한참 후에서야 user와 comment 변수에 .val()로 값을 잘 대입하고서 정작 딕셔너리에서 변수명이 아니라 selectName과 commentText 아이디를 쓰고 있었다는 것을 깨달았다.

// DB guestBook에 방명록 데이터 저장
        $("#inputBtn").click(async function () {
            let user = $('#selectName').val();
            let comment = $('#commentText').val();

            //둘중에 하나라도 선택 안되어있으면
            if (user == "받는사람선택" || comment == "") {
                alert("받는 사람과 메시지를 입력하세요.");
                return;
            }

            let doc = {
                'user': user,
                'comment': comment,
            };
            await addDoc(collection(db, "guestBook"), doc);

            alert('입력 완료');
            window.location.reload();
        })

DB에 값이 잘 저장된 것을 확인한 후에는 저장된 데이터를 꺼내서 #commentList 댓글 출력란에 append하도록 했다.

// DB guestBook에서 방명록 데이터 꺼내오기
        let guest_docs = await getDocs(collection(db, "guestBook"));
        guest_docs.forEach((doc) => {
            let row = doc.data();

            let user = row['user'];
            let comment = row['comment'];

            let commentInput = `
            <p class="cheer pb-3 mb-3 small lh-sm border-bottom">
                        <strong class="comment d-block text-gray-dark">@${user}에게</strong>
                        ${comment}</p>`;

            $('#commentList').append(commentInput);
        });