멤퍼 소개 페이지 프로젝트 - <3>

오늘의 공부

1. 프로젝트 방명록 수정하기

문제점 확인

• 기존의 댓글을 입력하면 객체를 만들어 바로 삽입하는 방식의 경우, 사이트를 새로고침할 경우 데이터가 날아간다!

• 이러한 오류를 고치기 위해 API를 연동하기로 하였다!
  (팀 프로젝트이기에 팀원분의 FireBase 에 연동하게 되었다.)

실전 함수

데이터 불러오고 사용하기

// Firebase 서비스 패키지 가져오기!
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app js";
import { getFirestore, collection, addDoc, getDocs} from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { getStorage, ref, uploadBytes, getDownloadURL} from "https://www.gstatic.com/firebasejs/9.22.0/firebase-storage.js";

// Firebase 구성 정보 설정
const firebaseConfig = {
      //API 키 설정
};

// 정보 가져와
const app = initializeApp(firebaseConfig);
// 데이터 베이스 내놔
const db = getFirestore(app);

// "Comments"에 있는 거 다 들고와바
let docs = await getDocs(collection(db, "Comments"));
  docs.forEach((doc) => {
// 데이터 쪼옥 가져와서 분배!
  let row = doc.data();
  let name = row['Nickname'];
  let text = row['Comment'];
  let Date = row['Date'];
});

데이터 올려버리기

// (인풋박스에서) 올릴 값 내놔
let name = document.getElementById("ip_name").value;
let text = document.getElementById("ip_text").value;
let today = new Date().toLocaleDateString();

// 너 닉네임 잘 썻냐?
if (!name) {
  const span = document.createElement("span");
  span.style.color = "#f26650";
  span.textContent = "닉네임을 입력해 주세요!";

  name_point.before(span);
} else if (text.length > 0) {

// 올릴 값 조리중..
  const doc = {
    Nickname: name,
    Comment: text,
    Date: today,
  };
// 슛 
  await addDoc(collection(db, "Comments"), doc)
  .then(() =>
// 잘 들어 갔나요..?
  alert('방명록이 성공적으로 추가되었습니다!')
  );

// 올린 글은 입력 칸에서 지워야지 음 
  document.querySelector("#ip_text").value = "";
  window.location.href = 'index.html';
}

2. 프로젝트 헤더 기능 구현하기

수정할 사항 찾아보기

• 흠.. 우리 프로젝트가 아래로 기니까.. 스크롤을 해도 헤더는 위에 고정되야 겠네..?!

해결방법

<style>
  .headerBox {
    height: 70px;

    <!-- 핵심은 너닷! 너는 부모에 종속적이지 않은 불효자야.. -->
    position: fixed;

    <!-- 이제 내 머리에 딱 붙어있어! -->
    top: 0;
    left: 0;
    right: 0;
    
    <!-- 헤더라면 다른애들보다 Layer가 "위"에 있어야 되자나 -->
    z-index: 1;
    
    <!-- 다른애들 안보이게 배경 그려서 가려야지 -->
    background-color: white;
  }
</style>

• 아주 보기 좋네요 ^^

3. 멤버 소개페이지 프로젝트 피드백 사항

Code Convention (코드 규칙)을 통해 서로 이해하기 쉽게 만들어라!

=> 아래 사진으로 정해두었으나 계속해서 확인해봐가야함!

같은 프로젝트를 하는데 서로 기능 구현만하고 공유를 하지 않는 것 같다.

=> 코드 설명회와 코드 리뷰 회의를 마지막 타임에 하기로 하였다!

branch 이름들이 일정하지 않게 ( 기능, feature/기능 ) 따로따로 되있는게 좋아보이지 않다.

=> 최대한 역할/기능 을 맞추어 feature/guestbook 같이 이름들을 수정하였다.
( 아.. 근데 공유를 제대로 안해드려서 원본 Branch들이 다시 태어났네..? 내일 다시 말씀드려야지..)

Script 파일과 Css 파일을 html과 분리하여 관리해라!

=> 그게 뭐에요..? (아래 삽질란 참고)

학습 과정 중 특이사항 / 삽질

1. 멤버 소개페이지 프로젝트 StyleSheet(css) / Script(Js) 분리하기

발단

어제 후반부에 결과물들을 겨우 이어 붙였다…

(이딴게 결과물..? 너무 황천으로 깨졋는데요..?)

이러한 심각성을 인지하고 스타일들을 맞춰주기 위해 새로 폴더를 만들어 관리해보자!라는 생각을 했다.(물론 혼자 생각만해서 아무도 몰랐음)

=> 그러다 튜터님이 오셔서 팀프로젝트의 기본을 알려주시며 Css랑 JavaScript를 분리해서 관리하라는 충고를 해주셨다.

그렇게 방법을 찾는데.. 역시 블로그를 만들며 써봤던 Jekyll 빌드 명령어를 따라하면 금방 되는거 아냐? ㅋㅋ

=> 라고 생각 했던 때가 있엇죠..

전개

• 분명 왼쪽(GitHub 블로그 템플릿) / 오른쪽(메인 프로젝트) 폴더를 똑같이 맞추고.. 명령어도 갖다붙이고.. styles.scss 엔 @import 까지 연결 해뒀는데… 왜..?

절정 / 결말

=> 주소를 못찾겠다네요..

• 혹시 몰라 include 내부에 있는 html에서도 시도해보고.. 다른 유형의 Liquid Filter 주소입력도 써보고.. 했는데 안돼더라구요.. (참고로 _config.yml 에 sass 설정 코드도 넣어봤습니다..)

=> 다음 날 알게된 사실은 폴더 이름인 ‘_assets’에 있는 언더바로 인해 폴더 자체가 무시받고 있었단 사실이였다..

2. Self-Hosted Runner 로 빌드 해보기

발단

• GitHub Action에서 GitHub Page를 빌드하기 때문에 GitHub Action쪽을 많이 확인해가며 여러번 시도하는데..
  어느 순간부터 Runner가 말 그대로 도망가며 일을 안하기 시작했다.. (나중에 알게된 사실은.. GitHub 탓이 맞다.)

전개

• 그렇다면 내가 직접 달린다..
  => 그렇게 Self-Hosted-Runner가 되기위해 터미널에 GitHub에 있는 명령어들을 터미널 입력해서 설치하고 연결에 성공했다!

절정

• 러너를 움직이게 하기 위해 프로젝트에 .github(폴더)/workflows(폴더)/jekyll-gh-pages.yml(jekyll 빌드 설정 파일)
  을 만들어 runs-on 라벨을 Windows로 바꿔 Self-Hosted-Runner를 호출해 보았다.

=> 응 Linux 아니면 컨테이너 못 만들어~
=> ..예?

결말

• 정신을 차려보니 이미 저녁이었고.. GitHub Action 의 Runner는 다시 잘 달리고 있었다..

3. 프로젝트 회의

• 오늘은 다같이 피드백받은대로 설명회를 짧게 진행하면서 우리의 진도를 실감하게 되었다.
  (조금 마ㅏㅏ니ㅣㅣ 느린것 같기두…?)

=> 발표가 금요일이라 목요일에 준완성은 시키고 발표준비를 시작해야 했기에..

• 회의를 해가며 Firebase API에 멤버 초대가 전부 되었고, 내일 할 일들을 중요도 위주로 계획했다.

• 내일은 많이 소통해가며 수정을 엄청나게 해나갈 “진짜” 의 날이다. 기대되!!
  (정신만 나가지 말자)

---