수피의 느슨한 개발

Origin 요청과 Edge location 요청 간 응답시간 비교 S3를 cloudfront로 배포했을 때 응답 시간 감소의 효과가 얼마나 좋은건지 직접 확인해 보고 싶었다. 라이브 스트리밍 프로젝트를 진행하면서 동일한 ts파일에 대한 GET 요청을 보냈을 경우 cloudfront에 배포할 때와 단순히 Origin(S3)에서 GET 요청을 보낼 때의 차이를 비교하는 방식으로 테스트를 진행하고자 했다. 그래서 Chrome의 inspector창을 열어 '네트워크'의 '타이밍' 항목을 통해 응답 대기 시간을 비교해 보았다. 방식은 간단하다. 다시보기 서비스 이용을 통해 cloudfront의 캐시 정책을 no-cache로 설정하여 전혀 캐싱을 하지 않을 때와 Elemental-MediaPackage 캐시 정책..

Nest.js passport로 카카오, 구글 로그인 인증 구현하기 passport를 통해 카카오, 구글 계정으로 로그인할 수 있도록 구현하면 유저 입장에서는 회원가입 절차 없이 바로 로그인 가능하기 때문에 편의성을 제공해 줄 수 있게 되고, 무엇보다 소셜 로그인 정보를 기반으로 유저에게 특별한 회원가입 절차 요청 없이 회원 가입 처리가 가능해진다. 아래 링크에 접속하면 카카오에서 로그인 인증을 어떤 과정으로 처리하는지에 대한 설명이 담겨 있으니 관심있으면 참고해보자. 카카오 로그인 처리 Flow 간략하게 소셜 로그인 인증과정을 정리하자면 아래와 같다. 사용자가 사이트(이하 프론트)에서 카카오 로그인 버튼을 클릭합니다. 백엔드는 카카오 인증 서버에게 인가 코드 발급을 요청합니다. 카카오 인증 서버에서 사..

라이브 스트리밍 프로젝트를 진행하면서 요즘 유행하는 버튜버 기능을 구현하고자 시도해 보았다. 실제 버튜버 적용을 어떻게 하는지 알아본 바에 따르면 Vroid studio라는 프로그램으로 버튜버 캐릭터를 생성 및 저장할 수 있으며 (.vrm 파일로 생성된다.) 이를 animaze 라는 소프트웨어를 통해 캐릭터를 불러오면 웹캠에 비춰진 내 모션과 캐릭터가 연동되어 움직이는 연출이 즉시 적용되었고, 해당 화면을 OBS에서 가상 카메라 형태로 송출하는 방식임을 알 수 있었다. 이처럼 단순하게는 ZOOM의 아바타 기능에서 더 나아가 버튜버처럼 최소 눈과 입 모션 캡처를 적용하는 방법은 어디서부터 어떻게 구현해야할지 당장 떠오르지 않았다. 하지만 당장 시도해볼 만한 방법은 face detection을 통해 카메라에..

현재 진행 중인 프로젝트를 통해 Nest.js 기반 API 서버와 라이브 스트리밍을 위한 서버, AWS 서비스로 라이브 스트리밍을 구현하였으며 대략적인 Work Flow는 위 그림과 같다. 어떤 방식으로 구현되었는지 단계별로 알아보고 보완이 필요한 부분을 살펴보자 1. 스튜디오 입장 BJ가 스트리밍을 시작하기에 앞서 준비 단계에 해당하는 페이지로 접속하며 이를 스튜디오로 칭했다. 해당 페이지에서는 스트리밍을 위한 신규 채널을 생성하고, 라이브 스트리밍을 진행할 수 있다. 2. 유저 정보 획득 입장한 유저의 신원을 조회한다. 이는 BJ가 스튜디오에 입장했을 때 종료되지 않은 스트리밍 채널 존재 여부를 확인하기 위함이다. 채널 존재 여부를 확인하는 이유는 첫째, BJ는 한 번에 여러 스트리밍 채널을 생성할 ..

라이브 스트리밍 페이지 구현 프로젝트에서 rtmp 프로토콜과 hls 기술을 활용하였다. OBS와 같은 라이브 방송용 프로그램으로 rtmp://내IP주소/스트림키:1935 연결을 설정한 후 방송 시작을 클릭하면 해당 방송이 그대로 지정한 rtmp프로토콜로 흘러 들어온다. 이 때 실시간으로 들어오는 데이터를 하나의 파일로 저장하기 보다는 어느정도 일정한 간격으로 깍뚝썰기 하듯 조각 단위로 저장을 하는데 이렇게 하는 방식을 트랜스 먹싱이라고 부르며 대표적으로 hls 기술이 이를 구현한다. 간단하게 말해서 실시간으로 흘러들어오는 영상을 마치 가래떡 뽑는 기계에서 일정 간격으로 떡 자르듯 조각내어 파일로 저장하는 방식이라 할 수 있겠다. nodejs에서는 'node-media-server'라는 node 패키지를 ..

AWS의 EC2, Nginx, OBS로 라이브 스트리밍 구현하기 라이브 스트리밍 프로젝트를 준비하는 과정에서 nginx로 스트리밍이 가능하다는 것을 알게 되었고, 크롬의 hls 실행 익스텐션으로 라이브 스트리밍을 시청하는데 성공했다. 하루를 꼬박 보내버리면서 알게된 방법을 차근차근 정리해보았다. AWS EC2에서 구현하기 프리티어인 t2.micro 인스턴스(ubuntu22.04)를 생성한다. 이후 sg(보안 그룹)의 인바운드 규칙에서 앞으로 사용할 여러 포트들을 열어줘야 한다. 80포트(http) 8088포트(m3u8파일 읽기를 위한 포트) 1935포트(rtmp 프로토콜) 패키지 설치 EC2 우분투 서버에 접속 후 스트리밍을 위한 패키지 설치를 진행했다. sudo apt-get update sudo ap..

Express와 마찬가지로 multer를 활용해서 업로드를 하면서 Nest.js답게 module, controller, service를 활용합니다. nest g mo uploads nest g co uploads nest g s uploads 위 CLI 명령어를 활용하면 uploads이름을 가진 폴더, 모듈, 컨트롤러, 서비스까지 기본 코드가 작성된 파일 생성이 가능합니다. nest.js에서는 task별로 구분해서 생성한 각각의 module.ts 파일을 app.module.ts에 전부 import 해야 하고, 모듈 내에서 컨트롤러와 서비스 등록 및 서비스 파일을 외부 모듈에 적용 시 export 해줘야 하는 등 놓치기 쉬운 설정이 많은데 CLI 명령어로 이들을 자동 생성하면 커넥션이 필요한 부분을 알아서..

비동기 함수의 코드 실행 순서를 제대로 파악하지 못한다면 디버깅 시 원인을 도저히 찾지 못하는 사태가 발생할 수 있다. 가령 비동기 함수 내에서 신규 html 태그를 생성한 뒤, 해당 태그에 EventListener를 적용하는 코드를 작성했다고 했을 경우, 신규 태그를 생성하기도 전에 EventListener를 먼저 등록하려고 시도할 수 있다. 이는 비동기 함수가 보낸 요청이 완료되기 전에 이벤트 등록 함수가 먼저 실행될 수 있기 때문이다. 이러한 비동기 함수의 실행 순서에 대해 사전에 이해해 둘 필요가 있다. 이는 백엔드에 들어온 요청을 효율적으로 처리하도록 기능을 구현하는 과정에서 필요할 것이다. STEP 1 async function fetchAndPrint() { console.log(2); co..

What is Nest.js? 이전에 사용한 express는 사실 프레임워크라고 부르기 민망할 정도로 너무 제약 사항이 없는 편이었다. 프레임워크의 대표적인 특징은 프로젝트 수행에 있어서 필요한 초기설정, 아키텍처 틀이 정해져 있다는 점인데, express는 자잘한 기능까지도 하나부터 열까지 구현해야 한다는 점이 불편한 점이다. 자유도가 높다고도 볼 수 있겠지만 그만큼 오류를 범할 가능성도 높아지는 것이다. Nest나 Django와 같은 프레임워크는 API 요청, 응답 방법이라든지, 아키텍처 구성 방식이라든지 이미 강제로 정해진 부분이 있어 이를 지키지 않을 수 없도록 구현되어있다. 그렇게 약속되어 있기 때문에 프로젝트를 생성하면 반드시 필요한 기능은 자동으로 파일 생성 및 코드 작성까지 미리 해준다. ..

PASSPORT를 활용한 유저 인증 기능 구현 타입스크립트 기반 웹페이지 구현 프로젝트에서 로그인 및 인증, 인가 기능을 passport 패키지를 활용하여 구현하는 과정에서 참조한 코드를 리뷰하는 형태로 설명하고자 합니다. 아래 블로그를 참고하여 passport 기능 구현을 공부했습니다. 블로그 참조 passport 패키지 이전까지 jwt와 쿠키를 활용한 Access Token, Refresh Token 생성 및 인증 기능을 구현하였다. 이번 시간에는 passport라는 패키지를 활용하여 인증 기능을 구현해 보고자 한다. 이는 개인적으로 구현하는 인증 기능보다 더 많은 기능이 담겨 있으며, 무엇보다 검증된 패키지로서 보완 측면에서 좀 더 신뢰할 수 있지 않을까? 라는 막연한 기대감이 있기에 사용해 보았다..