프론트엔드 개발

류대현

여행을 좋아하는 웹 프론트엔드 개발자입니다.
주요 활용기술로는 Next.js, TypeScript, SCSS, TanstackQuery 입니다.
스타일링 도구로 Styled-components를 다룰 수 있습니다.
상태관리 도구로 Jotai, Recoil을 활용하며, Jotai를 더 선호합니다.
확장성있는 컴포넌트 구축과 인터랙션 구현에 관심이 있습니다.
프론트엔드 기술 트렌드를 따라가기 위해 노력하고 있습니다.

인프콘 2024

성실함

책임감

목표 지향적

학습 지향

정보처리기사

projects_v2023_07_20.pdf

인공지능 기반 스마트팜 양계 종합관리 웹 솔루션(아직 정식오픈 전입니다)<ul><li>프로젝트 정식오픈을 위한 3차 개선 단계부터 투입</li><li>Next.js + TypeScript 기반의 프로젝트 환경 구성</li><li>입력 관리를 위해 React-Hook-Form 도입</li><li>API 호출 데이터 관리는 React Query, UI 상태관리는 Recoil을 각각 도입하여 적용 (Jotai로 마이그레이션중)</li><li>TypeScript, Eslint, Prettier 도입을 통해 일관성 및 안정성 지향</li><li>시각화 대시보드 화면에서 Recharts 도입</li><li>Next.js, TypeScript, ReactQuery, Jotai, Recoil, React Hook Form, SCSS, ESLint, Prettier, Git, Github, Figma, Jira, Confluence</li></ul>

ChickenMonger

팀 단위 주행 관제 솔루션<a target="_blank" rel="noopener noreferrer nofollow" href="https://3secondz.com/livedemo">https://3secondz.com/livedemo</a><ul><li>3SECONDZ 주력 서비스 상품</li><li>차량에 장착하는 자사 하드웨어 XYRO를 통해 텔레메트리 데이터를 수신받아 웹 화면에 시각화하여, 각 차량의 실시간 상태를 모니터링하는 솔루션 서비스</li><li>개인 회원을 위한 관리 페이지 개선 및 유지보수</li><li>모바일 앱 웹뷰 화면의 개선 및 유지보수, 추가 개발 등</li><li>HTML, SASS, JavaScript, jQuery, D3.js, EJS, AJAX, WebSocket, Google Maps API, Git, Github, JSON, Zeplin</li></ul>

TeamSolution

국내 최대 모터스포츠 경기 SUPERRACE의 경기 관제 솔루션 및 방송용 HUD 제작<ul><li>경기 관제를 위한 솔루션 웹 페이지 개발</li><li>방송 화면에서 특정 드라이버 주행 시 오버레이할 HUD 컨트롤 웹 페이지 제작 등</li><li>HUD 실제 중계방송화면 <a target="_blank" rel="noopener noreferrer nofollow" href="https://youtu.be/33_xidx9cH8?si=NyvM74esvtyj0MlY&amp;t=1391">https://youtu.be/33_xidx9cH8?si=NyvM74esvtyj0MlY&amp;t=1391</a></li><li>HTML, SASS, JavaScript, jQuery, D3.js, AJAX, WebSocket, Git, Github, JSON, Zeplin, EJS</li></ul>

RaceSolution 및 Superrace Broadcast HUD

주행했던 특정 세션에 대해, 다른 주행 데이터와 비교하여 분석할 수 있도록 서비스 제공<a target="_blank" rel="noopener noreferrer nofollow" href="https://3secondz.com/demo">https://3secondz.com/demo</a><ul><li>주행 데이터에 대한 각 텔레메트리 데이터 채널 별로 라인 차트 개발</li><li>라인 차트에 대한 패닝 및 줌 인터랙션 기능 개발</li><li>트랙 탐색을 위한 패닝 및 줌 인터랙션 기능 개발</li><li>주행 데이터의 타임스탬프 등을 활용한 재생 기능 개발</li><li>HTML, SASS, jQuery, D3.js, AJAX, JSON, Git, JavaScript, Zeplin, EJS</li></ul>

주행 데이터 분석 솔루션 Lap VS Lap

한국타이어 R&amp;D용 타이어 센서 모니터링 패널 개발<ul><li>타이어 센서로부터 수신받은 데이터를 데이터 값, 게이지 그래픽, 라인 차트 등으로 시각화하여 표현</li><li>HTML, SASS, jQuery, JavaScript, D3.js, AJAX, WebSocket, Git, Github, JSON, Zeplin, EJS</li></ul>

TeamSolution 타이어 모니터링 시각화 데모 개발 for 한국타이어

렌터카 주행 상태 관리를 위한 대시보드 데모 개발<ul><li>Vitejs 환경으로 개발 시작</li><li>대시보드에 사용된 차트는 대부분 Chart.js로 구현</li><li>FullCalendar를 활용한 달력 차트 구현</li><li>svg 생성 및 인터랙션에 d3.js 활용</li><li>웹소켓을 통해 실시간으로 업로드된 데이터를 시각화 처리</li><li>mapbox를 활용한 경로 표현</li><li>Vite, HTML, SCSS, jQuery, AJAX, Mapbox, JavaScript, JSON, Git, Github, Chart.js, D3.js, WebSocket, Zeplin</li></ul>

렌터카 관련 신규 프로젝트 데모 시각화 개발 for HL Klemove

택시 주행 데이터 관리를 위한 데모 개발<ul><li>주행 데이터에 대한 주행 경로 표현, 각 이벤트 지점, 구간 재생 등 타임스탬프 기반 인터랙션 개발</li><li>경로 표현, 이벤트 지점 마커, 지역 표현에 google maps API를 활용</li><li>지역 표현에 kakao API도 활용</li><li>지역별 통계 표현에는 leaflet 활용</li><li>대시보드의 라인 차트에 d3.js 활용</li><li>HTML, SASS, jQuery, D3.js, AJAX, Google Maps API, JavaScript, Leaflet, JSON, Git, Github, Zeplin</li></ul>

택시 관련 신규 프로젝트 데모 시각화 개발 for HL Klemove

기관 및 R&amp;D를 위한 종합 주행 관제 솔루션 개발<ul><li>기관 및 R&amp;D를 위해, 제한없는 다수의 차량을 종합적으로 관리할 수 있는 서비스 개발</li><li>주행 차량 관리를 위한 관리 페이지, 주행 관제 페이지 등 개발 및 유지보수 참여</li><li>HTML, SASS, jQuery, JavaScript, AJAX, WebSocket, Git, Github, JSON, Zeplin, EJS</li></ul>

SolutionMaster

자사 소개 홈페이지의 리뉴얼 프로젝트<a target="_blank" rel="noopener noreferrer nofollow" href="https://uniai.co.kr/">https://uniai.co.kr/</a><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/uniai-corp/uniai-corp.github.io">https://github.com/uniai-corp/uniai-corp.github.io</a><ul><li>Next.js SSG 기능으로 빌드 및 배포</li><li>기존 WIX 구축 홈페이지에서, 컨텐츠 교체 및 홈페이지 레이아웃 개선 등을 위한 리뉴얼 프로젝트 작업 진행</li><li>SPA 영문화 첫 작업</li><li>Next.js, TypeScript, Jotai, SCSS, GSAP, ESLint, Prettier, Git, Github, Figma, Confluence</li></ul>

유니아이 기업 홈페이지

XYRO, TeamSolution, 구매방법 등의 프로모션을 위한 반응형 웹 페이지 3종<a target="_blank" rel="noopener noreferrer nofollow" href="https://3secondz.com/service/info_teamsolution">https://3secondz.com/service/info_teamsolution</a><ul><li>하드웨어 및 웹 솔루션 서비스 관련한 프로모션을 위해 반응형 웹 페이지 3개 페이지 제작</li><li>현재는 이전 제작 3개 페이지에서, TeamSolution 페이지만 존재</li><li>HTML, SASS, JavaScript, jQuery, EJS, Git, Github, Zeplin</li></ul>

3SECONDZ 제품 프로모션 페이지

자사 제품 사용법 및 Q&amp;A, AS 등 정보 제공<a target="_blank" rel="noopener noreferrer nofollow" href="https://3secondz.com/support">고객지원 | 3SECONDZ</a><ul><li>자사 제품의 사용 설명서 및 Q&amp;A 페이지 제작, AS를 위한 정보 제공 페이지 제작</li><li>HTML, SASS, jQuery, EJS, Git, Github, Zeplin, Google Maps API</li></ul>

3SECONDZ 고객지원 페이지

자사 홈페이지 리뉴얼<a target="_blank" rel="noopener noreferrer nofollow" href="https://3secondz.com/">https://3secondz.com/</a><ul><li>기존 랜딩페이지에서 멀티페이지 구성으로 변경</li><li>서비스 관련 페이지는 플랫폼으로 재구성하여 개발 (<a target="_blank" rel="noopener noreferrer nofollow" href="https://3secondz.com/service">https://3secondz.com/service</a>)</li><li>HTML, SASS, jQuery, JavaScript, AJAX, WebSocket, Git, Github, JSON, Zeplin, EJS</li></ul>

3SECONDZ 홈페이지 리뉴얼

신라젠 홈페이지 리뉴얼 홈페이지에 퍼블리싱 외주 참여<a target="_blank" rel="noopener noreferrer nofollow" href="http://www.sillajen.com/kor/">http://www.sillajen.com/kor/</a><ul><li>퍼블리싱 외주 인력으로 참여</li><li>php 환경으로 반응형 웹 제작</li><li>HTML/CSS, jQuery, PHP, Photoshop</li></ul>

신라젠 홈페이지 리뉴얼 퍼블리싱

대전광역시 청년 사업인 "청년공간" 홈페이지 제작<ul><li>메인 페이지 및 서브페이지 공통 요소에 대한 웹 디자인 참여 (30%)</li><li>header, footer 및 gnb 등 공통 요소 제작 및 php로 컴포넌트화 작업</li><li>각 페이지 반응형 처리 등 퍼블리싱 전반 참여 (80%)</li><li>그누보드 기반으로 적용 작업</li><li>HTML/CSS, jQuery, PHP, 그누보드, Photoshop</li></ul>

대전 청춘광장 개발

<ul><li>스마트팜 양계 종합관리 웹 솔루션 "치킨몽거"의 프론트엔드 전담</li><li>자사 홈페이지 개발</li><li>Next.js, TypeScript, SCSS, React Query, Git, Github, Recoil, Jotai, React Hook Form, ESLint, Prettier, Figma, Jira, Confluence</li></ul>

<ul><li>실시간 주행 분석 솔루션 서비스 및 기타 프로젝트의 프론트엔드 개발 및 유지보수</li><li>자사에서 제공하는 각종 웹 페이지의 마크업 개발 및 유지보수</li><li>HTML, CSS, JavaScript, EJS, SCSS, jQuery, D3.js, Google maps API, AJAX, WebSocket, AWS S3, AWS CloudFront, JSON</li></ul>

<ul><li>비상주 인력으로서 신라젠 기업 홈페이지 리뉴얼 웹 퍼블리싱 작업 참여</li><li>홈페이지 구성과 인터렉션 부분에 대한 기획 참여</li><li>담당 디자인 팀장님과의 활발한 소통을 통한 협업 진행</li><li>HTML/CSS, jQuery, PHP, Photoshop</li></ul>

<ul><li>중소기업 및 공공기관 프로젝트의 웹 디자인 및 퍼블리싱 작업 담당</li><li>팀 내 인원과 활발한 소통을 통한 협업 진행</li><li>웹 디자인 작업 참여도 다수 있으나, 대부분은 웹 퍼블리싱 작업 위주로 프로젝트 진행</li><li>HTML, CSS, jQuery, PHP(그누보드5), Photoshop, Illustrato</li></ul>주요 참여<ul><li>대전 시청 청년정책 사업 “청춘광장” 홈페이지 웹 퍼블리싱 및 디자인 참여 (2018)</li><li>한스산업 웹 퍼블리싱 및 디자인 참여 (2018)</li><li>레인보우 로보틱스 홈페이지 웹 디자인 및 퍼블리싱 (2018)</li><li>레인보우 아스트로 홈페이지 웹 퍼블리싱 (2018)</li><li>대전 MICE 웹진 디자인 및 퍼블리싱 (2018)</li></ul>