Youngble_개발스토리

보통 웹사이트에서 mp4형식이 아닌 스트리밍형식의 영상을 재생이 가능하지만 다운로드를 못받는데 m3u8 과 ts를 사용하는 영상의 경우 ffmpeg를 통해 다운로드할수있다. 추후에 m3u8, ts, mp4 와 presigned URL 글을 올리겠지만 HLS(Http Live Streaming) 스트리밍 영상 패턴을 공부하다가 내가 듣고있는 강좌가 있는데 일정 기간이 지나면 못보게 되었는데 이 방법을 이용하면 소장가능하겠다 하여 찾다가 알게되었다. 수동 다운방법 순서 1. brew install ffmpeg 설치 ffmpeg를 통하여 비디오, 오디오, 이미지를 쉽게 인코딩, 디코딩, 먹싱, 디먹싱을 할수있도록 도움을 주는 멀티미디어 프레임워크이다. 2.해당 영상 m3u8의 link address 복사, 이..

인트로 영상을 보기전에 활용되는 썸네일은 우리가 흔하게 유튜브, 인스타, 페이스북 등 여러 매체를 통해 볼수있다. 하지만 이러한 영상 썸네일을 영상자체속성으로써 보여줄지 아니면 이미지로 추출하여 보여줄지 등 썸네일을 만드는 방법이 여러가지 있지만 그중 현재 서비스에서 사용하는 방식을 설명하고자한다. 결과 위는 mp4 동영상을 선택했을때 img태그에 썸네일을 보여주는 결과물이다. 이렇게 만들기위해선 몇가지 기본적인 개념을 이해가 필요하다. 1. Blob 2. Canvas 먼저 Blob을 알아보면 Binary Large OBjects 의 약자로 바이너리 형태로 큰 오브젝트를 저장한다고 할수 있고, 주로 이미지, 비디오, 사운드 등의 멀티미디어 객체를 나타낸다. Blob 객체 자체로 봤을때는 사실 데이터가 아..

최근 독서와 재테크에 매우 관심이 많아 여러 모임과 책을 읽고 있었으며 1달간의 부동산 스터디 모임 돈독에 대한 회고록을 쓸려고합니다.어떻게 시작하였을까? 저는 부동산 경매와 독서에 관심이 있었고 정말 아무것도 모르고 살다 부자아빠 가난한 아빠를 읽고 뒤통수를 맞은것처럼 자산을 쌓아야겠다고 생각하였고 마침 우연히 부동산 관련 클럽에 가입하였는데 돈독의 홍보가 있어 무작정 신청하여 시작하게 되었습니다. 무엇을 목표로 했을까?돈독을 통해 저는 다음 사진과같은 9월와 2023년 목표 계획을 잡았는데, 이미 돈독을 통해 몇개는 이룬것 같습니다. 제가 해보고싶었던 목표중 권리분석를 하고 경매 모의투자를 해보게 되었고 부동산, 주식 기초공부는 돈독 독서 미션을 수행하면서 이루고 확감투와 미션을 통해 돈독 수강 잘하..

Graphql 사용 정의 보통 Graphql 을 사용하는 이유는 Restful API 의 Over-Fetching의 데이터를 Under-Fetching으로 사용하는 것이다. Over-Fetching이란 필요이상의 데이터를 불필요하게 fetch 하는것을 의미하는데 그만큼 서버의 트래픽 부하 및 요청크기가 많아 지기 떄문에 비용면과 사용자 경험측면에서 좋지 않는 점이있다. 이를 해결하기위해 Graphql을 사용함으로써 Under-Fetching 즉, 기존의 데이터량으 필요한만큼과 사용하는 데이터로 줄여서 사용하는 것이다. 문제점 하지만 우리 프로젝트의 문제점은 이러한 이점을 배제한체 모든 데이터를 쿼리에 넣어 불러오기때문에 graphql 에대한 이점이 없었다. 따라서 graphql 최적화를 통해 필요한 데이..

적용 전 CLS 및 이미지 최적화 전 왼쪽화면을 보면 아래 컴포넌트 이미지가 먼저 뜨고난후 위의 배너 컴포넌트 그후 동영상 썸네일 파트가 차례로 뜨는걸 볼수있다. 이는 CLS(Cumulative Layout Shift)로 예측적이지 않은 밀림 현상을 나타낸다. 이를 통해 느려보일뿐 아니라 잘못된 클릭 가능성, 유저경험상 일정하지않고 혼란스러운 경험을 줄수있는 단점이있다. 이와같은 원인은 Nextjs를 쓰면서 static 페이지를 미리 만들면서도 dynamic import를 사용함으로써 화면로드는 빠르게 하기위한 장점은 있었지만 메인 홈 이다보니 첫진입에 있어서 dynamic import 이점이 위의 단점을 상쇄하지못하고 현 서비스에는 오히려 독이라고 판단되었다. 적용 후 이를 개선하기위해 static 페..

pull --rebase 란? 먼저 rebase이 무엇인지 알아보자. 영어 뜻대로 re-base, 즉 re(다시 ) base(기반)을 잡겠다는 뜻이다. 아래 그림을 보면 좀더 이해가 쉽다. 파란색 branch를 develop 이라 생각하고 빨간색 branch를 feature 기능 브랜치라고 생각해보자. 최초 develop에서 feature 브랜치를 만들고 작업을 1, 2, 3 해나갈것이다. 그리고 해당 기능을 완성하고 develop에 다시 PR merge를 할려고할때 최초 develop에서 가져왔을때 이외에 추가된 commit history가 존재한다고 하면(다른 팀원이 작업이나 새로운 기능이 완료되어 develop에 PR merge 된 경우), 왼쪽 그림처럼 rebase없이 git pull 을 할경우 ..