미리보기

디케이테크인 인프라 팀에서 업무 요청을 처리할 수 있는 티켓 관리 시스템 개발

담당: 프론트엔드, 기획, 디자인

Experience

주요 기능 구현

• 티켓 상세, 문의 내역, 일별 월별 통계 관리, 사용자 티켓 대시보드, 담당자 티켓 대시보드 구현

• 티켓 주요 지표를 개별 테이블에서 확인해야 해 가독성이 낮았으나, 한눈에 파악할 수 있도록 Recharts를 통한 차트 구현 및 시각화

• 담당자가 진행 중인 티켓을 리스트 형태로만 확인할 수 있어 업무 파악이 어려웠던 점을 개선하기 위해, 드래그앤드롭 방식의 칸반보드로 변경하여 티켓 이동 및 상태 변경 소요 시간을 평균 30% 단축

• 페이지 이동 시 응답 시간이 1.2초 이상 소요되며 화면 깜빡임이 발생하는 문제를 해결하기 위해, React Query의 prefetch기능을 활용하여 최적화해 응답 시간을 평균 60% 단축

• 검토 프로세스에서 바로 검토 내역이 바로 업데이트되지 않는 문제를 낙관적 업데이트를 적용하여 사용자 경험을 체감 속도 2배 이상 향상

성능 최적화 및 보안 강화

• Suspense 및 Lazy Loading 적용, 메타 태그 최적화를 통한 SEO 개선

• XSS 공격, 세션 하이재킹 방지를 위해 DOMPurify적용 및 보안 요소 개선

디자인 및 사용성 개선

• 디자인 시안 제작 및 디자인 시스템 구축

• 사용자/담당자 티켓 관리 페이지에 재사용성을 고려한 대시보드 컴포넌트 도입

• 효율적인 인프라팀 업무 요청을 위해 사이드바, 대시보드, 툴팁, 미리보기 기능을 설계하여 사용성 개선에 기여

기획 및 문서화

• 요구사항 정의서, 업무 흐름도, 용어 사전, 화면 설계서, WBS 등 체계적인 문서화를 통한 기획 및 설계 진행

• 코드 프리징 이후 QA 테스트 기간을 통한 역할, 화면 별 오류 검증 진행

취업준비생들을 위한 AI 자소서 첨삭, AI 모의 면접, 포트폴리오 관리, 블로그 서비스 개발

담당: 프론트엔드, 기획, 디자인

깃허브

Experience

주요 기능 구현

• 랜딩 페이지, 캐러셀 및 배너, 포트폴리오 목록, 조회, 작성 및 수정 구현

• Tailwind CSS를 활용한 반응형 UI 설계로 모바일, 태블릿, 데스크탑 등 다양한 환경에서 일관된 사용자 경험 제공

• props drilling 문제 해결을 위해 react-hook-form의 FormProvider를 활용하여 폼 상태 관리 개선

• 모의 면접 화상 표정 분석 기능을 제안 및 구현

성능 최적화

• Next.js 14 App Router로 동적 경로 처리를 최적화하고 서버 컴포넌트를 적극 활용하여 렌더링 성능을 평균 30% 향상

• API 요청 및 캐싱, 무한 스크롤, 페이지네이션, 화면 높이 크기 조절 등을 커스텀 훅으로 구현하여 로직 재사용

• 메타 데이터 작성을 통한 SEO 최적화

기획 및 디자인

• 요구분석 엔지니어링 및 FE 팀원들과의 상세한 코드리뷰를 통해 코드 품질 향상

• Tailwind CSS 유틸리티 및 커스텀 클래스를 활용하여 일관된 스타일 및 디자인 시스템 적용

대학 동아리 리크루팅 통합 관리 플랫폼 개발

담당: PL, 프론트엔드

깃허브

Experience

주요 기능 구현

• 로그인(OAuth), 회원가입, 동아리 등록, 리크루팅 계획하기, 공고 작성, 서류 평가, 지원자 합불 결과 확인, 면접 평가, 답변 기록 등 MVP 기능 구현

• full-calendar 라이브러리를 활용한 캘린더 일정 관리 기능 구현

• 복잡한 리크루팅 단계 구조에 대응하기 위해 공통 컴포넌트를 분리하고 재사용 가능한 구조로 설계하여 개발 효율성과 유지보수성을 향상

• 클라이언트와 백엔드 서버 간의 연결 과정에서 preflight 요청(OPTIONS 메서드)으로 인해 발생한 CORS 오류를 정책 조정을 통해 해결

기획 및 협업

• 프론트엔드 영역 전반의 개발을 주도적으로 진행,

  매일 데일리 스크럼 진행 및 문서화 담당

• 팀원 수가 적은 점을 보완하기 위해 AI 코드리뷰툴 CodeRabbit 적극 활용하여 코드 개선

• 백엔드 팀원들의 요청 사항 및 프론트엔드에서 발생한 이슈 정리, API 연동 문서화로 원활한 협업 환경 조성

• 유저 테스트 진행을 통한 개선점 도출 및 코드 리팩토링 진행

마크다운 투두리스트 크롬 익스텐션 개발

담당: 기획, 프론트엔드

Experience

협업

• 페어 프로그래밍을 통해 실시간 코드 작성 및 피드백 진행

• 체계적인 코드 리뷰를 통해 코드 품질 개선 및 일관성 유지

주요 기능 구현

• IndexedDB를 활용한 클라이언트사이드 데이터베이스 구성

• 프로젝트 초기 세팅 및 Github Actions를 이용한 CI/CD 구축

• 시맨틱 버저닝을 적용하여 프로젝트 버전 관리

• Vite 등의 번들링 도구를 활용하여 크롬 익스텐션 최적화 및 빌드

• 크롬 익스텐션 배포 프로세스 학습

• 학기 중 현장 미러형 프로젝트(PPLOG) 진행, 방학 중 기업 실무 프로젝트(TikiTaka) 진행

• 웹 애플리케이션 개발, 데이터 관리 기술, 시스템 아키텍처 수강

• Kakao Cloud, Oracle Cloud, Microsoft Azure 워크숍 참여

• 가천대 마이크로디그리 취득

• HTML/CSS, JavaScript, React, Next.js, TypeScript 학습

• Git을 통한 버전 관리와 협업 기초 학습

• 초급 프로젝트(Rolling), 중급 프로젝트(Planit), 고급 프로젝트(Epigram) 진행

• 기획자, 백엔드 개발자, 디자이너와 협업하여 대학 동아리 모집 통합 관리 플랫폼 CLUTING 개발

• 잇타 6기 대상, 블레이버스 우수상 수상

약 1년간 사이드 프로젝트, 개발자 스터디 및 커뮤니티 활동을 통해 실무 기술을 습득

최신 개발 트렌드를 반영한 다양한 프로젝트에 참여하여 협업을 통한 문제 해결 및 코드 리뷰 경험

• 리액트 스터디 참여

• CSS 심화 학습을 위한 Vending Machine 프로젝트 진행

• RESTful API 와 백엔드 연동 이해를 위한 블로그 프로젝트 진행

• 전역 상태 관리 이해를 위한 Chat Image Generator 프로젝트 진행

• todomark 크롬 익스텐션 개발 프로젝트 진행

• 결제 모듈과 REST API에 대한 깊은 이해를 목표로, 클라이언트·서버·어드민으로 구성된 쇼핑몰 프로젝트 진행

• 아티클 스터디 참여

학교 자치 기구인 교지 편집 위원회에서 총 3년간 활동

• 수습위원(1년): 기사 작성 및 편집 보조, 편집 과정 전반 학습

• 편집위원(1년): 원고 기획 및 편집 참여, 교지 제작 실무 담당,

• 학교 신문사, 방송국 등 타 자치 기구와 협업하여 취재 및 콘텐츠 제작

• 교육부장 & 기획부장(1년): 위원 교육 및 콘텐츠 기획 주도, 연 2회 교지 발간 총괄