GitHub Profile Viewer 프로젝트 회고

중간고사가 끝났는데, 10월도 끝나가네요. 2024년도 끝나가고요, 25년까지 100일도 안남았다는데,,
사담은 각설하고 GitHub Profile Viewer 프로젝트 회고 정리합니다.

https://www.notion.so/GitHub-Profile-Viewer-12aeaede9dc58013a601c71d15bfae5d?pvs=4

시험이 끝나고 약 3일간의 일정을 잡고 개발을 진행했습니다.

---

💡 GitHub Profile Viewer, 어떤 프로젝트인가요?

kimjusnu/github_profile_viewer: GitHub_Profile_Viewer

GitHub - kimjusnu/github_profile_viewer: GitHub_Profile_Viewer

GitHub Profile Viewer는 GitHub 유저의 프로필과 주요 레포지토리 정보를 한눈에 확인할 수 있는 웹 애플리케이션이에요! 사용자가 GitHub 아이디만 입력하면, 그 유저의 프로젝트나 활동 기록을 손쉽게 조회할 수 있죠. "이 사람이 어떤 언어를 주로 쓸까?" "이 사람은 어떤 프로젝트를 해왔을까?" 같은 궁금증을 빠르고 직관적으로 해결해 줄 수 있어요.

---

🔥 왜 만들었냐구요?

사실 GitHub에 프로젝트를 올리는 건 어렵지 않지만, 모든 사람이 자신의 프로필에 README를 꼼꼼하게 작성하지는 않아요. 그러다 보니 그 유저가 어떤 프로젝트를 진행했는지, 어떤 언어를 주로 쓰는지 파악하는 게 쉽지 않다는 걸 느꼈죠.

이렇게 정리를 해두는 사람이 생각보다 많지가 않음..

그래서 "유저의 핵심 정보와 활동 내역을 더 쉽게 확인할 수 있는 서비스가 있으면 좋겠다!"라는 생각이 들었어요. 그리고 "내가 이 프로젝트를 직접 만들어 본다면, 기업 입장에서 뽑고 싶은 개발자로 성장할 수 있지 않을까?" 하는 기대도 있었죠. 헤헤,,

---

📐 기획 과정, 그리고 팀 협업 경험

학교에서의 협업은 실제 회사에서 하는 협업과 비슷하다고 생각했어요. 디자인을 전공하는 학우분과 함께 프로젝트를 진행하면서, 개발과 디자인이 서로 맞물리는 경험을 할 수 있었죠. 피그마(Figma)로 디자인 초안을 구성하고, 기능과 디자인이 충돌 없이 잘 맞아떨어지게 최적화했습니다.

이 과정은 앞으로 회사에서 PM, 기획자, 디자이너와 협업할 때도 도움이 될 거라고 생각해요. 대학생일 때 이런 협업 경험을 쌓아둔다면, 실무에 나가서도 훨씬 수월하게 적응할 수 있겠죠?

---

🛠️ 사용한 주요 기술들

• Next.js: 빠른 로딩과 SEO 최적화를 위해 선택한 React 프레임워크예요.
• TailwindCSS: 반응형 디자인을 빠르게 구현하기 위해 사용했어요.
• Zustand: 프로젝트의 상태 관리를 간편하게 하기 위한 라이브러리죠.
• GitHub REST API: 유저 정보와 레포지토리 데이터를 불러오는 데 핵심 역할을 해요.
• Vercel: 간편하게 배포하고 자동화 배포도 지원해서 너무 좋았어요.
• SEO 작업: Google Search Console에 사이트 등록하고 검색 노출을 준비했어요.

---

📅 WBS 계획

1️⃣ Day 1: 프로젝트 셋업 & API 연동

• Next.js와 TailwindCSS 설치
• GitHub API 연동 및 호출 테스트
• 디자인 초안을 피그마로 구성
• Zustand로 상태 관리 기본 구조 구현
• 기본적인 GitHub 프로필 검색 기능 만들기

2️⃣ Day 2: UI 구성 & 상태 관리

• 검색 바와 방문자 수 표시 기능 구현
• Zustand로 검색 이력 관리와 상태 최적화
• TailwindCSS로 반응형 웹 작업 완료
• 레포지토리 카드 컴포넌트 구현 및 map 함수로 데이터 렌더링

3️⃣ Day 3: 데이터 시각화와 배포

• 레포지토리의 언어 사용량과 기여도 표시
• Vercel을 통해 배포 완료
• Google Search Console에 사이트맵 등록으로 SEO 강화
• 프로젝트 회고 및 기술 블로그 작성

---

📈 이 프로젝트를 통해 배운 점

이 프로젝트는 단순한 기능 구현에서 끝나는 게 아니었어요. 다양한 기술을 배우고, 직접 적용해보면서 실제로 내가 부족했던 부분이 뭔지 깨달을 수 있었죠. 이런것들에 대한 글을 정리해서 업로드할 계획입니다!

내 문제였던것..

---

🚀 배포 링크

GitHub Profile Viewer 배포 링크
https://github-profile-viewer-mu.vercel.app/

GitHub Profile Viewer