💻패스트캠퍼스X야놀자 프론트엔드 개발 부트캠프_2차과제 회고작성

💻 HTML&CSS 클론 코딩 과제 회고 남기기 !

My Site

• 제가 개발한 LCK 선수 프로필 관리 페이지 입니다.
• 최대한 깔끔하고, 기능 구현하는 데에 있어 문제가 없게끔 만들고 싶었다.

++ 기능

• Firebase를 이용한 LCK 선수 프로필 등록 및 삭제 수정 기능

• 약간의 Animation

우선, 피드백 받은 부분을 검토해보자 !

• 이 부분에 대한 인사이트는 우선, LCK라는 국내 대회리그의 대표색을 그대로 차용해왔다. (조금이나마 원본의 느낌을 내기 위해서)
• 또한 다양한 색 배합 등을 찾아봤는데, 저 배경색을 쓰면서, 가독성이 나는 폰트 색상을 사실 찾기 조금 어려웠다.
• 그에 대한 해결책을 마땅히 찾지는 못했지만, 조금이나마 가독성이 좋은 CSS로 바꾸어보았다.

})
    .then((path) => {
      const playerData = {
        팀명: team.value,

-------------------------------

playerRef.get().then((snapshot) => {
    const playerData = snapshot.data();
    console.log(playerData);
    const currentImgURL = playerData.사진;

• 이 코드에 대해서 피드백을 받은 부분의 일부이다.
• 사실 FireStore, Firebase db를 이번 과제를 하면서 처음 사용해보았다.
• 당연히, 처음에는 다양한 인사이트를 참고해가며 코드를 개발하게 되었고, 변명 아닌 변명으로
• 이렇게 한글로 data를 보냈을 때, firestore에 query들로 한글로 만들어진 속성이 들어와 작업하기 편했었고, 처음 시작을 한글로 했기에, 그 후에도 한글을 껴가며 작업할 수 밖에 없었다.
• 하지만, 물론 한글로 코드를 짜도 문제가 없었지만, 개발을 할 때 좋지않은 습관인 것도 맞다!
• 그래서, 이번 리팩토링 시간 때 한글로 짜여진 쿼리들을 전부 영어로 고쳐두었다.

코드를 보자!

async function displayProfile() {
  const listProfile = document.querySelector(".profile_container");
  listProfile.innerHTML = "";
  await db
    .collection("person")
    .orderBy("생성일")
    .get()
    .then((snapshot) => {
      console.log(snapshot);
      if (snapshot.size === 0) {
        listProfile.innerHTML = "<p>등록된 선수가 없습니다.</p>";
        return;
      }
      snapshot.forEach((doc) => {
        const data = doc.data();
        console.log(data);
        let containerBox = `
        <div class ="player_profileContainer">
            <img src="${data.사진}" class="player_profilePhoto" onClick="redirectToDetail('${doc.id}')" />
            <div class ="overlay">
                <div class="player_text">${data.닉네임}</div>
                <div class="player_text">선수 상세 보기</div>
            </div>
        </div>`;
        listProfile.innerHTML += containerBox;
				});
	    });
}

• 이 부분에 대한 내용으로, 본인은 forEach를 돌리면서, 그에 상응하는 데이터 값들을 하나씩 innerHTML로 넣어주었다.
• 하지만, 이렇게 하면 확실히 메모리 사용 등의 문제가 생길 수도 있다고 생각을 하였고,
• 피드백을 받은 내용을 바탕으로 ~
• forEach는 단순히 data들을 한데 모아주는 용도로 사용하고, 그 모여든 데이터들을 한번에 추가하는 코드로 리팩토링을 했다.

async function displayProfile() {
  const listProfile = document.querySelector(".profile_container");
  listProfile.innerHTML = ""; // 초기화

  const profileHTML = []; // 내용을 저장할 배열

  await db
    .collection("person")
    .orderBy("생성일")
    .get()
    .then((snapshot) => {
      console.log(snapshot);
      if (snapshot.size === 0) {
        profileHTML.push("<p>등록된 선수가 없습니다.</p>");
      } else {
        snapshot.forEach((doc) => {
          const data = doc.data();
          console.log(data);
          let containerBox = `
          <div class ="player_profileContainer">
              <img src="${data.사진}" class="player_profilePhoto" onClick="redirectToDetail('${doc.id}')" />
              <div class ="overlay">
                  <div class="player_text">${data.닉네임}</div>
                  <div class="player_text">선수 상세 보기</div>
              </div>
          </div>`;
          profileHTML.push(containerBox);
        });
      }
    });

  // 배열에 저장된 내용을 한 번에 설정
  listProfile.innerHTML = profileHTML.join('');
}

이렇게 리팩토링을 해보았다.

• 이 코드는, 우선 내용을 저장할 배열(profileHTML)으로 모아두고,
• join을 사용하여 배열 요소를 하나의 문자열로 결합하여 한번에 innerHTMl에 넣어주었다.
 

이번 과제를 하며

💡
아쉬웠던 부분
• 우선 아쉬웠던 부분은, firebaseConfig 작성 파일에 secret key를 관리하지 못하고 코드 전문에 적어두었다는 점이다. 사실 여러가지 방법이 있었고, 버전 문제도 있었다.
• 하지만, 수강생 분들의 채팅을 참고하여 이번 리팩토링 과정에서 적용을 해보게 되었고, 어떤 식으로 진행해야 하는 지 알 수 있었다.
 
✅
좋았던 부분
• 이번 과제를 하며, firebase db나 firestore의 사용법을 익히게 된 것 같아 조금 더 배운 것이 있었고, 많은 자료를 참고하면서 얻은 지식들도 좋았다.
• 또한 다양한 분들의 코드를 리뷰하고 참고하면서 더 많이 배울 수 있는 환경이 좋았던 것 같다.
 

나아가야할 방향

• 확실히 이번 과제를 하면서, 부족함을 여전히 느꼈고, 꾸준히 열심히 해야겠다고 다시 한번 다짐하게 된 계기가 되었다.