미리보기

프로젝트 설명

평소 농구를 좋아하는 PM의 아이디어로 현재 네이버 카페에만 의존하고 있는 농구 커뮤니티를 좀 더 개선된 웹앱 형태로 개발해 더 편리하게 농구할 장소와 함께할 친구를 찾을 수 있는 서비스입니다.
🔗 Github | https://www.slam-talk.site

⚙️ 사용 기술

• 프레임워크, 언어: Next.js, TypeScript
• 패키지 매니저: Npm
• 상태 관리: React Query, Zustand
• CSS: Next UI, Tailwind CSS
• CI/CD 및 배포: Github Actions, Vercel
• 기타: React Hook Form

👩🏻💻 내가 기여한 부분

• 주요 기능 구현

  • Kakao Maps API를 이용해 농구장 지도 및 제보 기능 개발
  • 농구장 지도 개발 중 위도, 경도, 주소를 쉽게 찾을 수 있는 사이트 추가 개발
  • 회원가입 및 유저 정보 수집 화면을 단계별로 분리하여 UX 개선
  • 인앱 알림 API에 알림 아바타 기능 추가, 채팅방 목록 및 입장 시 로딩 설정으로 오류 발생 가능성 감소

• Next UI 및 React Hook Form을 활용한 실시간 유효성 검사와 코드 최적화

• 새로운 기술(React Query) 도입으로 팀 생산성 향상에 기여

• Next.js 환경 설정, Github Actions를 이용한 CI/CD 설정

• SEO 최적화

  • Google Analytics 설정
  • title 및 meta 태그 설정 등으로 lighthouse SEO 점수 100점 달성

💥 트러블 슈팅

• 토큰 저장, 로그인 유지:

  • 보안을 위해 accessToken을 메모리에 저장하는 과정에서 상태 값이 날아가는 문제를 해결하기 위해, 새로고침 시마다 React Query를 활용해 토큰 재발급 요청.

• 제보 상태 바로 업데이트:

  • 농구장 제보 완료 후 지도에 ‘제보 검토 중 마커’를 즉시 표시하기 위해 React Query의 refetch를 활용해 제보 성공 완료 후 서버 반영사항을 바로 지도에 업데이트.

• useState의 비동기 작동

  • useState가 비동기적으로 작동하는 원리를 이해하고, 상태 업데이트 후 조건부 렌더링이 즉시 발생하지 않는 문제를 해결.

프로젝트 설명

인스타그램, 트위터 등 주요 SNS처럼 주변인들(주로 개발자 친구들)과 쉽게 소통할 수 있는 실시간 커뮤니티를 만들고 싶어 틈틈히 개발했습니다. 간단하고 편리한 사용에 집중했으며 커뮤니티에 필요한 기능들을 점차 추가하고 있습니다.
🔗 Github | https://realtime-x-1f51f.web.app

⚙️ 사용 기술

• 프레임워크, 언어: React, TypeScript
• 데이터베이스: Firestore
• 빌드, 패키지 매니저: Vite, Npm
• CSS: Styled-Components, 일부 Tailwind CSS
• 배포: Firebase Hosting

👩🏻💻 내가 기여한 부분

• 실시간 업데이트가 되는 커뮤니티 구현
  • 글, 태그, 사진 CRUD 기능 구현
  • 전체 검색(글 내용, 태그, 작성자 포함) 기능 구현
  • 무한 스크롤 기능 구현
  • 좋아요/북마크 기능 구현, 해당 목록 페이지 구현
• 인증 및 사용자 관리
  • 이메일, 구글, 깃허브 로그인 기능 구현
  • 유저 정보 수정 기능 구현 (이름, 프로필 사진)
• 데이터베이스 설계 및 구현
  • 내가 ‘좋아요’한 글에 하트 표시, ‘좋아요한 글 목록’ 두 가지 기능을 만들기 위해 데이터베이스 설계시 해당 글 문서 likedBy 필드에 ‘좋아요’시 유저id를 삽입해 관리
• 실시간 업데이트를 위해 Firestore의 onSnapshot() 메서드를 활용해 데이터 변경 사항을 감지

💥 트러블 슈팅

• 이미지 스플리팅 및 Suspense 오류
  • 이미지 스플리팅과 동적 이미지 로딩 시 발생한 Suspense 오류를 해결하기 위해 Suspense 컴포넌트를 추가하고 로딩 상태를 표시.

프로젝트 설명

원활한 협업을 위해 동시 편집이 가능한 코드 에디터, 참여자간 소통을 위한 채팅, ChatGPT로 바로 옆에서 코드 리뷰 할 수 있는 협업용 Web IDE입니다.
🔗 Github | https://the-greate-ide.vercel.app (현재 백엔드 서버 중단)

⚙️ 사용 기술

• 프레임워크 및 언어: Next.js, TypeScript
• 패키지 매니저: Npm
• 상태 관리: Zustand
• CSS: Styled-Components, 일부 MUI
• CI/CD 및 배포: Github Actions, Vercel
• 기타: CodeMirror, Liveblocks, Jira

👩🏻💻 내가 기여한 부분

• 실시간 동시 편집 코드 에디터 구현: CodeMirror와 Liveblocks를 이용해 여러 사용자가 동시에 코드를 편집할 수 있는 기능 개발
• 메인 페이지 및 프로젝트 목록 페이지 구현:
  • 프로젝트 목록 UI 및 반응형 설정
  • 프로젝트 삭제 및 비밀번호 변경 기능 구현
• 다크/라이트 테마 설정: Styled-Components의 ThemeProvider를 활용해 다크 모드와 라이트 모드 설정
• 개발 환경 설정: GitHub Actions를 이용해 CI/CD 파이프라인 구축, Husky를 사용해 커밋마다 자동 린트 검사 설정, Next.js 환경 설정

💥 트러블 슈팅

• 다중 파일 환경 접속 문제 해결:
  • Liveblocks를 이용해 각 파일마다 독립적인 Room을 생성하여 다중 사용자가 각각의 파일에서 동시에 작업할 수 있도록 구현.
• 서버 사이드 인증 문제 해결:
  • Next.js 서버에서 인증된 유저 정보를 필요로 할 때, 클라이언트 요청을 통해 Next.js 서버가 Spring Boot 서버로부터 인증 정보를 받아 처리하도록 구현.

• 주 2회 정해진 시간에 디스코드에 모여서 주로 개발 도서를 읽거나 개인 공부를 하는 스터디 운영중
• 자율 스터디로 전환하면서 디스코드 자동 출석체크봇 개발로 출석 자동화

• '인공지능 기초 다지기' 강의를 수강하고 6주간 팀 미션을 풀어보는 코칭 스터디
• 인공지능의 전반적인 기초 지식을 습득하고 Python, NumPy 학습

• '파이썬으로 시작하는 데이터 사이언스', '모두를 위한 데이터 사이언스' 강의를 수강하고 4주간 팀 미션을 풀어보는 코칭 스터디
• 한 달간 팀 리더로 활동하며 2주 이상 우수 미션 팀으로 선정
• 주로 pandas, seaborn을 활용한 데이터 분석, 시각화 학습