Front-End Developer

임민규

사용자의 불편을 해소하는 데서 서비스 개발이 시작된다고 믿습니다. 웹 프론트엔드에서의 첫인상을 책임지는 UI/UX 설계를 통해, 사용자에게 가치 있는 경험을 전달하는 개발자를 지향하고 있습니다.

팀을 위해 스스로 해야 할 일을 찾아 실행하고, 팀원과의 원활한 소통을 통해 실질적인 도움을 주었을 때 보람을 느끼며, 함께 목표를 달성했을 때 가장 큰 성취감을 느낍니다.

성실함

책임감

웹 개발자_임민규_포트폴리오.pdf

Github

<h3>프로젝트 요약</h3><ul><li><p>서비스: 실시간 코인 가격 및 정보 조회 플랫폼</p><p></p></li><li><p>담당: FE, 기획, 디자인</p></li><li><p>레포지토리: <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/nile27/CoinBrief">https://github.com/nile27/CoinBrief</a></p></li><li><p>사용 기술 : <code>NextJS</code> <code>TypeScript</code> <code>Zustand</code> <code>Tailwind CSS</code> <code>Firebase</code> <code>Socket.io</code> <code>ExpressJS</code> <code>Nodemailer</code> <code>ApexCharts</code></p><p></p></li></ul><hr><p>실시간 코인 시세 조회 및 환율 변환 기능을 제공하는 웹 애플리케이션으로, 웹소켓과 Upbit API를 활용하여 실시간 데이터를 반영하고 ApexChart를 통해 시각적으로 분석할 수 있도록 구현하였습니다.</p><h3><strong>구현 내용</strong></h3><h6>회원 가입/ 로그인</h6><ul><li><p>회원가입 과정에서 이메일로 OTP를 전송하고, 입력값 검증을 통해 본인 인증 기능을 구현</p></li><li><p>비로그인 회원의 서비스 이용 방지<br>=&gt; 로그인 시 토큰을 발급하고, 토큰이 없는 경우 서비스 접근을 제한하여 비로그인 사용자의 이용을 방지</p></li><li><p>회원가입 시 잘못된 입력값 방지<br>=&gt; <code>useForm</code>을 활용해 유효성 검사 및 에러 핸들링을 구현하여 잘못된 입력을 사전 차단</p><p></p></li></ul><h6>실시간 코인 가격</h6><ul><li><p>Socket.io를 이용하여 업비트 웹소켓을 연동하여, 사용자가 지정한 코인의 실시간 가격을 확인할 수 있는 기능을 구현</p></li><li><p>Vercel 배포 시, 서버리스 함수의 한계로 인해 WebSocket 연결 유지 불가</p><p><br>=&gt; ExpressJS를 사용해 WebSocket 서버를 별도로 구현하고, 독립적으로 배포하여 실시간 통신 문제를 해결</p></li></ul><h6>코인 리스트 및 상세 정보</h6><ul><li><p>업비트 API를 활용해 코인 정보를 가져오고, 가격 변화율을 차트로 시각화하여 제공</p></li><li><p>업비트 코인 리스트 API를 이용해 필터링할 경우, 자동완성 드롭다운 메뉴의 응답 속도가 느림<br>=&gt; 코인 이름과 심볼을 DB에 미리 저장하고 매핑하여 검색 속도 개선</p><p><br></p></li></ul>

CoinBrief

<h3>프로젝트 요약</h3><ul><li><p>서비스: <span>AI기반 주식분석플랫폼</span></p><p></p></li><li><p>담당: 로그인/회원가입, 뉴스 기사 번역, 본인 인증</p></li><li><p>레포지토리:<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/nile27/Spacspace_AightNow"> https://github.com/nile27/Spacspace_AightNow</a></p></li><li><p>사용 기술 : <code>NextJS</code> <code>TypeScript</code> <code>Zustand</code> <code>Tailwind CSS</code> <code>Firebase</code>  <code>Tavily </code> <code>DeepL</code>  </p><p></p></li></ul><hr><h6><strong>* Tavily AI와 배포 기간이 만료되어 현재 배포 페이지를 운영중이지 않습니다.</strong></h6><p><span>"스나이퍼 팩토리 - 프로젝트 캠프:Next.js" 라는 Next.js 교육 프로그램을 통해 제작하였습니다. "스팩 스페이스" 라는 기업을 통해 "AI기반 주식분석플랫폼" 이라는 과제를 받고 6개의 기업 주식을, AI를 통해 분석하고 보여주는, 기업 분석 리포트 사이트를 제작하였습니다.</span><br></p><h3><strong>구현 내용</strong></h3><h6>회원 가입/ 로그인</h6><ul><li><p>비로그인 회원</p></li><li><p></p></li></ul><h6>뉴스 기사 번역 기능</h6><ul><li><p>API Route에서의 웹 소켓 서버 운영 변경</p></li></ul><h6>이메일 본인 인증</h6><ul><li><p>검색 시간 단축</p></li><li><p>본인 인증 리다이렉트 Page 문제</p></li></ul><h6>자동 로그인</h6><ul><li><p>OTP를 통해 본인 인증</p></li></ul>

Aight Now

<h3>프로젝트 요약</h3><ul><li><p>서비스: 실시간 코인 가격 및 정보 조회 플랫폼</p><p></p></li><li><p>담당: FE, 기획, 디자인</p></li><li><p>레포지토리: <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/nile27/My-Calender">https://github.com/nile27/My-Calender</a></p></li><li><p>사용 기술 : <code>ReactJS</code> <code>TypeScript</code> <code>Redux-Toolkit</code> <code>styled-components</code> <code>MongoDB</code> <code>ExpressJS</code> </p><p></p></li></ul><hr><p>일정과 태그를 생성·관리하고, 검색 기능을 통해 원하는 일정을 쉽게 찾을 수 있도록 했으며, 시간/월 단위로 일정을 시각화해 직관적인 관리가 가능하도록 구현했습니다.</p><h3><strong>구현 내용</strong></h3><h6>회원 가입/ 로그인</h6><ul><li><p>비로그인 회원</p></li><li><p></p></li></ul><h6>공휴일 처리</h6><ul><li><p><span>공공데이터포털의 공휴일 OPEN API를 이용하여 Month 달력의 공휴일 처리</span></p></li></ul><h6><span>일정 및 태그 검색 기능</span></h6><ul><li><p>검색 시간 단축</p></li></ul><h6>한 태그의 모든 일정이 삭제되었을 때, 태그가 아직 남는 버그 현상</h6><ul><li><p>태그 자체에 일정 count 객체를 추가하여 count가 0이 되면 자동 태그 삭제</p></li></ul>