프론트엔드 개발자

최승은

"성실함과 책임감을 바탕으로, 유쾌한 에너지로 팀에 긍정적인 영향을 주는 프론트엔드 개발자입니다."

성실함

책임감

자기 주도적

열정적

긍정적

<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/FESIStudy">스터디 기록 링크</a><ul><li>매주 프론트엔드 성능 개선 &amp; 최적화 주제 선정 → 팀원들과 심층 학습 &amp; 실습</li><li>Wiki 문서화 + 발표 시스템 운영 → 학습한 내용을 체계적으로 정리하여 지식 공유</li><li>주요 학습 주제:<ul><li>React 렌더링 최적화 → useTransition, useDeferredValue, SWR 활용</li><li>TDD &amp; 테스트 자동화 → Jest, RTL, Cypress 실습</li><li>CI/CD &amp; 번들링 최적화 → Webpack 트리 쉐이킹, 코드 스플리팅, 빌드 성능 개선</li></ul></li></ul>

Gunbamz Study

<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/Front-Ninjas">스터디 기록 링크</a>[모던 자바스크립트 딥다이브], [우아한 타입스크립트 리액트], [모던 리액트 딥다이브]<ul><li>매주 책을 읽고 학습한 개념을 코드로 구현 &amp; 발표</li><li>학습 내용을 실제 프로젝트에 적용하여 실무 활용도 극대화</li></ul>

Front Ninjas Study

<a target="_blank" rel="noopener noreferrer nofollow" href="https://xeunnie.tistory.com/">블로그 링크</a><ul><li>프론트엔드 &amp; 백엔드 개발자들이 서로 풀스택 개념을 가르쳐주는 학습 방식 도입<ul><li>프론트엔드는 API 설계 &amp; DB 설계 학습</li><li>백엔드는 React 컴포넌트 &amp; 상태 관리 학습</li></ul></li><li>1주 1기술 개인 블로그 작성 &amp; 발표 → 최신 기술 트렌드 &amp; 실무 경험 공유</li></ul>

Devlog Challengers

[ 링크 ] <a target="_blank" rel="noopener noreferrer" class="notion-link-token notion-focusable-token notion-enable-hover" href="https://bbiyagiez.netlify.app/">배포 링크</a>, <a target="_blank" rel="noopener noreferrer" class="notion-link-token notion-focusable-token notion-enable-hover" href="https://github.com/chickHackathon">깃허브 링크</a>프론트엔드, 백엔드, 디자이너 협업 해커톤 | 20시간 MVP 개발 &amp; 배포<ul><li>기획 ~ 개발 ~ 배포까지 전 과정 20시간 내 완료<ul><li>실시간 협업 &amp; 애자일 방식 적용하여 빠른 의사결정과 개발 진행</li><li>디자이너 &amp; 백엔드 개발자와 원활한 협업을 통해 최적의 UI/UX 및 API 연동 구현</li></ul></li></ul>

삐약톤

컴퓨터그래픽스운용기능사

ENGLISH

포트폴리오

깃허브

기술 블로그

개발 일지

<h3>실시간 모임 플랫폼 서비스 | 프로젝트 설계부터 배포까지 전방위 리딩</h3><blockquote>팀장 (FE 4명 / BE 1명 / DE 1명) &nbsp;- 팀 빌딩, 설계, 개발, 최적화, 배포까지 End-to-End 주도"프로젝트를 '잘 만드는 것'을 넘어서, &nbsp;함께 성장하고 싶은 팀장이 되고자 한 2개월이었습니다."</blockquote><h4>기술스택</h4><code>Next.js</code>, <code>Typescript</code>, <code>Tailwind CSS</code>, <code>React-Query</code>, <code>Zustand</code>, <code>Framer Motion</code>, <code>Webpack</code>, <code>PWA</code>, <code>Jest + RTL</code>, <code>Cypress</code>, <code>CircleCI</code>, <code>Sentry</code>, <code>Codecov</code>, <code>Google Analytics</code>, <code>robots.txt / sitemap</code>, <code>IndexedDB (idb)</code>, <code>Jira</code><h4>링크</h4><a target="_blank" rel="noopener noreferrer nofollow" href="https://thunderting.site/">배포 링크 </a>| <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/DoITFronts">깃허브 </a>| <a target="_blank" rel="noopener noreferrer nofollow" href="https://drive.google.com/file/d/1d2EmOpNjbYYjr91hOSKF-g38vRaHODrf/view?usp=sharing">시연 영상</a> | <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/DoITFronts/Frontend/wiki">프로젝트 위키</a><h4>설계 및 개발 리딩</h4><ul><li>Next.js 기반 아키텍처 설계 및 기술 스택 결정 → 프로젝트 방향과 구조 정의</li><li>컴포넌트 &amp; 상태관리 리팩토링 → 단일 책임 원칙 적용, 가독성 및 재사용성 향상</li><li>Zustand + React Query 병행 전략 설계 → 불필요 렌더링 50% 감소, API 호출량 40% 절감 &nbsp;</li><li>SSR + ISR 최적화 → FCP 3.2s → 1.2s 단축, SEO 대응 완료 </li><li>PWA 적용 → 모바일 최적화 및 크로스 플랫폼 UX 강화</li><li>Jest + RTL, Cypress 기반 테스트 환경 구축 → QA 자동화 및 안정성 확보</li></ul><h4>팀 리딩 &amp; 협업</h4><ul><li>Jira 기반 스프린트 관리 → 주간 단위 이슈 트래킹과 우선순위 조정 </li><li>정기 회의 운영, 일정 체크, PR, 코드 리뷰, 짝프로그래밍 문화 정착 → 전체 일정 마감률 100%, 팀원 생산성 유지&nbsp;</li><li>백엔드 및 디자이너와의 능동적 협업 주도 →&nbsp;API 설계, 로직 분리, 인터랙션 연결 등 다방면 조율</li><li>항상 유쾌하고 밝은 분위기를 유지해 팀 내 심리적 안정감 형성</li><li>최신 기술, 아티클, 로직 구조 등을 공유하며 팀 전체 기술 성장 유도</li></ul>

번개팅

<h3>쿠버네티스 기반 실시간 커뮤니케이션 플랫폼 구축 &nbsp;</h3><blockquote>채팅 · WebRTC · PWA · 네트워크 최적화 전방위 주도 &nbsp;</blockquote><h4>기술스택</h4><code>React</code> , <code>TypeScript</code> , <code>Redux Toolkit</code> , <code>SWR</code> , <code>React-query</code>, <code>Tailwind CSS</code> , <code>Framer Motion</code> , <code>WebSocket (SockJS + STOMP)</code> , <code>WebRTC (simple-peer)</code> , <code>Axios</code> , <code>Firebase</code> , <code>Webpack</code> , <code>PWA (Workbox)</code> , <code>Jest + RTL</code> , <code>Cypress</code> , <code>pnpm</code> , <code>Jira</code><h4>링크</h4><a target="_blank" rel="noopener noreferrer nofollow" href="https://discord-clone-alpha-tawny.vercel.app/login">배포 링크 </a>| <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/ChatFlowProject">깃허브 </a>| <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/ChatFlowProject/chatter/wiki">프로젝트 위키</a><h4>사용자 페이지 구현 및 상태 관리</h4><ul><li>React + Redux 기반의 사용자 상태 관리 시스템 구축</li><li>WebSocket 이벤트 기반의 실시간 유저 상태 반영<ul><li>초기에는 SWR의 캐싱 전략을 활용해 API 호출 최소화 및 리렌더링 감소→ 이후 React Query로 마이그레이션하여 비동기 상태 관리 및 캐싱 전략을 더욱 세분화</li><li>Redux를 활용한 글로벌 상태 공유로 데이터 복구 및 접근성 강화</li></ul></li></ul><h4>채팅 &amp; 실시간 소통 기능</h4><ul><li>WebSocket 기반 채팅 시스템 구축 &nbsp;→ 최신 메시지, 유저 상태 동기화 유지 및 서버 부하 최소화</li><li>WebRTC를 통한 실시간 미디어 스트리밍 구현 &nbsp;→ 화면 공유, 음성/영상 통화 지원</li><li>PWA 적용 → 크로스 플랫폼 UX 최적화 및 성능 개선 &nbsp;</li><li>Webpack 코드 스플리팅 및 번들 최적화 → 초기 로딩 속도 향상</li></ul><h4>배포 및 인프라 협업</h4><ul><li>쿠버네티스 기반 마이크로서비스 배포 대응 &nbsp;</li><li>카나리 배포 적용 → 트래픽 점진 전환으로 무중단 배포 실현 &nbsp;</li><li>DevOps 스터디 환경 내 프론트엔드와 인프라 연계 실습 주도</li></ul>

ChatFlow

<h3>개발자를 위한 대시보드 기반 스크럼 관리 시스템 &nbsp;</h3><blockquote>프론트엔드 및 디자인 단독 개발 (FE 1명 / BE 4명) &nbsp;</blockquote><h4>기술 스택 &nbsp;</h4><code>Vue</code>, <code>JavaScript</code>, <code>Pinia</code>, <code>SpringBoot</code>, <code>Spring Security</code>, <code>Kafka</code>, <code>Redis</code>, <code>MariaDB</code>, <code>n8n</code>, <code>Jenkins</code>, <code>Kubernetes</code>, <code>Istio</code>, <code>Prometheus</code>, <code>Grafana</code>, <code>Nginx</code><h4>링크</h4><a target="_blank" rel="noopener noreferrer nofollow" href="https://calit.netlify.app/">배포 링크 </a>| <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/beyond-sw-camp/be06-fin-MINIONZ-CalIT">깃허브 링크</a> | <a target="_blank" rel="noopener noreferrer nofollow" href="https://drive.google.com/file/d/1X2cc5Vd348nsnsZcGp6ZbHRO0TeA-mc5/view?usp=drive_link">시연 영상 </a>| <a target="_blank" rel="noopener noreferrer nofollow" href="https://drive.google.com/file/d/1PhEqi3-RpG1aBW3tOVNXraTka1QhvWfE/view?usp=drive_link">발표 자료</a><h4>프론트엔드 개발 및 성능 최적화</h4><ul><li>Vue 기반 대시보드 시스템 &nbsp;→ 스크럼 관리, 채팅, 실시간 알림, AI 기능을 통합한 복합형 웹서비스 구현 &nbsp;</li><li>100개 이상 API 연동 + 프론트엔드 전담 개발 &nbsp;→ 대규모 SPA 구조 설계, 비동기 데이터, 상태 관리 최적화 </li><li>Vue 컴포넌트 구조 설계 및 emit 기반 이벤트 전달 체계 구축 &nbsp;</li><li>Pinia 도입 → 상태 관리 체계 통합 및 모듈 분리로 유지보수성 향상 &nbsp;</li></ul><h4>DevOps 및 백엔드 협업 기여</h4><ul><li>Kafka 기반 채팅 기능 구현 지원 → 실시간 데이터 송수신 구조 협업 설계 &nbsp;</li><li>Jenkins 파이프라인 구성 지원 → CI/CD 자동화 실습 및 적용 &nbsp;</li><li>Prometheus + Grafana 기반 백엔드 모니터링 시스템 구축 지원 &nbsp;</li></ul><h4> AI 기능 통합</h4><ul><li>n8n 활용 AI 챗봇 기능 기획 및 구현 &nbsp;→ 업무 알림, 미팅 요약 등 자동화 시나리오 제작 &nbsp;→ 사용자 경험 및 업무 흐름 보조 기능 강화</li></ul>

CalIt

<blockquote>웹 서비스의 프론트엔드 개발 및 유지보수를 담당하며, 디자인 시안 구현과 협업 커뮤니케이션을 통해 제품 완성도를 높이는 역할을 수행했습니다.</blockquote><h3>담당 프로젝트 및 역할</h3><h4>1. 리픽 (프론트엔드 개발자)</h4>2023.12 ~ 2024.02 | 백엔드 1명, 서버 1명, 프론트 1명 | 기여도 70%링크:<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.re-pick.co.kr/"> 서비스 바로가기</a> | <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.figma.com/design/vkRTTGADspXwTr8jEgGh0h/%EB%A6%AC%ED%94%BD-APP?t=mdR5P8wzGCVYKZvO-0">Figma 시안</a><ul><li>Vue.js + TypeScript 기반 UI 개발 및 성능 최적화</li><li>Pinia를 통한 상태 관리 및 API 연동으로 데이터 흐름 안정화</li><li>컴포넌트 기반 설계로 유지보수성과 재사용성 확보 → 개발 속도 40% 향상</li><li>Storybook으로 UI 컴포넌트 문서화 → 디자이너와의 협업 효율 증대</li><li>불필요 렌더링 제거 및 리팩토링을 통해 페이지 로딩 속도 30% 개선</li></ul><h4>2. 인천교육청 교육이음 (웹디자이너 &amp; 프론트엔드)</h4>2023.11 ~ 2024.01 | 디자인, 페이지 개발 | 기여도 90%링크: <a target="_blank" rel="noopener noreferrer nofollow" href="https://edu-ieumcenter.ice.go.kr/member/main">사이트 링크 </a>|<a target="_blank" rel="noopener noreferrer nofollow" href="https://edu-ieumcenter.ice.go.kr/member/main"> </a><a target="_blank" rel="noopener noreferrer nofollow" href="http://121.167.147.150:8087/incheon_edu/html_list.html">개발 페이지 리스트</a> | <a target="_blank" rel="noopener noreferrer nofollow" href="https://(http://121.167.147.150:8087/eum/admin/html_list.html)">관리자 페이지 리스트</a><ul><li>XD를 활용한 교육 플랫폼 UI/UX 디자인 및 프로토타이핑</li><li>HTML, CSS, JavaScript로 반응형 퍼블리싱 및 웹접근성 대응</li><li>웹 표준, 크로스 브라우징, 유지보수성 고려한 마크업</li><li>사용자 편의성 및 관리자 UI 개선 작업 수행</li></ul><hr><h3>유지보수 프로젝트 리스트</h3>웹 접근성 및 기능 개선 중심의 유지보수 프로젝트디자인, 마크업, 프론트엔드 전반에 참여, 기존 레거시 코드 개선 및 웹 접근성(A11Y) 강화, 기능 추가 수행<ul><li>양구 수목원 링크: <a target="_blank" rel="noopener noreferrer nofollow" href="http://121.167.147.150:8087/yg_eco/html_list.html">개발 페이지 리스트</a> | <a target="_blank" rel="noopener noreferrer nofollow" href="http://121.167.147.150:8087/yg_eco/admin/html_list.html">관리자 페이지 리스트</a></li><li>환경책임투자 종합플랫폼 링크:<a target="_blank" rel="noopener noreferrer nofollow" href="https:// https://www.kiiptest.org"> 운영 사이트</a> | <a target="_blank" rel="noopener noreferrer nofollow" href="http://121.167.147.150:8087/gmi/html_list.html">개발 페이지 리스트</a></li><li>한국이민재단 링크:<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.kiiptest.org"> 운영 사이트</a> | <a target="_blank" rel="noopener noreferrer nofollow" href="http://121.167.147.150:8087/kiiptest/html_list.html">개발 페이지 리스트</a></li><li>사회보장정보원 링크: <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.ssis.or.kr/index.do">운영 사이트</a> | <a target="_blank" rel="noopener noreferrer nofollow" href="http://121.167.147.150:8087/ssis/html_list.html">개발 페이지 리스트</a></li><li>코네틱(KONETIC) 링크: <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.konetic.or.kr/user/main/main.do">운영 </a><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.konetic.or.kr/user/main/main.do">사이트</a> | <a target="_blank" rel="noopener noreferrer nofollow" href="http://121.167.147.150:8087/konetic/html_list.html">개발 페이지 리스트</a></li></ul>

<h3>주요 프로젝트 및 역할</h3><h4>1. Cosmostation Chrome 확장 프로그램 개발 (크롬 웹 익스텐션 부서) &nbsp;</h4><blockquote>React + TypeScript 기반의 멀티체인 암호화폐 지갑 개발 보조</blockquote><ul><li>Web3 애플리케이션과 상호작용을 위한 개인 토큰 추가 및 자산 관리 대시보드 기능 구현</li><li>상태 관리 흐름 개선 및 불필요한 리렌더링 제거 → 특정 자산 조회 시 렌더링 횟수 40% 감소</li><li>컴포넌트 구조 및 이벤트 처리 방식 리팩토링 → 전체 렌더링 반응 속도 1.5초 → 0.8초로 단축</li><li>번들링 최적화 및 의존성 관리 → 최종 번들 사이즈 30% 감소, 크롬 스토어 배포 대응 속도 향상</li></ul><h4>2. Mintscan 대시보드 개발 (Mintscan 부서) &nbsp;</h4><blockquote>Svelte 기반의 블록체인 네트워크 데이터 시각화 대시보드 개발</blockquote><ul><li>API 기반 실시간 데이터 업데이트 기능 구현</li><li>아토믹 설계 기반 재사용 가능한 UI 컴포넌트 설계 → 전체 코드량 약 25% 절감</li><li>상태 의존성 명확화 및 렌더링 최적화 → 평균 렌더링 시간 30% 단축</li><li>SWR을 통한 데이터 캐싱 적용 → 페이지 전환 시 로딩 시간 2초 → 0.7초로 개선</li></ul>

<h3>주요 업무 및 기여</h3><blockquote>교내 웹사이트 유지보수 &amp; 리뉴얼 사이트 구조 개선 및 UI 최적화 경험</blockquote><ul><li>HTML, CSS, JavaScript, jQuery를 활용해 중복된 UI 구조 통합 및 재설계</li><li>공지사항과 이벤트 전달률 향상을 위해 팝업 UI 직접 디자인 및 구현 &nbsp;→ 기존 대비 클릭률 2배 이상 증가 (Google Analytics 기준)</li><li>레거시 코드 리팩토링: 불필요한 JS 로직 제거 및 CSS 클래스 네이밍 정리 &nbsp;→ 페이지 로딩 속도 개선, UI 렌더링 오류 발생률 감소</li></ul>