웹 프론트엔드 개발자

유진열

생각한 것을 만들 수 있는 개발이 너무나도 즐거운 개발자 유진열입니다.

<p>글로벌 코인 거래소 초기 구축부터 개발 및 유지보수<br><a target="_blank" rel="noopener noreferrer nofollow" href="https://bitmusa.com">서비스 확인 링크</a></p><h4>기술 스택</h4><ul><li><p>메인 서비스</p><ul><li><p>Nuxt3, Pinia, TypeScript, Windi CSS, TradingView</p></li></ul></li><li><p>관리자 서비스</p><ul><li><p>Front-end : Svelte, React, Windi CSS, TypeScript</p></li><li><p>Back-end : Express, Prisma, MongoDB, MySql</p></li></ul></li></ul><h4>주요 내용</h4><h5>1. 메인 서비스 (Front-end)</h5><ul><li><p>중복 UI 컴포넌트 통일 및 이미 사용되고 있는 UI를 볼 수 있게 템플릿 페이지 별도 작업</p></li><li><p>Composition API를 활용한 코드 구조 개선 및 상태 관리 최적화</p><ul><li><p>API 호출부터 페이지 렌더링까지 동일한 패턴 적용</p></li><li><p>컴포넌트 간 props drilling이 크지 않는 곳은 전역관리 제거</p></li></ul></li><li><p>TradingView 차트 커스터마이징</p></li><li><p>대수 계산 라이브러리(BigNumber.js)를 활용한 자바스크립트 숫자 가격 표기 오류 해결</p></li><li><p>거래소 솔루션 화를 위한 디자인 요소 config화 작업</p><p></p></li><li><p>소켓 연결 시, 초기 1회 연결 후 페이지 이동 시에도 새로운 소켓이 생성되지 않도록 store를 활용하여 소켓 상태를 지속적으로 관리</p></li><li><p>Chart.js 기반 공통 차트 컴포넌트 개발</p></li><li><p>Google reCAPTCHA를 활용한 로그인 보안 강화</p></li><li><p>Vue I18n을 활용한 다국어 지원</p></li></ul><h5>2. 관리자 서비스 (Full-stack)</h5><ul><li><p>Svelte로 구성된 프론트엔드 코드를 협업 및 인수인계의 용이성을 위해 React로 전환</p></li><li><p>백엔드 코드 리팩토링(모듈 구조 -&gt; 3계층 구조)</p></li><li><p>레거시 코드 문서화</p></li><li><p>스케쥴링을 활용한 일간/시간 단위 데이터 가공</p></li><li><p>역할 기반 접근 제어(RBAC) 구현</p></li><li><p>OTP 기반 2차 인증 도입(VPN 대체)</p></li><li><p>AWS S3를 활용한 프로필 이미지 업로드 기능 구현</p></li></ul>

글로벌 코인 거래소 서비스 개발 / Nuxt

<p>사내 직원들의 편의를 위한 간식 주문 플랫폼</p>
<h4>기술스택</h4>
<ul>
<li>Front-end : Next, Windicss, TypeScript</li>
<li>Back-end : Express, MongoDB</li>
<li>Devops : vercel, ec2</li>
</ul>
<h4>주요내용</h4>
<ul>
<li>등급별 권한 설정을 통한 주문 관리</li>
<li>주문 링크 입력 시 썸네일을 불러와 정보 표출</li>
<li>주문 / 취소 / 완료 에 관한 상태 변경을 슬랙 채널을 통해 실시간 전달</li>
<li>vercel을 통한 프론트엔드 자동 배포 구현</li>
<li>routes/controller/service/models/repository 의 계층을 나눠 추후 유지보수의 용이성을 고려하여 api 개발</li>
<li>https 인증서 적용</li>
</ul>

사내 간식 주문 플랫폼 개발 / Next, Express

<p>해외 마케팅을 위한 다국어 회사 홈페이지 개발<br><a href="https://neonex.team">서비스 확인 링크</a></p>
<h4>기술스택</h4>
<p>Nuxt3, TypeScript, Windicss, Aws S3 </p>
<h4>주요내용</h4>
<ul>
<li>Aws S3 버킷을 활용한 정적 사이트 배포</li>
<li>i18n을 활용한 다국어(4개국) 처리₩</li>
<li>홈페이지 반응형 ui 개발</li>
</ul>

홈페이지(neonex) 개발 / Nuxt

<p>평소 활동하는 러닝크루의 모임을 더 쉽게 해줄 수 있는 서비스<br><a href="https://github.com/ErunJrun/ErunJrun_FE">https://github.com/ErunJrun/ErunJrun_FE</a></p>
<h4>기술스택</h4>
<p>React, React-redux, styled-components, socket.io, kakaomap api</p>
<h4>주요내용</h4>
<ul>
<li>Suspense, Lazy Loading, 화면에 맞는 이미지 리사이징을 통한 성능 최적화 진행<ul>
<li>Lighthouse 성능 점수 49점에서 → 82점으로 향상</li>
<li>업로드 속도 (고화질 5mb / 2장 이상 기준) 632ms → 274ms 단축</li>
<li>이미지 사이즈 5mb 이상 → 1mb 이하 축소</li>
</ul>
</li>
<li>실제 유저 테스트 후 유저 피드백 반영 경험<ul>
<li>참여방에서의 채팅 기능에 대한 요구로 socket.io를 활용하여 실시간 채팅 기능 구현</li>
</ul>
</li>
<li>카카오 맵을 활용하여 러닝 코스 검색, 그리기, 거리 계산 기능 구현 </li>
<li>axios Interceptor를 활용하여 request/response 상황별 에러 핸들링</li>
<li>AWS Amplify와 github를 연동하여 자동 배포 진행</li>
</ul>

이Run 저Run (그룹 러닝 매칭 & 러닝 코스 추천 플랫폼) / React

<p>글로벌 거래소 플랫폼 공급사업을 진행하는 곳으로 해외에서 크립토 거래가 잘 운영될 수 있도록 서비스 초기 설계부터 런칭, 유지보수 및 개발을 진행중입니다.</p>
<ul>
<li>글로벌 코인 거래소 웹 개발 및 유지보수</li>
<li>거래소 관리자(Admin) 서비스 풀스택 개발 및 유지보수</li>
<li>회사 홈페이지 정적 사이트 구현 및 배포</li>
<li>사내 직원 이용 간식 주문 플랫폼 풀스택 개발 및 배포</li>
</ul>