구본헌

안녕하세요. 꾸준히 성장하는 개발자 구본헌입니다.

정보처리기사

구본헌 포트폴리오

구본헌 Github

구본헌 블로그

주변 계곡 정보를 제공하는 서비스<h4>담당 파트 지도페이지</h4><ul><li>카카오맵 API를 활용한 지도 인터페이스 개발<ul><li>현재 위치 기반 계곡 검색 및 표시</li><li>지역 내 재검색 기능으로 동적 데이터 로딩</li><li>클러스터링을 통한 마커 최적화 관리</li></ul></li><li>사용자 친화적 UI/UX 구현<ul><li>화면 하단 토글로 현재 지도 내 계곡 목록 표시</li><li>마커 클릭 시 해당 계곡 정보 하이라이트 및 최상단 표시</li></ul></li><li>주변 시설 정보 통합 제공<ul><li>카테고리 기반 주차장/병원 검색 및 표시</li><li>시설물 상세 정보 제공 및 카카오맵 연동</li><li>바운딩 박스 기반 최적화된 데이터 필터링</li></ul></li></ul>계곡 상세 페이지<ul><li>핵심 정보 제공<ul><li>물놀이/야영/주차장 가능 여부를 아이콘(✓, ✗, ?)으로 표시</li><li>계곡 기본 정보 및 부가 정보 제공</li><li>사용자 정보 제보 시스템 구현</li></ul></li><li>날씨 및 위치 서비스 통합<ul><li>Weather API 연동으로 7일 날씨 예보 제공</li><li>카카오맵 길찾기 연동 및 주변 시설 정보 확인</li><li>지도 페이지와 연계한 위치 정보 시스템 구현</li></ul></li></ul>계곡 리뷰 페이지<ul><li>사용자 리뷰 관리 기능<ul><li>무한 스크롤 방식의 리뷰 목록 제공</li><li>사용자별 리뷰 필터링 기능</li><li>상단 고정 유저 아이콘으로 빠른 접근성 제공</li></ul></li><li>사진 갤러리 시스템<ul><li>그리드 레이아웃으로 리뷰 사진 일괄 표시</li><li>사진 클릭 시 확대 보기 기능</li><li>사진과 연계된 리뷰 내용 미리보기 제공</li></ul></li></ul><h4>사용기술</h4>React, Typescript, Tailwind, Zustand, Vite, React-Query<h4>링크</h4><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/JJHHYB/deepvalley-front">Github</a>

깊은산골짜기

Next를 이해하기 위해 만든 개인 블로그 서비스입니다.<ul><li>Next의 SSG로 설계하여 빠른 웹사이트 구축</li><li>Chakra UI와 CSS 모듈을 활용하여 각 컴포넌트에 대한 스타일을 독립적으로 관리하고, 접근성이 뛰어난 UI 컴포넌트 구현</li><li>SEO 최적화를 위해 메타데이터 설정 각 페이지에 맞는 메타데이터를 설정하여 검색 엔진 최적화</li><li>Vercel을 통한 자동 빌드 및 배포</li><li>최적화로 lighthouse 점수 개선 (60 -&gt; 95)</li></ul>

개인 블로그

실시간 알고리즘 대결 서비스<h4></h4><h4>담당 파트</h4><ul><li>공용 컴포넌트<ul><li>모달 시스템 설계(게임 결과창 및 방 생성)</li><li>게임 내 테스트 케이스 설정</li></ul></li><li>실시간 채팅<ul><li>전체 채팅과 게임방 채팅을 구분하여 설정</li><li>StompJs 라이브러리를 사용하여 WebSocket 연결을 설정하고, STOMP 프로토콜을 통해 메시지를 전송</li><li>메시지를 전송할 때 JSON 형식으로 데이터를 직렬화하여 서버에 전송</li></ul></li><li>UI/UX</li></ul><h4>사용기술</h4>React, Typescript, Tailwind, Zustand, Axios, Chakra UI<h4>링크</h4><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/gooormmoon/algorithm-fighter-front">Github</a>