프론트엔드 개발자

배성규

안녕하세요. 프론트엔드 개발자 배성규입니다. 

다른 사람의 코드와 생각을 나누는 것은 함께 더 좋은 방향으로 성장할 수 있다고 생각하여 협업 프로젝트에 참여하고 있습니다. 
또한, 프로젝트 중, 발생한 에러를 포기하지 않고 해결하고자 노력하고 그 과정을 블로그에 기록하여 지식을 공유하고 기억에 남기고 있습니다. 
현재, 기존에 만들었던 프로젝트를 마이그레이션 작업하여 실 배포를 목표로 개선 작업 중입니다.

배성규_이력서.pdf

졸업가능?

<h3><strong>프로젝트 소개</strong></h3>
<p>한신대학교 재학생 누구나 학업 성적 확인서 PDF 업로드를 통해 본인의 졸업요건 결과를 확인할 수 있는 서비스 </p>
<ul>
<li>졸업요건 조회 결과를 제공하여 간편하게 학우들이 졸업요건을 만족했는지 확인할 수 있고, 인기 교양 추천 서비스를 통해 본인에게 부족한 과목을 채울 수 있는 서비스를 사용자에게 제공</li>
</ul>
<p>[테스트 계정] 아이디 : bae1374 비밀번호 : test1234</p>
<h3><strong>개발 및 기여 내용</strong></h3>
<ul>
<li><strong>성능 개선</strong>을 위한 코드 분할<ul>
<li>프로젝트 라우터 수준에서 <code>React.lazy</code>를 도입하여 성능 최적화<ul>
<li>기존 프로젝트 초기 로딩 시에 모든 컴포넌트가 번들에 포함되어 있었습니다. 이는 코드의 양이 많아지게 되면 번들의 크기가 커져 긴 로딩 시간이 생길 수 있었습니다.</li>
<li>라우터 수준에서 <code>React.lazy</code>를 도입해 페이지별로 코드 분할을 적용했고, <code>Suspense</code>를 활용하여 로딩되는 시간 동안 로딩 컴포넌트를 추가해 사용자 이탈을 방지하도록 만들었습니다.</li>
<li>이러한 변경으로 필요한 컴포넌트를 동적으로 로드되도록 만들고, 초기 번들 크기를 줄여 사용자들에게 더 빠른 초기 로딩 속도를 제공하여 사용자 경험을 개선했습니다.</li>
</ul>
</li>
</ul>
</li>
<li>검색 시 <strong>불필요한 API 호출을 방지</strong>하기 위해 <code>Debounce</code> 기능 적용<ul>
<li>검색 기능 사용 시, 데이터가 입력될 때마다 불필요하게 API를 호출하는 부분을 인식했습니다.</li>
<li>이를 해결하기 위해서 <code>Debounce</code>를 적용하여 일정 시간 이상으로 입력이 들어오지 않아야 API를 호출하도록 했습니다.</li>
<li>이러한 변경으로 불필요한 API 호출을 개선할 수 있었습니다.</li>
</ul>
</li>
<li>서버와 <strong>Restful API 통신 기능 구현</strong><ul>
<li><strong>Create, Read, Update, Delete 및 페이지네이션, 검색 기능</strong> 구현 ****</li>
<li>졸업 요건 확인 서비스 내 <strong>PDF 데이터 송수신 기능</strong> 구현</li>
<li>서버와 API 통신 시 CORS 에러가 발생하여 동일 출처 정책(SOP)을 위반하지 않기 위해 <strong>프록시 서버</strong> 설정하여 해결한 뒤, 팀원에게 이슈를 공유하여 서버 단에서 Access-Control-Allow-Origin 헤더를 설정하도록 했습니다.</li>
<li>비동기 처리를 하는 방법 중 코드 가독성과 유지보수의 이점을 생각하여 <code>async/await</code> 을 사용하여 구현했습니다.</li>
</ul>
</li>
<li><code>Media query</code>를 적용한 반응형 디자인으로 <strong>다양한 기기에서 동일한 사용자 경험을 제공</strong></li>
</ul>


졸업가능? v2

<h3><strong>프로젝트 소개</strong></h3>
<p>나만 알고 있는 우리 동네 미지의 공간을 특별한 큐레이팅을 통해 소개하는 서비스 </p>
<ul>
<li>거리 미관 사진들이 나오고 지도에서 주소 및 위치를 알 수 있어 실제로 구경할 수 있는 서비스 제공 및 댓글을 통해 미관에 대한 의견을 공유하는 서비스 제공</li>
</ul>
<h3>개발 및 기여내용</h3>
<ul>
<li><code>Intersection Observer</code>를 사용하여 메인 페이지 내 무한 스크롤을 구현하여 사용성 개선<ul>
<li><code>useRef</code>와 <code>threshold</code>를 활용하여 감지된 요소의 일정 퍼센트가 넘어갈 시 6개 단위로 데이터를 가져올 수 있도록 구현 <strong><a href="https://github.com/mi-gan-zi/FE-MiGanZi/blob/main/src/hooks/useIntersectionObserver.ts">[해당 코드]</a></strong></li>
</ul>
</li>
<li><code>Interval</code>을 사용하여 메인 페이지 내 캐러셀 기능 구현<ul>
<li><code>useRef</code>로 컴포넌트가 새로 렌더링이 되어도 최신 값을 받아서 사용할 수 있도록 구현 <a href="https://github.com/mi-gan-zi/FE-MiGanZi/blob/main/src/hooks/useInterval.ts"><strong>[해당 코드]</strong></a></li>
</ul>
</li>
<li>게시글 이미지 등록 시 <code>Image Cropper</code>기능으로 사용자가 원하는 이미지로 크롭할 수 있도록 구현</li>
<li>중복 로직을 커스텀 훅으로 분리하여 재사용성 개선</li>
</ul>
