미리보기

교육 과정 관리 서비스 개발

기업 내 교육, 민간 교육 과정들의 진행 정보 관리와 교육생 평가 기능을 제공하는 웹 서비스의 프론트 엔드 개발을 담당했습니다.

실제 다양한 사용자(SK, 삼성, 현대 등 기업 교육 / Opensquare-D 등 민간 교육)들을 대상으로 서비스를 운영한 경험이 있습니다.

솔직한 소통의 이커머스 서비스, 솔직

리뷰 서비스들의 신뢰성을 차별점으로 가지는 이커머스 "스토어 솔직" 입니다.

기존 이커머스 플랫폼은 게시글 형태의 리뷰 서비스를 운영하지만, 솔직에서는 채팅 기반의 상품 리뷰를 진행할 수 있습니다.

• Github : https://github.com/momo1108/StoreSoljik

• Live Demo : https://store-soljik.vercel.app/

사용 스킬

• Front-End : TypeScript, React, Styled-Components

• Back-End : Firebase

• Deploy : Vercel

구현 기능

• 회원가입 / 로그인

  • Firebase Auth API 로 소셜 로그인 결합(Google, X, Github)

• 판매 상품 CRUD

• 상품 정보 조회 / 필터링 / 정렬

  • Firestore API 를 통한 채팅 기능 추가

• 장바구니 / 상품 구매

  • tosspayments-sdk 로 가상 결제 시스템 구현

  • 배송 정보 입력에 Daum Postcode API 적용

• 주문 정보 관리

최적화

• 이미지 최적화

  • 출력 사이즈를 고려한 규격(250px, 600px, 원본)별 이미지 리사이징

  • 이미지 포맷 변환(원본 포맷과 WebP 포맷을 같이 사용)

• Lazy Loading / Code Splitting

  • 페이지 단위로 Lazy Loading 적용

  • Vite 번들러의 옵션을 설정해 의존성 패키지들에 Code Splitting 적용

• 렌더링 최적화

  • react-hook-form 도입을 통한 input 컴포넌트 렌더링 최적화

  • React Context 의 분리를 통한 렌더링 최적화

• 데이터 캐싱 및 이미지 프리로딩

트러블 슈팅

• Firebase Auth API 의 세션 커스터마이징
  서버리스 환경으로 인해 세션 쿠키 설정 메서드를 사용 불가

  • setTimeout 메서드와 toast 를 활용한 세션 유지 알림

  • localStorage 를 활용해 여러 탭의 세션 시간 동기화

• 이미지 리팩토링 과정에서 CORS 에러 발생
  로컬 개발 환경에서 Firebase Storage API 내부의 이미지 url 로 Image 객체 생성 시 CORS 에러 발생

  • Vite 번들러의 proxy 기능을 활용하여 개발 환경에만 프록시를 적용

• Daum Postcode API 도입
  공식 문서의 권장 방식은 script 태그 삽입 방식으로, 사용 여부와 상관없이 전체 스크립트를 로딩하고 에러 핸들링이 불가능

  • Promise 객체와 document.createElement 메서드를 활용한 유틸 함수로 동기적으로 로딩 및 에러 핸들링

게이머를 위한 편리한 정보 조회 서비스, Loaple

MMORPG 게임 로스트아크의 공식 OpenAPI 를 활용해 인게임에서 어려운 세팅이나 단편적인 검색 기능을 보완하여 유저 최적화된 형태로 조회할 수 있는 서비스를 제공합니다.

1년간 개발 / 운영하며 홍보없이 일일 최대 방문자수 13인을 달성했습니다.

• Github : https://github.com/momo1108/LostarkProject

사용 스킬

• Front-End : TypeScript, JavaScript, React.js, Next.js, TailwindCSS, SCSS

• Back-End : Node.js, Nginx, MySQL

• Deploy : EC2

구현 기능

• 캐릭터 검색, 조회 기능 구현
  인게임 검색 기능은 단편화된 정보가 여러 위치에 흩어져서 존재

  • 다양한 캐릭터 정보와 세팅 정보를 한 화면에서 조회할 수 있도록 최적화

  • axios 와 정규식으로 OpenAPI 응답 데이터를 파싱하여 서비스에 사용

  • 검색 기록의 유지를 위해 localStorage 로 최근 검색 기록 페이지 구현

• 최저가 아이템 세팅 검색 기능 구현
  인게임 검색 기능은 최소 5회 이상의 매물 검색 과정, 수백개의 매물 중 최저가를 조합을 직접 찾아야 함

  • 조건을 설정하고 한번 검색하면 자동으로 여러 매물들을 검색 후 최저가 조합을 계산

  • OpenAPI 의 매물 데이터에 Brute Force 알고리즘을 적용해 최저가 조합 탐색 기능 구현

최적화

• Blocking 이슈 해소
  최저가 아이템 세팅 탐색 시 응답 지연 및 화면 멈춤 현상 발생

  • 다른 웹사이트의 request 패킷 분석을 통해 연산 최적화

  • Web Workers API 도입으로 연산을 별도 쓰레드에서 처리하여 메인 쓰레드 블로킹 방지

• 성능 개선

  • 최근 검색 기록의 프리뷰 이미지 용량이 너무 큼

    • Next.js 의 Image 컴포넌트를 활용해 이미지 최적화

  • 최저가 아이템 세팅 탐색 시간이 너무 길어서 Blocking 발생

    • 타 웹사이트의 동일 기능에서 request 패킷을 분석하여 성능 최적화

    • Web Workers API 를 사용해 메인 쓰레드의 블락을 방지

접근성 및 사용자 경험 개선

• 반응형 디자인 개선

  • tailwindCSS의 min-width 기반 반응형 유틸리티 클래스를 활용하여 다양한 해상도 대응

• 캐릭터 조회 페이지 개선

  
  기존 타 서비스에서는 Modal로 상세 정보 제공하기 때문에 마우스 클릭과 이동이 잦아 불편

  • 마우스 hover 시 Tooltip으로 정보를 제공하여 조작 최소화(react-tooltip 사용)

• 검색 조건 설정 방식 개선
  기존 타 서비스에서는 필터링과 단순 드롭다운 UI로 검색 항목 선택

  • 이미지, 필터링, 방향키 조작 기능을 갖춘 커스텀 Select 컴포넌트 를 구현하여 시각적 편의와 키보드 접근성 강화

• SEO 적용

  • 모든 페이지에 next-seo 라이브러리를 적용해 메타태그 및 구조화 데이터 설정

Markdown to HTML 에 그룹을 적용하자

기존 Markdown 문서를 HTML 로 파싱해주는 패키지들은 문단의 개념을 가지고 있지 않습니다.

Markdown Grouper 는 헤더의 레벨(1~5)에 맞춰, 계층적인 문단의 그룹핑을 구현했습니다.

• Github : https://github.com/momo1108/markdown-grouper

• NPM : https://www.npmjs.com/package/markdown-grouper

  • 주간 다운로드수 최대 443회 달성

사용 스킬

• JavaScript, TypeScript, Gulp.js, Commander.js

구현 기능

• header 태그를 기준으로 그룹핑 구현

  
  HTML 로 파싱된 마크다운 문서는 모든 element 가 같은 부모를 가지는 문제점이 존재

  • header 태그를 찾아서 문단의 범위를 정하고 section 태그로 그룹을 생성

    • 각 문단들은 순차적인 selector 를 지정해서 구분

    • section 의 selector 에 prefix, postfix 설정 가능

    • 재귀 함수를 사용해 헤더 레벨을 기준으로 계층적인 문단 구조를 구현

  • 문단 탐색 시 최상위, 최하위 헤더 레벨을 설정해 그룹핑 적용 범위 설정

• 그룹 미리보기 기능 구현
  문서 내 헤더들이 어떻게 문단으로 묶이는지 보여주는 출력 예시가 필요

  • 재귀 함수를 사용하여 헤더들의 레벨에 맞게 계층적인 tree 형태로 출력

트러블 슈팅

• 코드 블럭 내 헤더 태그 그룹핑 이슈 해결
  마크다운 문서 내 html 코드 블럭안에 작성된 <header> 태그가 잘못 파싱되어 문서 그룹핑에 포함되는 문제 발생

  • 파싱 전 코드 블럭 내 헤더 태그를 특정 문자열 패턴으로 인코딩

  • 그룹핑 로직 후 최종 문서에서 디코딩을 적용하여 원상 복원

코드 가독성 개선

• 헤더 정보 구조화

  • 헤더 태그의 레벨, innerText, 하위 문단 정보를 Class 형태로 구조화하여 명확한 계층 구조 유지

• 문서 포맷팅 적용

  • 최종 결과물에 prettify를 적용해 일관된 코드 포맷과 가독성 향상 구현

코드 보안 적용

• npm 패키지 게시 전 보안 강화
  게시되는 JS 파일에 대한 보안 처리를 위해 난독화 적용

  • Gulp.js의 uglify 플러그인으로 압축

  • javascript-obfuscator 플러그인으로 난독화 처리

접근성 및 확장성

• CLI 환경 지원
  기능 특성상 터미널 기반 CLI 환경에서도 사용 가능해야 함

  • commander.js를 활용해 커맨드 인터페이스 설계

  • 난독화된 CLI 파일을 Gulp.js로 빌드하여 배포

• TypeScript 호환성 확보

  • Type 정의 파일(.d.ts)을 함께 제공하여 TypeScript 프로젝트에서도 사용 가능하도록 대응

수기에서 디지털로의 전환

기업 내 교육, 민간 교육 과정들의 진행 정보 관리와 교육생 평가 기능을 제공하는 웹 서비스입니다.

실제 다양한 사용자(SK, 삼성, 현대 등 기업 교육 / Opensquare-D 등 민간 교육)들을 대상으로 서비스를 운영되고 있는 서비스입니다.

프로젝트 구축 및 DB 설계 및 프론트엔드 개발자를 담당했습니다.

사용 스킬

• Front-End : Vue.js, TailwindCSS

• Back-End : Node.js, Nginx, MySQL

• Domain / Deploy : Gabia, EC2

구현 기능

• 교육 과정 및 교육생 CRUD 구현

  • 관리자 또는 강사가 교육 과정과 교육생 정보를 등록, 조회, 수정, 삭제할 수 있는 기능 구현

• 일일 퀴즈 기능

  • 오프라인 퀴즈의 온라인 전환

    • 기존 종이 문제지를 대체할 수 있도록 웹 기반 퀴즈 UI 를 구현

  • 강사용 기능

    • 퀴즈 출제, 실시간 채점 기능 구현

    • 채점 완료 시 퀴즈 결과 화면에 즉시 반영

    • 채점 Modal과 결과 조회 페이지 간 상태 공유를 위해 EventBus 활용

  • 교육생용 기능

    • 객관식/주관식 응시 UI 구성

    • 문제 풀이 시 onClick 이벤트와 axios를 통해 실시간 응답 전송

• 교육생 개별 평가 리포트 작성

  • 강사 피드백 및 교육생 점수 기록

  • vue-chartjs로 평가 결과 시각화

  • jspdf를 이용해 리포트 PDF 저장 기능 구현

• 캐글 스타일의 데이터 분석 컨테스트 시스템 구현

  • axios + FormData 를 활용한 파일 업로드 기능

  • JavaScript 기반 통계 분석 성능 지표 계산 로직 구현

  • 실시간 평가 상황 확인을 위한 polling 기반 리더보드 페이지 구축

기능 개선

• 입력 편의성 개선

  • xlsx 라이브러리를 활용해 엑셀에서 정보 불러와 자동 저장

• 데이터 출력 기능 개선

  • xlsx-style을 사용하여 DB 레코드를 엑셀로 내보내는 기능 구현

• 퀴즈 진행 경과 유실 문제 해결

  • 퀴즈 도중 예기치 않은 종료 발생 시를 대비해 setInterval + axios 기반 polling 적용

  • 진행 상황을 주기적으로 서버에 저장하여 복구 가능성 확보

트러블 슈팅

• 모달과 결과 페이지 간 상태 공유의 어려움

  • EventBus를 도입해 컴포넌트 간 통신 처리

• 브라우저 종료 시 퀴즈 응시 정보 유실

  • polling 방식으로 서버에 주기적 상태 저장

이력서 및 면접 준비, 알고리즘 테스트, 개발 프로젝트 등 실전 중심의 취업 대비 프로그램에 참여했습니다.
몇주간 조장을 맡아 조원들의 참여를 독려하고, 정보 공유 및 주간 진행 상황을 체계적으로 관리하여 팀 내 원활한 협업을 주도했습니다.

• 팀 내 일정 및 진행 상황을 정기적으로 정리 및 공유

• 이력서, 면접, 코딩 테스트 등 준비 자료 공유 및 피드백 주도

• 프로젝트 진행 시 팀원 간 역할 분담과 목표 달성 관리