온보딩 프로젝트를 마치며

 

짧으면 짧은 시간인 일주일 간의 온보딩 프로젝트를 마치며 팀장도 해보고 발표도 맡으며 정말 책임감을 가지고 노력했던 것 같다! 

 

해당 프로젝트는 팀원 및 자신을 소개하는 웹사이트를 만드는 프로젝트로 정말 즐겁게 진행했으며

 

맡은 부분은 멤버 카드 제작 및 페이지 연동 구현을 중심으로 맡았습니다.

 

이런 식으로 멤버가 새로 등록이 되면 

 

멤버 카드가 생기고 해당 멤버 카드를 누르면

 

세부 페이지로 이동하는 식의 플로우입니다.

 

 

      /* 카드 로직 시작 */
      let docs = await getDocs(
        query(collection(db, "members"), orderBy("name", "asc"))
      );

      docs.forEach((doc) => {
        let row = doc.data();

        let id = row["member_id"];
        let image = row["profile_url"];
        let name = row["name"];

        let temp_html = ` 
            <div class="col">
                <div class="card h-100" id="${id}">
                    <img src="${image}"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">${name}</h5>
                    </div>
                </div>
            </div>`;
        $("#card").append(temp_html);

        $(`#${id}`).on("click", function () {
          if (
            id === "seaking110" ||
            id === "codingTrip" ||
            id === "shryoo" ||
            id === "wjswlgh96" ||
            id === "pej"
          )
            window.location.href = "./" + id + ".html";
          else {
            window.location.href = "./" + "default.html?id=" + id;
          }
        });
      });

      $("#card").on("click", "");
      /* 카드 로직 종료 */

 

먼저 제가 짠 카드 로직은 firebase의 members의 컬렉션에서 데이터를 받아와서 이미지와 이름 정도를 카드 형태로 보여준 뒤 기존 멤버들의 카드가 눌렸을 때는 해당 멤버의 HTML 파일로 연결 시켜줬고 새로 추가된 멤버의 경우 디폴트 html을 만들어 id를 쿼리 스트링으로 해서 넘겨줬습니다!

 

		const app = initializeApp(firebaseConfig);
        const db = getFirestore(app);

        const urlParams = new URLSearchParams(window.location.search);
        const id = urlParams.get("id");

 

그 후 window.location.search를 이용하여 url에서 id 값을 추출해서 해당 아이디 값으로 파이어베이스와 연결하여 해당 데이터를 불러왔습니다.

 

개발 중 발생한 고민

디폴트 페이지 구현 및 데이터 전달 방법

문제

• 각 멤버 별 개인 페이지를 개별 HTML 파일로 구현
• 기존 멤버 카드를 클릭하면 해당 HTML로 이동하여 데이터를 넘겨줄 필요 없음
• 추가된 멤버는 멤버 카드를 클릭할 때 데이터를 넘겨주어야만 디폴트 페이지에서 식별 가능.

해결 과정

1. 데이터 전달 방식 검토
   • URL 쿼리 스트링
     • 데이터 크기가 작고 민감하지 않은 경우 적합
     • URL에 직접 표시되어 직관적이나 URL이 지저분해 보일 수 있음
   • LocalStorage
     • 대량 데이터 저장 및 반영구적 유지 가능
     • 복잡한 데이터 구조에 적합
2. 결론 및 선택
   • 넘겨야 할 데이터가 ID 하나로 단순하고, 크기도 작아 URL 쿼리 스트링 방식 채택
3. 구현 방법
   • 멤버 카드 클릭 시 ?id=”id” 형식으로 URL에 쿼리 스트링 추가
   • 디폴트 페이지에서 window.location.search를 활용해 ID 값 추출

• 만약 전달할 데이터가 많아지거나 로그인 처럼 유지해야한다면 LocalStorage 방식을 고려해야한다.

 

소감

• 프로젝트를 진행하며 팀장을 맡아 부담감도 조금 있었고 발표도 많이 떨렸지만 처음보는 사람들과 큰 문제 없이 소통하며 프로젝트를 완성도 있게 마무리했다는 점에 매우 만족스럽습니다.
• GIT 을 조금 더 잘 알게 된거 같고 Pull request를 사용하여 앞으로 프로젝트를 진행할 때 적극적으로 활용하여 많은 기능들을 사용하여 더욱 협업이 잘되도록 진행해보고 싶습니다. 
• 다음번엔 더욱 더 코드나 로직을 짤 때 이유를 생각하며 진행하고자 생각했고 주석을 조금 더 열심히 달아서 다른 인원들이 더욱 코드를 알아보기 쉽게 짜야겠다고 생각했습니다.

 

아쉬운 점

• 개인 페이지로 이동 시 HTML을 직접 연결해줬는데 default html을 만들며 데이터를 전송해줘야했는데 차라리 모든 페이지 연결 시 데이터 전송을 기본으로 통일성을 줬으면 어땠을까 생각합니다.
• 멤버 등록에도 id 가 필요하고 방명록에도 id가 필요하다면 차라리 로그인 기능 및 회원 가입 기능을 만들고 1개의 아이디로 모두 진행 했다면 어땠을까 생각합니다. 앞으로 다시 프로젝트를 진행한다면 DB 설계를 조금 더 열심히 해보고 싶다고 생각합니다!

 

오늘의 문제

https://seaking110.tistory.com/30

2024 - 12 - 30 오늘의 문제