💨11/28 내배캠 React 21일차

🐜 오늘 할 일

• 프로젝트 발표

---

📆 계획표

시간	내용	결과
9:00~21:00	프로젝트 발표 및 정리	☀️

---

👩🏼‍🌾 오늘의 줍줍 " " 🌾🌾

드디어 구현 완성한 우리의 웹사이트 : http://mycuteanimals.shop/  * 들어가기 전에 볼륨을 줄이고 들어가세요!!!⚠️⚠️

 

짧은 기간동안 땀흘려가며 만들어낸 프로젝트이다 보니 아쉬움과 개운함이 동시에 남았다.

 

내가 구현했던 기능

1. 페이지 랜딩 시 firebase의 포스터 이미지, 타이틀, 프로필이미지, 닉네임 데이터 불러오기
2. 타이틀, 닉네임 검색 필터링 기능 
3. 고정 nav바
4. 반응형 css layout
5. multi-column 레이아웃 적용
6. 페이지 이동
7. scroll top 버튼 활성화

팀 트러블 슈팅

- 로그인 안 해도 다른 페이지 볼 수 있었음

'/' path에서(hash='/') 로그인하면 main page, 로그인 안하면 auth page로 넘어가도록 수정

 

- failed to load resource: the server responded with a status of 404 (not found)

에러가 난 해당 파일의 id명을 바꾸고 파일명도 바꾸어서 해결하였습니다.

 

개인 트러블 슈팅 

- 웹 페이지 크기를 줄이면 화면 위 nav바에 main-columns이 잘리는 이유
nav바를 고정하기 위해 position:fixed로 지정해놨다. 그걸 position:sticky로 변경하니 해결되었다.
fixed = 일반문서흐름과 완전히 다르게 제외되어 고정하는 값 -> main-columns들이 인식을 못하여 margin값이 반영되지 않았다.
sticky = 고정되어 있지만, 일반문서흐름과 같이 반응하고, 상위요소와 달라붙기 때문에 main-columns을 인식하여 margin값이 반영되어 반응형으로 만들 수 있었다.

 

- 검색기능 구현

이 전에 코드를 작성하고, 반영하였을 때, 내가 가져오려 하는 title,name값은 console.log를 찍었을 때 값이 나왔다.
item[i].style.display = "block"으로 읽은 값을 해당 게시물을 표시하고 싶었지만, 왠지 모르게 계속 하나의 값이 아닌 그것에 해당하지 않는 값들 까지 불러오게 되었다.
if문이 잘못된건지, 다른 것들이 잘못 된건지 확인했을 때 이상이 없었고,
문제는 해당 글 내용을 가져 오고 다시 display할 때, 상위div값을 불러오게 되어 큰 덩이리를 한 묶음으로 인지하게 되었다.
그래서 그 div값을 다 불러오니 당연히...이런 기본적인 실수를 하게 되었다.

 

 

맘에 들었던 코드

export const getPostList = async () => {
  const postList = document.getElementById("main_columns");
  postList.innerHTML = "";
  const docId = "";
  const querySnapShot = await getDocs(collection(dbService, "post"));
  querySnapShot.forEach(async (doc) => {
    const docId = doc.id;
    const { userId, image, title, content } = doc.data();
    const { profileImage, nickName } = await getUserProfile(userId);
    const temp_html = `<div class="main_contents">
                          <figure onclick="clickPost('${docId}')" class="main_post">
                              <img
                                id="image"
                                src="${image}"
                              />
                              <figcaption>
                                <a class="main_title">${title}</a>
                                <div id="users">
                                  <img id="profileImage"
                                  src="${profileImage}"
                                  />
                                  <a class="main_name">${nickName}</a>
                                </div>
                              </figcaption>
                            </figure>
                            </div>`;

    const div = document.createElement("div");
    div.innerHTML = temp_html;
    postList.appendChild(div);
  });
};

페이지 랜딩 시 데이터를 불러와 해당 figure에 띄우는 코드이다. 같은 조 팀원인 쿠쿠댜니님을 코드를 인용하여 사용하였다.(감사합니다🧤)
함수 내 객체를 수정하고, 데이터 값을 찾기위해 오류가 많이 있었다.

하나의 figure에 두가지 firebase collection에 들어가 있는 데이터를 불러오는 부분이 있어 조금 해맸지만 firebase의 doc.data()함수를 이용하여 해결할 수 있었다.

완전히 나만의 코드가 아니기 때문에 아쉬운 점들도 많았지만, 이런식으로라도 조금이라도 코드를 이해할 수 있게 되어 동기부여가 더욱 확실히 되기도 했다.

 

이렇게 느꼈어요..

저저번주 원격 강의를 열심히(?)들으며 이번 프로젝트를 위해 충분히 예열했다고 생각했지만 정말 큰 오산이었다. 프로젝트가 막상 시작되니 향 맡은 모기처럼 정신 못 차리고 우왕좌왕했지만 우리 큐트큐트 CUTE7 조원들과 함께 차근차근 문제를 해결해 나갈 수 있었다. 개인적으로 저번 미니 프로젝트에서 배웠던 layout적인 문제점들을 이번 프로젝트에선 개선해 나가려고 노력하였고, 기획 전 구체적으로 계획하여 그때의 문제점들을 조금 보완할 수 있었다. 기능적인 부분도 모든 팀원들과 다른 팀원분들이 도와주셔서 해결할 수 있었지만, 완전히 내 것이 된 것 같은 기분이 들진 않아 조금 더 공부해 나갈 계획이다.
이번 프로젝트도 팀원들을 너무 너무 잘 만나 많은 것들을 배우고, 참고하고, 깨달았던 시간이었다. CUTE 7🧡