[스파르타 _ 리액트 과정] 18일차

et Ji·2022년 11월 23일

내배캠 리액트 스파르타 코딩클럽 팀 프로젝트

TIL

목록 보기

23/40

📜 진행 내용

[과제] 팀 _ 기초 프로젝트 진행
- [전체] 각자 담당 영역 작업
- [개인]
  - 로그인 페이지 - SNS 로그인 기능 문제 해결
  - 메인 페이지 - 게시글 DB로 저장 후 불러오기
  - 도메인 접속 체크

💡 배운내용

< 과제 _ 팀 기초 프로젝트 >

◾ 진행 내용

개인

도메인 접속 체크
- 어제 구매해서 호스트서버와 연동한 도메인이 계속 접속이 안되어, 가비아 고객센터까지 문의를 했었다.
- 문제는 없었는데 단지 내 컴퓨터에서 일시적으로 접속이 안되었었던 것.
- 원래 도메인 연동 후 24~48시간 내에는 접속이 원활하지 않은 부분이 있다고 한다.

로그인 페이지

어제 SNS 로그인 기능이 제대로 구현이 안되는 문제가 배포를 하지 않아서인줄 알았는데, 다시 보니 SNS 이미지를 감싸고 있는 버튼에 이벤트리스너를 등록하는게 아니라, 범위를 좁혀서 직접적으로 이미지 태그에 이벤트리스너를 등록하니까 정상적으로 작동 했다.

수정 전

<div class="container__right__login__sns">
        <button
          name="google"
          onclick="socialLogin(event)"
          class="container__right__login__sns__button"
        >
          <img
            src="./assets/google.png"
            class="container__right__login__sns__google"
          />
        </button>
        <button
          name="github"
          onclick="socialLogin(event)"
          class="container__right__login__sns__button"
        >
          <img
            src="./assets/github.png"
            class="container__right__login__sns__github"
          />
        </button>
      </div>

수정 후

<section class="container__right__login__sns">
        <img
          name="google"
          onclick="socialLogin(event)"
          src="./assets/google.png"
          class="container__right__login__sns__google"
        />
        <img
          name="github"
          onclick="socialLogin(event)"
          src="./assets/github.png"
          class="container__right__login__sns__github"
        />
      </section>

메인 페이지

게시글을 미리 DB 컬렉션에 저장했다가, 메인 페이지의 분류 버튼을 누를 때마다 각각 다른 content를 불러오는 기능을 구현해야 했다.
테스트로 했을 땐 잘 됐지만, 프로젝트에선 버튼을 누르면 DB-댓글 컬렉션에서 댓글리스트도 불러와야되고, DB-게시글 컬렉션에서 게시글 리스트도 불러와야 된다.
즉, 두 개의 컬렉션에서 DB 값을 불러와야 됐다.
하루종일 씨름을 하다가, 결국 튜터님의 도움을 받았는데 이 부분도 SNS 기능 문제 해결했을 때와 같은 맥락이었어서 허무하게 해결이 되었다.

그치만, 버튼마다 다른 게시글을 가져와야해서 이 부분을 내일 좀더 보완해야 된다.

수정 전

<div id="question-list">
    <div class="card questionCard">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <input type="text" value="testtest" id="commentId" />
        </blockquote>
      </div>
    </div>
  </div>

// 게시글 가져오기

export const getQuestionList = async () => {
  let qstObjList = [];
  const q = query(collection(dbService, 'questions'));
  const querySnapshot = await getDocs(q);
  querySnapshot.forEach((doc) => {
    const questionObj = {
      content: doc.content,
      ...doc.data(),
    };
    qstObjList.push(questionObj);
  });

  const questionList = document.getElementById('question-list');
  questionList.innerHTML = '';
  qstObjList.forEach((qstObj) => {
    const temp_html = `<div class="card questionCard">
    <div class="card-body">
      <blockquote class="blockquote mb-0">
          <input type="text" value=" ${qstObj.content}" id="commentId" />
      </blockquote>
    </div>
  </div>`;
    questionList.innerHTML = temp_html;
  });
};

수정 후

<div id="question-list">
    <div class="card questionCard">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <!-- <p class="commentText" id="commentId">
            1조에서 가장 코딩 잘하는 사람 과연 누구일까요??
          </p> -->
          <input type="text" id="commentId"/>
        </blockquote>
      </div>
    </div>
  </div>

/ 게시글 가져오기

export const getQuestionList = async () => {
  let qstObjList = [];
  const q = query(collection(dbService, 'questions'));

  const querySnapshot = await getDocs(q);
  querySnapshot.forEach((doc) => {
    const questionObj = {
      content: doc.content,
      ...doc.data(),
    };
    qstObjList.push(questionObj);
  });

  const commentInput = document.getElementById('commentId');

};