내일배움캠프 3일차(2_17 시작)

박화랑·2025년 2월 19일

Spring_6기

목록 보기

1/17

Velog 개발 기록 (Self-Introduction Page 개발 과정)

내일배움캠프를 시작한 지 3일차입니다...
1, 2일차가 없는 이유는 강의시청이랑 메인페이지 뼈대를 제가 작성한다고 했기 때문이죠...
게다가 이번달까지는 아르바이트 대타를 못 구해 그만두지 못하는 상태라 시간이 많이 부족했습니다. 그래도 완벽하진 않지만 목표를 잘 마무리 한 것 같습니다. 3일차를 한 번에 채우다보니 강의 내용은 제외하고 작업 내용을 넣으려고 합니다
먼저 첫 날 모두가 개발이나 코딩 경험이 있기 때문에 이번주 금요일까지 하는 미니프로젝트에 참여하는 것을 신청했습니다. 원래는 사전 강의를 대부분 시청한 사람만 할 수 있지만 이 공부 과정에 익숙해지려면 필요할 것 같더라구요. 다른 사전 강의 신청자 분들은 미리 공부해두시길 추천드려요. 저는 비전공자는 아니었지만 공부할게 많더라구요

프로젝트 개요

Self-Introduction Page는 팀원들의 프로필을 관리하고 소개하는 웹 애플리케이션이다.
Firestore를 기반으로 회원가입 및 프로필 관리 기능을 구현했으며,
프로필에는 이름, 이메일, 역할, 기술 스택, GitHub 링크, 전화번호, MBTI, 자기소개(BIO) 등등 많은 내용이 포함된다.
또한, SHA-256 비밀번호 해싱, 프로필 이미지 지원(Google Drive 변환), 이메일 복사 기능 등까지 구현을 완료했다.

개발 과정 & 문제 해결

1️⃣ 메인 페이지 뼈대 작성

목표: 팀원 리스트를 메인 페이지에 나열하고, 클릭 시 개인 프로필 페이지로 이동
구현 방식:
- Firebase Firestore에서 팀원 데이터를 가져와 동적 생성
- <a> 태그를 활용하여 team.html?name=홍길동 방식으로 링크 연결
- JavaScript와 jQuery를 사용하여 Firestore 데이터를 불러와 화면에 출력
문제 발생:
- Firestore에서 데이터를 가져오는 과정에서 비동기 처리 문제 발생
- .then()을 사용하여 해결했지만 코드 가독성이 떨어짐
- 해결: async/await을 적용하여 비동기 코드를 더 깔끔하게 정리

2️⃣ 회원가입 페이지 (Register)

목표: 사용자가 자신의 정보를 입력하고 Firestore에 저장
추가된 필드:
- 프로필 이미지 URL 추가 (Google Drive 변환 지원)
- 전화번호 추가 (Firestore에 함께 저장)
- MBTI 추가 (셀렉트 박스로 선택)
- 자기소개(BIO) 추가 (최대 300자 제한)
비밀번호 보안 강화:
- SHA-256 해싱 적용 (Firestore에 해싱된 상태로 저장)
문제 발생:
- $(...).val.trim is not a function 오류 발생 🚨
- 원인: .val().trim()을 사용했지만 textarea의 val()이 null인 경우 발생
- 해결: $('#bio').val()?.trim() || "" 형태로 수정하여 기본값 처리

3️⃣ 프로필 페이지 (Profile Page)

목표: team.html?name=홍길동 형태의 URL에서 이름을 읽어와 해당 팀원의 정보 표시
구현한 기능:
- Firestore에서 해당 팀원의 데이터 조회 및 출력
- 프로필 이미지 표시 (Google Drive 링크 변환)
- 전화번호 출력
- 이메일 클릭 시 복사 기능 적용 (📋 클릭 시 복사)
- 기술 스택 레벨을 ⭐️⭐️⭐️ 형식으로 변환 (기존 `*` → ⭐️)**
문제 발생:
- GitHub의 이미지 링크를 사용했을 때 1초 후 사라지는 문제 발생 😵
- 원인: `https://github.com/hugecookie' 형태의 링크는 직접 표시 불가
- 해결: 'https://raw.githubusercontent.com/' 형태의 링크로 교체해야함!!

4️⃣ Firestore 데이터 구조 설계

목표: 데이터의 효율적인 저장과 검색 최적화

설계한 구조:

📂 Firestore Root  
└── 📁 teamMembers  (팀원 컬렉션)  
    ├── 📄 {memberId} (각 팀원 문서)  
        ├── name: "홍길동"  
        ├── email: "hong@example.com"  
        ├── role: "Frontend Developer"  
        ├── skills: "JavaScript, React, Firebase"  
        ├── github: "https://github.com/hong"  
        ├── profileImage: "https://drive.google.com/uc?id=..."  
        ├── phoneNumber: "+82-10-1234-5678"  
        ├── bio: "안녕하세요! 저는 프론트엔드 개발자입니다."  
        ├── mbti: "INFJ"  
        ├── password: "sha256 해싱된 비밀번호"  
        ├── 📁 education  (학력 컬렉션)  
        ├── 📁 projects  (프로젝트 컬렉션)  
        ├── 📁 certificates  (자격증 컬렉션)  
        ├── 📁 skills  (기술 스택 컬렉션, ⭐️⭐️⭐️ 변환 적용)

문제 발생:
- 기존 데이터에 필드를 추가할 수 없음 (profileImage, phoneNumber 추가 시)
- 해결: 기존 데이터는 수동으로 업데이트하고, 새로 추가되는 데이터에는 해당 필드 포함

앞으로 추가할 기능

✅ Firestore 보안 규칙 설정 (비밀번호 보호 강화)
✅ 회원 정보 수정 기능 추가 (프로필 수정 가능하도록 개선)
✅ Firebase Storage 또는 Cloudinary 사용 고려 (이미지 업로드 안정성 문제 해결, 하지만 시간이 부족하므로 못할 듯 ㅜㅜ)
✅ 프로필 페이지 UI 개선 (Bootstrap 활용, 더 직관적인 디자인 적용 -> 튜터님께 피드백 받은 결과 와이어 프레임 완성은 필수로 생각해야 할 듯...)

결론

프로젝트 진행하며 배운 점

✅ Firestore 데이터를 다룰 때 비동기 처리 (async/await)의 중요성
✅ SHA-256 해싱을 적용하여 보안성을 강화하는 방법
✅ Google Drive, GitHub 등의 이미지 URL 변환 방식과 문제 해결
✅ $(...).val.trim is not a function 같은 JavaScript 오류 해결 방법
✅ 시간이 너무나도 부족하다!!! 목요일까진 얼추 다 완성해야 하는데 갈 길이 너무 멀다! 발표자료 제출이 12시고 발표가 2시인데 목요일 회의 전에 하는게 맞는지 난 정말 모르겠다...

마무리

이 프로젝트를 통해 Firebase Firestore를 활용한 회원가입 및 데이터 관리,
비동기 프로그래밍, 보안, 이미지 처리 등을 경험할 수 있었다. 우선 내일 팀원분들을 보채서 빨리 끝내도록 해야겠다!
앞으로 더 많은 기능을 추가하며 완성도 높은 팀원 프로필 페이지를 만들어갈 예정이다!

Velog에 기록하며 TIL을 매일 작성하는데 익숙해지도록 해야겠다!

박화랑

개발자 희망생

다음 포스트