Skip to content

Memouri 프로젝트 완성본 (frontend-webapp, frontend-web, backend)

Notifications You must be signed in to change notification settings

Yush1nk1m/Memouri

 
 

Repository files navigation

LG전자의 요청으로 실제 작업이 진행된 리포지토리의 접근 권한은 private 처리되었습니다. 히스토리 정보가 필요하시다면 별도로 요청해 주시기 바랍니다. 백엔드에서 작업한 내용은 /backend, /docs 디렉터리에 포함되어 있습니다.

Memouri | 2023.10. ~ 2023.12. | 4人 | Back-end(2人)

Logo

주요 기술 스택: Express.js, MongoDB, FFMPEG

소개: Memouri는 LG전자에서 개설한 산학연계 프로젝트 과목에서 제작한 미디어 스트리밍 웹 앱입니다. 사용자들끼리 그룹 단위로 상호작용하고 그룹에 동영상을 올려 소통한다는 특징을 갖는 소셜 미디어 서비스입니다.

목적: Adaptive Live Streaming을 제공하는 미디어 웹 앱을 구현하는 것

주요 성과:

  • 사실상 1인 작업을 수행하면서 신속하게 REST API를 설계 및 구현하였고 이를 Notion을 통해 정리하면서 프론트엔드 개발자와 신속하게 소통하여 첫 개발 프로젝트임에도 단기간에 완성도 있는 결과물을 만들고 LG전자로부터 좋은 평가를 받을 수 있었음
  • FFMPEG의 Node.js 래퍼 라이브러리인 fluent-ffmpeg을 활용하여 동영상 데이터의 미디어 프로세싱 파이프라인을 구축함
  • 사용자 개개인의 동영상 시청 시점을 저장하고 썸네일을 여러 개로 분리해서 정적으로 제공하던 동영상 썸네일을 사용자 맞춤으로 동적으로 제공되도록 기능을 고도화함

주요 문제 상황 → 해결 방법:

  • 미디어 웹 앱이 실행되는 스마트 TV와 백엔드 서버 간 통신 과정에서 CORS 문제 발생 → 이 문제는 스마트 TV가 항상 실습실의 와이파이를 통해 연결된다는 점 때문에 CORS의 허용할 오리진을 설정하는 것이 너무 힘든 문제였음. 이 때문에 시연 환경에서 서버를 배포하지 않고 같은 네트워크 내에서 스마트 TV와 백엔드 서버 간 프라이빗 IP를 통해 통신하게 하고, 웹 앱을 올리기 전 DHCP로 부여된 IP를 명시하여 우회적으로 해결함.

배운 점 & 아쉬운 점:

  • REST API를 설계하고 구현하면서 API의 논리를 프론트엔드 개발자에게 납득시키는 기본적인 소통 방식을 익힐 수 있었음
  • LG전자 측에서 소프트웨어의 설계, 문서화, 테스팅, CI/CD 등 소프트웨어 엔지니어로서 지녀야 할 기본적인 소양을 많이 알려주어 큰 도움을 얻었음
  • 포트폴리오를 작성하고 있는 지금 시점에 이 프로젝트를 다시 한다면 더 깊이 있는 기능을 구현할 수 있을 것 같은데 개발에 미숙할 때 진행한 프로젝트라는 점이 가장 아쉬움

아키텍처

Architecture

About

Memouri 프로젝트 완성본 (frontend-webapp, frontend-web, backend)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 61.9%
  • HTML 19.9%
  • TypeScript 12.5%
  • CSS 4.3%
  • Less 1.4%