미리보기

• 스마트 모빌리티(전동 킥보드, 전동 휠)의 국내 유통 관리 파트를 담당 (재고 품질 관리, 출고 관리, 고객 서비스 관리)

• 재고의 품질 관리 시스템, 출고 관리 시스템 체계화에 기여

• 고객 서비스 중 A/S 프로세스 개선으로 연 1500만원의 추가 이윤 창출

• 행정안전부 주관 공공 빅데이터 인턴십 참여

• 기초적인 Python, R, Q-GIS 3.0 사용법과 빅데이터 지식을 학습 및 실무에 적용

• 사회 현안 해결 프로젝트에 참여
  (참여 프로젝트 : 지역별 고층 건물 밀집도 분석에 따른 빌딩풍 피해 최소 및 활용 방안)

[GitHub 레포지토리 주소] | [배포 페이지 주소]

기술 스택

JavaScript, TypeScript, React, Next.js, Chakra UI, Docker, Vercel, AWS Elastic Beanstalk, Jest, React Testing Library

개발 기간

2024. 9. 9 - 2024. 10. 2 (1주 기획 / 2주간의 핵심 기능 개발)

구현 사항

1. 사용자가 입력한 웹 페이지를 렌더링하는 기능 구현

   • 서버에서 헤드리스 브라우저로 웹 페이지의 스냅샷을 생성하고 HTML요소를 추출하는 기능 구현

   • 각 HTML 요소에 적용된 스타일을 getComputedStyle로 추출하고 인라인으로 삽입하여 스타일 보존
     

2. 사용자가 취사선택한 컨텐츠로 페이지를 생성하는 기능 구현

   • 다른 페이지를 불러와도 이전 선택 상태를 유지해 여러 컨텐츠를 통합하도록 구현

   • 선택한 내용을 미리보기 컴포넌트에 공유해 생성될 페이지 미리보기 제공

   • 웹 페이지 생성 시 SSL 인증서 발급 지연을 고려하여 polling으로 SSL 인증 완료 후 링크 제공
     

3. Next.js를 활용하여 상황별 렌더링 방식 구현

   • 초기 로딩 속도 개선을 위해 애플리케이션 최상위 컴포넌트를 서버 컴포넌트로 구성

   • URL 입력에서 컨텐츠 선택까지의 과정은 CSR을 활용하여 컨텐츠 흐름을 동적으로 처리

   • 생성되는 웹 페이지는 추가적인 렌더링 비용이 발생하지 않도록 SSG를 활용

[GitHub 레포지토리 주소] | [배포 페이지 주소]

기술 스택

JavaScript, React, Next.js, Tailwind CSS, AssemblyScript, Chart.js, Supabase, Docker, AWS Elastic Beanstalk, Jest

개발 기간

2024. 8. 9 - 2024. 8. 30 (1주 기획 / 2주 간의 핵심 기능 개발)

구현 사항

1. JavaScript와 동일한 코드로 컴파일된 WebAssembly와의 성능 비교 결과 제공

   • JavaScript 코드의 추상 구문 트리를 AssemblyScript로 트랜스파일한 후 WebAssembly로 컴파일

   • JavaScript와 WebAssembly를 병렬 처리해 1초 간 최대 실행 횟수를 비교하고 성능을 시각화

   • Pipeline 패턴을 적용해 모든 과정을 순차 처리하고, 커스텀 에러를 확장하여 에러 핸들링을 중앙화함

   • 인터셉팅 라우트를 활용하여 코드 입력부터 결과 제공까지의 사용자 흐름을 제어하고 유도
     

2. 격리된 환경에서 코드를 실행하고 처리하여 보안과 안정성 강화

   • isloated-vm으로 격리된 컨텍스트를 생성·관리하여 서비스 거부 공격, 권한 상승 공격 등의 보안 위협 방지

   • Docker로 프로젝트와 호스트 운영체제 리소스를 격리하여 프로젝트 안정성 강화
     

3. 결과 페이지 공유 기능 구현

   • 결과 데이터를 Supabase에 저장하고,SSR로 결과 페이지를 공유 링크를 생성하는 기능 구현

   • 공유 링크가 외부 플랫폼에서 임베드 컨텐츠로 표시되도록 메타데이터와 HTTPS를 구성하여 구현