미리보기

기술 스택

VanillaJS HTML/CSS Flask Node.js MySQL AWS

인공지능 온라인 시험 TestWith 개발 및 유지보수

2022.01 ~ 2023.05

• 관리자 시험 생성 및 관리 시스템, 응시 인원 초대 및 관리 시스템 개발 

• 응시자 시험 및 결과, 자동 채점 및 분석 리포트 생성 기능 개발 

• 자체 문제 은행 페이지 구축으로 관리자 별 문제 관리 편의성 향상

• MathJax 기반 수식 에디터 및 텍스트 에디터 API 연동으로 문제 생성 시간 단축

• SSE 스트리밍 기반 ChatGPT API 구현, 평균 응답 체감 시간 98% 단축 및 실시간 텍스트 렌더링 구현

• Flask 멀티 쓰레드로 대량의 메일 전송 시간 평균 약 80% 단축 (10분 → 2분)

• AWS SES 리팩토링으로 메일 전송 시간 평균 약 97% 추가 단축 (2분 → 10초)

• AWS S3 파일 관리 기능 구현으로 안정적 파일 업로드 및 데이터 접근 속도 개선

KMA 온라인 진단 시스템 LMS 개발 및 유지보수

2022.08 ~ 2023.05

• 수강생 및 관리자 시스템 DB 설계부터 개발까지 단독으로 진행

• 수료증 및 자격증 템플릿 등록·저장 기능 개발로 템플릿 제작 시간을 70% 이상 단축

• Chart.js를 활용하여 응시자 등수와 성적을 시각적으로 구현

• Video.js를 활용하여 동영상 진도율 추적 및 실시간 저장 등 다양한 제어 기능 구현

• Pdf.js를 활용하여 pdf 렌더링과 암호화 생성 기능 개발

인공지능 온라인 모의고사 시스템 개발 및 유지보수

2023.02 ~ 2023.05

• 토스페이먼츠 API를 통한 결제 시스템 구현

• 클라이언트가 첨부한 PDF를 서버에서 암호화하여 사용자가 다운로드할 수 있도록 구현

배포 링크 및 포트폴리오

• 배포 링크

  (ID : test@gmail.com / PW : test1234!)

• 포트폴리오

인력 구성

• 프론트엔드 개발자 5명

기획 의도 및 프로젝트 설명

• 실시간 주식, 뉴스 데이터를 분석해 다국어 맞춤형 리포트를 제공하는 주식 분석 플랫폼

• 일경험 프로그램을 통해 기업 연계 프로젝트로 해외 주식 분석 AI 리포트 플랫폼을 개발

기술 스택

Next.js TypeScript Zod TailwindCSS Zustand Node.js MongoDB AWS

담당 업무

• 발견 (주식 및 뉴스 검색) 페이지 구현,

  관심 주식 페이지 구현

• 디바운스, es-hangul로 한글 초성 및 영어 스펠링 검색 기능 구현으로 접근성 증가

• SSG와 ISR을 활용하여 페이지 렌더링 속도 최적화

• 웹 성능 최적화를 통해 Lighthouse 점수 평균 78.5 → 95.5점으로 개선

• MongoDB 데이터베이스 설계 및 API 문서화로 Swagger 도입, 개발 생산성 향상

• Puppeteer/Cron-Job을 활용해 뉴스 기사 수집 자동화 시스템을 구축하여 평균 수집 시간을 90% 이상 단축

• AWS S3를 사용한 이미지 호스팅 및 관리

• AWS EC2, 로드 밸런싱을 사용하여 백엔드 API 서버 배포

• 구글, 네이버 서치 콘솔 등록 및 메타태그 활용으로 SEO 적용

트러블슈팅

1. Next-Auth 네이버 소셜 로그인 OAuth 버그 및 해결↗

   • Auth.js v5 네이버 소셜 로그인 구현 중 expires_in 타입 오류로 인증 에러 발생

   • oauth4webapi 라이브러리의 타입 체크 로직 문제로 원인 파악

   • patch-package로 라이브러리 수정해 문제 해결

2. Next.js에서 SVG 사용↗

   • SVG를 React 컴포넌트로 설정 시 일반 URL 방식에서 오류 발생

   • svgr 공식 문서를 참고해 컴포넌트, URL 방식 둘 다 허용하게 적용

3. Next.js 클라이언트에서의 백엔드 쿠키 설정

   ↗

   • 프론트 서버에서 백엔드 요청 후 응답 쿠키가 브라우저에 설정되지 않는 문제 발생

   • 응답 쿠키를 브라우저로 전달하는 로직 추가로 해결, 이후 미들웨어에서 해당 쿠키를 활용해 로그인 여부 판별 로직 적용

배포 링크 및 포트폴리오

• 배포 링크 (현재는 AWS Free Tier 종료로 인해 서버를 종료)

• 포트폴리오

인력 구성

• 프론트엔드 개발자 3명

기획 의도 및 프로젝트 설명

• 분산된 정보와 홍보의 어려움으로 예체능 분야의 대학생들의 졸업 작품 또는 정기 행사에 관심과 주목을 받기 어려운 상황에서 효과적으로 소개하고 홍보할 수 있는 플랫폼

• MVP 개발 및 동작 우선 구현을 목표로 진행, 이후 버그 수정, 리팩토링, 최적화를 진행

기술 스택

React TypeScript Tanstack Query Zustand MySQL AWS GitHub Actions

담당 업무

• Vite 및 TypeScript 프로젝트 초기 설정, Proxy 및 절대 경로 설정으로 개발 환경 셋팅

• 디자인 시스템 구축 및 공통 컴포넌트 설계

• 로그인, 회원가입 페이지 제작 및 JWT 인증 기반 PrivateRoute 구현

• 토스페이먼츠 API를 이용한 예매 시스템 개발

• Tanstack-Query, Axios를 활용해 에러 핸들링 구현

• ERD 설계 및 API 명세서 작성

• AWS S3를 사용한 이미지 호스팅 및 관리

• 프론트엔드는 AWS S3로 정적 배포, 백엔드와 RDS 데이터베이스는 EC2에 배포

• GitHub Actions으로 CI/CD 파이프라인 구축 및 자동 배포, CloudFront 캐시 무효화

1. S3 이미지 CORS 오류↗

   • S3 이미지를 불러온 후, 이미지의 컬러 추출하는 과정에서 CORS 오류 발생

   • S3 이미지에 오래된 CORS 설정이 포함되어 있어서 새로운 설정이 반영되지 않음

   • 각 요청의 URL을 고유하게 만들어 브라우저가 새로운 요청으로 인식하여 캐시 우회

2. Axios 자격 증명 및 엔드포인트 URL 설정 표준화 작업↗

   • 배포 후 API 요청 시 CloudFront 프록시 설정 제한으로 CORS 및 쿠키 이슈 발생

   • Proxy 설정을 생략하고 전체 URL 사용 및 withCredentials 설정으로 해결

3. Toast error 여러 번 출력 되는 현상↗

   • 메인 페이지에서 3개의 API 요청 실패 시 동일한 Toast 에러 메시지가 중복 출력

   • Toast limit 제한 후, clearWaitingQueue로 Toast 큐에 쌓인 대기 상태 에러 삭제

배포 링크 및 포트폴리오

• 배포 링크 (현재는 AWS Free Tier 종료로 인해 서버를 종료)

• 포트폴리오

인력 구성

• 프론트엔드 개발자 4명

기획 의도 및 프로젝트 설명

• 일경험 프로그램을 통해 웅진씽크빅 기업 연계 프로젝트로 웹 빌더 관리자 페이지 개발

• 개발자나 퍼블리셔가 아닌 누구나 쉽고 빠르게 상세 페이지를 제작할 수 있는 블록 기반 웹 빌더 시스템

기술 스택

React Redux Toolkit Node.js MySQL AWS GitHub Actions

담당 업무

• 로그인 및 회원가입 페이지 제작

• 메뉴 관리 페이지 UI 및 기능 개발

• 디자인 편집 페이지 UI 및 기능 개발

• 로그인, 회원가입 페이지 제작 및 JWT 인증 기반 PrivateRoute 구현

• UX 개선을 위해 드래그 앤 드랍 적용으로 관리 페이지의 순서 변경 기능 개발

• JSON 기반 블록 디자인 시스템 구축

• 재사용성을 높여 코드 수정 없이 다양한 UI를 즉시 추가 및 수정으로 유지보수 시간 단축

• 변경 사항 실시간 저장 및 히스토리 관리로 블록 디자인 복원 기능 개발

• 사용자 맞춤형 디자인 요소(배경색, 여백 등) 자유로운 설정 기능 구현

• 고용노동부 주관 KDT 훈련생 또는 수료생의 역량을 발휘하고 창의적 융합 사고를 개발하기 위한 대회

• 난임 부부 종합 케어 플랫폼 기획 및 개발

• 최우수상 (고용노동부 장관상) 수상

• Next.js 개념을 이해하면서 React와의 차이점, 렌더링 및 캐싱 전략을 습득하고 기업 연계 프로젝트 진행

• 해외 주식 분석 플랫폼 개발

• 최종 1위 팀 수상 및 우수 수료생 선정

• K-PaaS 오픈 클라우드를 사용하여 국가 사회 현안을 지원 해결할 수 있는 서비스(웹/앱) 개발 공모전

• 착한 가게 소개 웹 플랫폼 개발

• 프론트엔드 심화 교육 과정으로 React, TypeScript를 주로 사용하여 프로젝트 진행하는 단기 교육 과정

• 대학생 공연/전시 정보 플랫폼 기획 및 개발

• 역량 강화 코스를 통해 서비스 기획, React 개념 / 문법을 습득하고 프로젝트 코스를 통한 기업 연계 프로젝트 진행

• 웅진 씽크빅 사이트와 연동이 되는 웹 빌더 관리자 페이지 개발

• 전체 21개 팀, 웅진씽크빅 프로젝트에서는 1등, 전체에서는 2등