231011 미니과제 회고

어떤 프로젝트?

팀을 소개하는 프로젝트를 진행. '팀 페이지', '팀원 페이지'로 2명 씩 나눠서 진행
나는 '팀 페이지'를 맡음

사용 툴, 공부했던 것들

협업 툴

• 노션
• Discord(+Webhook)
• Github

기술

• HTML, CSS, JS
• Firebase Database
• Firebase Storage

API 명세서

• GitBook을 사용

JS 문법과 모듈화(import와 export)

공부하면서 힘들었던 것들

1. html 파일 하나에 html, css, js이 모두 들어가서 코드 관리가 너무 힘들었음. 파일을 나누고 모듈화의 필요성을 절실히 느끼고 적용함.

2. firebase 문서의 ID값을 이용하는 방법

let docs = await getDocs(collection(db, "team"));
/* FOR EACH MEMBERS */
docs.forEach(async (doc) => {
  let docsId = doc.id;
  /// forEach와 .id를 통해서 문서 ID값에 접근하고 docsId 넣는다.

// 각 카드에 클릭 이벤트 핸들러 추가
$(`#membercard-${docsId}`).click(function () {
    // 문서 ID를 URL에 추가하여 새로운 페이지로 이동
    const url = `member_card.html?id=${docsId}`;
    window.location.href = url;

3. 경험자들 입에서 나오는 용어들이 너무 낯설고 힘들었음 < 시간과 경험이 해결

생각한 것들

1. 노션이 진짜 편하다. 처음엔 어려워도 익숙해 지도록 노력해보자.
2. 디스코드에 깃허브 웹훅 연동도 진짜 편하다. 앞으로 팀프로젝트할때 팀원에게 건의해보기.

// 각 카드에 클릭 이벤트 핸들러 추가
$(`#membercard-${docsId}`).click(function () {
    // 문서 ID를 URL에 추가하여 새로운 페이지로 이동
    const url = `member_card.html?id=${docsId}`;
    window.location.href = url;
    
const url_str = window.location.href;
const url = new URL(url_str);
const id = url.searchParams.get("id");

다음을 통해서 URL에서 id값을 주고 받는 듯한 모습이 신기하고 내가 무엇인가 하나 만들었다는 기분이 들었음.