프론트엔드 개발자

방혜찬

원활한 소통 능력과 실행력을 가진 프론트엔드 개발자입니다.
• 2년간 사내 개발자, 데이터 분석 강사로 근무하면서 상대방의 입장에서 정보를 전달하고 질문에 답하며 소통의 중요성을 깨달았습니다. 이후 사내 팀 프로젝트에서도 팀원과 소통하며 진행에 방해될 수 있는 습관을 개선했습니다.
• 퇴사 이후 쌓은 개발 지식을 바탕으로 취미생활을 하며 필요성을 느낀 서비스를 구체화한 개인 프로젝트를 4개월간 기획/개발 후 배포하여 8개월 간 유지보수한 경험이 있습니다.

이력서 및 면접 준비, 알고리즘 테스트, 개발 프로젝트 등 실전 중심의 취업 대비 프로그램에 참여했습니다. 몇주간 조장을 맡아 조원들의 참여를 독려하고, 정보 공유 및 주간 진행 상황을 체계적으로 관리하여 팀 내 원활한 협업을 주도했습니다.<ul><li>팀 내 일정 및 진행 상황을 정기적으로 정리 및 공유</li><li>이력서, 면접, 코딩 테스트 등 준비 자료 공유 및 피드백 주도</li><li>프로젝트 진행 시 팀원 간 역할 분담과 목표 달성 관리</li></ul>

항해99 취업 리부트 코스 3기

Github URL

개인 블로그 URL

<h2>솔직한 소통의 이커머스 서비스, 솔직</h2>리뷰 서비스들의 신뢰성을 차별점으로 가지는 이커머스 "스토어 솔직" 입니다.기존 이커머스 플랫폼은 게시글 형태의 리뷰 서비스를 운영하지만, 솔직에서는 채팅 기반의 상품 리뷰를 진행할 수 있습니다.<ul><li>Github : <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/momo1108/StoreSoljik">https://github.com/momo1108/StoreSoljik</a></li><li>Live Demo : <a target="_blank" rel="noopener noreferrer nofollow" href="https://store-soljik.vercel.app/signin">https://store-soljik.vercel.app/</a></li></ul><hr><h3>사용 스킬</h3><ul><li>Front-End : TypeScript, React, Styled-Components</li><li>Back-End : Firebase</li><li>Deploy : Vercel</li></ul><h3>구현 기능</h3><ul><li>회원가입 / 로그인<ul><li><code>Firebase Auth API</code> 로 소셜 로그인 결합(Google, X, Github)</li></ul></li><li>판매 상품 CRUD</li><li>상품 정보 조회 / 필터링 / 정렬<ul><li><code>Firestore API</code> 를 통한 채팅 기능 추가</li></ul></li><li>장바구니 / 상품 구매<ul><li><code>tosspayments-sdk</code> 로 가상 결제 시스템 구현</li><li>배송 정보 입력에 <code>Daum Postcode API</code> 적용</li></ul></li><li>주문 정보 관리</li></ul><hr><h3>최적화</h3><ul><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://iwannabethehashs-organization.gitbook.io/project-soljik-devlog/optimization/editor#undefined-5">이미지 최적화</a><ul><li>출력 사이즈를 고려한 규격(250px, 600px, 원본)별 이미지 리사이징</li><li>이미지 포맷 변환(원본 포맷과 WebP 포맷을 같이 사용)</li></ul></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://iwannabethehashs-organization.gitbook.io/project-soljik-devlog/optimization/markdown">Lazy Loading / Code Splitting</a><ul><li>페이지 단위로 Lazy Loading 적용</li><li><code>Vite</code> 번들러의 옵션을 설정해 의존성 패키지들에 Code Splitting 적용</li></ul></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://iwannabethehashs-organization.gitbook.io/project-soljik-devlog/optimization/images-and-media">렌더링 최적화</a><ul><li><code>react-hook-form</code> 도입을 통한 input 컴포넌트 렌더링 최적화</li><li>React Context 의 분리를 통한 렌더링 최적화</li></ul></li><li>데이터 캐싱 및 이미지 프리로딩</li></ul><h3>트러블 슈팅</h3><ul><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://iwannabethehashs-organization.gitbook.io/project-soljik-devlog/trouble-shooting/firebase-session">Firebase Auth API 의 세션 커스터마이징</a> 서버리스 환경으로 인해 세션 쿠키 설정 메서드를 사용 불가<ul><li>setTimeout 메서드와 toast 를 활용한 세션 유지 알림</li><li>localStorage 를 활용해 여러 탭의 세션 시간 동기화</li></ul></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://iwannabethehashs-organization.gitbook.io/project-soljik-devlog/trouble-shooting/firebase-cors">이미지 리팩토링 과정에서 CORS 에러 발생</a> 로컬 개발 환경에서 <code>Firebase Storage API</code> 내부의 이미지 url 로 Image 객체 생성 시 CORS 에러 발생<ul><li><code>Vite</code> 번들러의 proxy 기능을 활용하여 개발 환경에만 프록시를 적용</li></ul></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://iwannabethehashs-organization.gitbook.io/project-soljik-devlog/trouble-shooting/api">Daum Postcode API 도입</a> 공식 문서의 권장 방식은 script 태그 삽입 방식으로, 사용 여부와 상관없이 전체 스크립트를 로딩하고 에러 핸들링이 불가능<ul><li>Promise 객체와 document.createElement 메서드를 활용한 유틸 함수로 동기적으로 로딩 및 에러 핸들링</li></ul></li></ul>

채팅형 리뷰 이커머스, 솔직

<h2>게이머를 위한 편리한 정보 조회 서비스, Loaple</h2>MMORPG 게임 로스트아크의 공식 OpenAPI 를 활용해 인게임에서 어려운 세팅이나 단편적인 검색 기능을 보완하여 유저 최적화된 형태로 조회할 수 있는 서비스를 제공합니다.1년간 개발 / 운영하며 홍보없이 일일 최대 방문자수 13인을 달성했습니다.<ul><li>Github : <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/momo1108/LostarkProject">https://github.com/momo1108/LostarkProject</a></li></ul><hr><h3>사용 스킬</h3><ul><li>Front-End : TypeScript, JavaScript, React.js, Next.js, TailwindCSS, SCSS</li><li>Back-End : Node.js, Nginx, MySQL</li><li>Deploy : EC2</li></ul><h3>구현 기능</h3><ul><li>캐릭터 검색, 조회 기능 구현 인게임 검색 기능은 단편화된 정보가 여러 위치에 흩어져서 존재<ul><li>다양한 캐릭터 정보와 세팅 정보를 한 화면에서 조회할 수 있도록 최적화</li><li>axios 와 정규식으로 OpenAPI 응답 데이터를 파싱하여 서비스에 사용</li><li>검색 기록의 유지를 위해 localStorage 로 최근 검색 기록 페이지 구현</li></ul></li><li>최저가 아이템 세팅 검색 기능 구현 인게임 검색 기능은 최소 5회 이상의 매물 검색 과정, 수백개의 매물 중 최저가를 조합을 직접 찾아야 함<ul><li>조건을 설정하고 한번 검색하면 자동으로 여러 매물들을 검색 후 최저가 조합을 계산</li><li>OpenAPI 의 매물 데이터에 Brute Force 알고리즘을 적용해 최저가 조합 탐색 기능 구현</li></ul></li></ul><hr><h3>최적화</h3><ul><li>Blocking 이슈 해소 최저가 아이템 세팅 탐색 시 응답 지연 및 화면 멈춤 현상 발생<ul><li>다른 웹사이트의 request 패킷 분석을 통해 연산 최적화</li><li><code>Web Workers API</code> 도입으로 연산을 별도 쓰레드에서 처리하여 메인 쓰레드 블로킹 방지</li></ul></li><li>성능 개선<ul><li>최근 검색 기록의 프리뷰 이미지 용량이 너무 큼<ul><li>Next.js 의 Image 컴포넌트를 활용해 이미지 최적화</li></ul></li><li>최저가 아이템 세팅 탐색 시간이 너무 길어서 Blocking 발생<ul><li>타 웹사이트의 동일 기능에서 request 패킷을 분석하여 성능 최적화</li><li>Web Workers API 를 사용해 메인 쓰레드의 블락을 방지</li></ul></li></ul></li></ul><h3>접근성 및 사용자 경험 개선</h3><ul><li>반응형 디자인 개선<ul><li><code>tailwindCSS</code>의 <code>min-width</code> 기반 반응형 유틸리티 클래스를 활용하여 다양한 해상도 대응</li></ul></li><li>캐릭터 조회 페이지 개선 기존 타 서비스에서는 Modal로 상세 정보 제공하기 때문에 마우스 클릭과 이동이 잦아 불편<ul><li>마우스 hover 시 <code>Tooltip</code>으로 정보를 제공하여 조작 최소화(<code>react-tooltip</code> 사용)</li></ul></li><li>검색 조건 설정 방식 개선 기존 타 서비스에서는 필터링과 단순 드롭다운 UI로 검색 항목 선택<ul><li>이미지, 필터링, 방향키 조작 기능을 갖춘 커스텀 <code>Select 컴포넌트</code> 를 구현하여 시각적 편의와 키보드 접근성 강화</li></ul></li><li>SEO 적용<ul><li>모든 페이지에 <code>next-seo</code> 라이브러리를 적용해 메타태그 및 구조화 데이터 설정</li></ul></li></ul>

유저 친화적인 정보 조회 서비스, Loaple

<h2>Markdown to HTML 에 그룹을 적용하자</h2>기존 Markdown 문서를 HTML 로 파싱해주는 패키지들은 문단의 개념을 가지고 있지 않습니다.Markdown Grouper 는 헤더의 레벨(1~5)에 맞춰, 계층적인 문단의 그룹핑을 구현했습니다.<ul><li>Github : <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/momo1108/markdown-grouper">https://github.com/momo1108/markdown-grouper</a></li><li>NPM : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.npmjs.com/package/markdown-grouper">https://www.npmjs.com/package/markdown-grouper</a><ul><li>주간 다운로드수 최대 443회 달성</li></ul></li></ul><hr><h3>사용 스킬</h3><ul><li>JavaScript, TypeScript, Gulp.js, Commander.js</li></ul><h3>구현 기능</h3><ul><li>header 태그를 기준으로 그룹핑 구현 HTML 로 파싱된 마크다운 문서는 모든 element 가 같은 부모를 가지는 문제점이 존재<ul><li>header 태그를 찾아서 문단의 범위를 정하고 section 태그로 그룹을 생성<ul><li>각 문단들은 순차적인 selector 를 지정해서 구분</li><li>section 의 selector 에 prefix, postfix 설정 가능</li><li>재귀 함수를 사용해 헤더 레벨을 기준으로 계층적인 문단 구조를 구현</li></ul></li><li>문단 탐색 시 최상위, 최하위 헤더 레벨을 설정해 그룹핑 적용 범위 설정</li></ul></li><li>그룹 미리보기 기능 구현 문서 내 헤더들이 어떻게 문단으로 묶이는지 보여주는 출력 예시가 필요<ul><li>재귀 함수를 사용하여 헤더들의 레벨에 맞게 계층적인 tree 형태로 출력</li></ul></li></ul><hr><h3>트러블 슈팅</h3><ul><li>코드 블럭 내 헤더 태그 그룹핑 이슈 해결 마크다운 문서 내 html 코드 블럭안에 작성된 <code>&lt;header&gt;</code> 태그가 잘못 파싱되어 문서 그룹핑에 포함되는 문제 발생<ul><li>파싱 전 코드 블럭 내 헤더 태그를 특정 문자열 패턴으로 인코딩</li><li>그룹핑 로직 후 최종 문서에서 디코딩을 적용하여 원상 복원</li></ul></li></ul><h3>코드 가독성 개선</h3><ul><li>헤더 정보 구조화<ul><li>헤더 태그의 레벨, innerText, 하위 문단 정보를 Class 형태로 구조화하여 명확한 계층 구조 유지</li></ul></li><li>문서 포맷팅 적용<ul><li>최종 결과물에 <code>prettify</code>를 적용해 일관된 코드 포맷과 가독성 향상 구현</li></ul></li></ul><h3>코드 보안 적용</h3><ul><li>npm 패키지 게시 전 보안 강화 게시되는 JS 파일에 대한 보안 처리를 위해 난독화 적용<ul><li><code>Gulp.js</code>의 <code>uglify</code> 플러그인으로 압축</li><li><code>javascript-obfuscator</code> 플러그인으로 난독화 처리</li></ul></li></ul><h3>접근성 및 확장성</h3><ul><li>CLI 환경 지원 기능 특성상 터미널 기반 CLI 환경에서도 사용 가능해야 함<ul><li><code>commander.js</code>를 활용해 커맨드 인터페이스 설계</li><li>난독화된 CLI 파일을 <code>Gulp.js</code>로 빌드하여 배포</li></ul></li><li>TypeScript 호환성 확보<ul><li>Type 정의 파일(<code>.d.ts</code>)을 함께 제공하여 TypeScript 프로젝트에서도 사용 가능하도록 대응</li></ul></li></ul>

Markdown Grouper

<h2>수기에서 디지털로의 전환</h2>기업 내 교육, 민간 교육 과정들의 진행 정보 관리와 교육생 평가 기능을 제공하는 웹 서비스입니다.실제 다양한 사용자(SK, 삼성, 현대 등 기업 교육 / Opensquare-D 등 민간 교육)들을 대상으로 서비스를 운영되고 있는 서비스입니다.프로젝트 구축 및 DB 설계 및 프론트엔드 개발자를 담당했습니다.<hr><h3>사용 스킬</h3><ul><li>Front-End : Vue.js, TailwindCSS</li><li>Back-End : Node.js, Nginx, MySQL</li><li>Domain / Deploy : Gabia, EC2</li></ul><h3>구현 기능</h3><ul><li>교육 과정 및 교육생 CRUD 구현<ul><li>관리자 또는 강사가 교육 과정과 교육생 정보를 등록, 조회, 수정, 삭제할 수 있는 기능 구현</li></ul></li></ul><ul><li>일일 퀴즈 기능<ul><li>오프라인 퀴즈의 온라인 전환<ul><li>기존 종이 문제지를 대체할 수 있도록 웹 기반 퀴즈 UI 를 구현</li></ul></li><li>강사용 기능<ul><li>퀴즈 출제, 실시간 채점 기능 구현</li><li>채점 완료 시 퀴즈 결과 화면에 즉시 반영</li><li>채점 Modal과 결과 조회 페이지 간 상태 공유를 위해 <code>EventBus</code> 활용</li></ul></li><li>교육생용 기능<ul><li>객관식/주관식 응시 UI 구성</li><li>문제 풀이 시 <code>onClick</code> 이벤트와 <code>axios</code>를 통해 실시간 응답 전송</li></ul></li></ul></li></ul><ul><li>교육생 개별 평가 리포트 작성<ul><li>강사 피드백 및 교육생 점수 기록</li><li><code>vue-chartjs</code>로 평가 결과 시각화</li><li><code>jspdf</code>를 이용해 리포트 PDF 저장 기능 구현</li></ul></li></ul><ul><li>캐글 스타일의 데이터 분석 컨테스트 시스템 구현<ul><li><code>axios</code> + <code>FormData</code> 를 활용한 파일 업로드 기능</li><li>JavaScript 기반 통계 분석 성능 지표 계산 로직 구현</li><li>실시간 평가 상황 확인을 위한 polling 기반 리더보드 페이지 구축</li></ul></li></ul><hr><h2>기능 개선</h2><ul><li>입력 편의성 개선<ul><li><code>xlsx</code> 라이브러리를 활용해 엑셀에서 정보 불러와 자동 저장</li></ul></li></ul><ul><li>데이터 출력 기능 개선<ul><li><code>xlsx-style</code>을 사용하여 DB 레코드를 엑셀로 내보내는 기능 구현</li></ul></li></ul><ul><li>퀴즈 진행 경과 유실 문제 해결<ul><li>퀴즈 도중 예기치 않은 종료 발생 시를 대비해 <code>setInterval</code> + <code>axios</code> 기반 polling 적용</li><li>진행 상황을 주기적으로 서버에 저장하여 복구 가능성 확보</li></ul></li></ul><h2>트러블 슈팅</h2><ul><li>모달과 결과 페이지 간 상태 공유의 어려움<ul><li><code>EventBus</code>를 도입해 컴포넌트 간 통신 처리</li></ul></li><li>브라우저 종료 시 퀴즈 응시 정보 유실<ul><li>polling 방식으로 서버에 주기적 상태 저장</li></ul></li></ul>

교육 과정 관리 프로젝트

<h4>교육 과정 관리 서비스 개발</h4>기업 내 교육, 민간 교육 과정들의 진행 정보 관리와 교육생 평가 기능을 제공하는 웹 서비스의 프론트 엔드 개발을 담당했습니다.실제 다양한 사용자(SK, 삼성, 현대 등 기업 교육 / Opensquare-D 등 민간 교육)들을 대상으로 서비스를 운영한 경험이 있습니다.