Youngble_개발스토리

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

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 을 할경우 ..

사용 계기 기존에 예전에 있던 분이 eslintrc를 구축하여 그대로 쓰고있었는데 vscode를 사용할때는 .vscode에 extensions.json과 settings.json을 통해 eslint를 기본 formatter로 지정하였지만 팀원들은 vscode가 아닌 웹스톰으로 사용하기때문에 해당 formatter 설정이 들어가지 않았고 그로인해 코드 정렬시 다르게 적용되어 PR 리뷰를 할때 불필요한 + , - 줄이 생기게 되었고, 리뷰하는데 불필요한 에너지와 시간을 쏟게 되는것을 방지하고자 prettier를 설정하기로 했다. (아래 스크린샷과 같은 PR시 불필요 변경사항들) 작동조건 prettier를 사용하는 방법은 간단하다. 다음과 같은 조건을 다 만족해야지만 정상 작동한다 1. prettier 라이브..

[원인] 순수 video 태그 영역으로 재생하는게 아닌 썸네일 이미지를 사용하여 videojs 라이브러리를 사용 재생시 풀스크린을 하려고 video 태그는 width: 0, height: 0 으로 하고 아래와 같이 썸네일 image를 서버에서 가져와 style 적용함 2. 썸네일 클릭시 숨겨진 해당 video 태그의 ref 로 useRef로 play() 시키고 fullscreeen 메서드 실행시켜 풀스크린시 핸드폰을 가로세로 회전시켰을때 아래와같이 본래 사이즈로 돌아오지 못하는 이슈가 발생 [원인 분석 및 해결 방안] 먼저 videojs 라는 라이브러리를 사용하고 있기때문에 videojs에서 사용하는 속성 또는 이슈가 있는지 체크해봄 videojs의 속성, css를 직접 건드려보았지만 수정할수없었고 풀스..

그전에 웹팩 과 바벨에 관하여 정리한적이 있는데 개념뿐만 아니라 어떠한 흐름으로 쓰는지에 대해서 좀더 디테일하게 정리하고자 한다. 순서 웹팩 적용 1. 웹팩 설치 : webpack/ webpack-cli/ webpack-dev-server 2. webpack.config.js 3. package.json scripts 빌드 명령어 3. 로더: css-loader / style-loader 4. 플러그인(Plugin) 5. 개발서버(server) 바벨 적용 1. 바벨설치: babel-loader/ @babel/core / @babel/preset-env 2. 프러그인(Plugin) 3. Preset 4. 리액트 / @babel/preset-react 5. babel-loader 웹팩 적용 1. 웹팩 설치 ..

순서 1. Lighthouse 설명 - First Contentful Paint, FCP - Speed Index, SI - Largest Contentful Paint, LCP - Time To Interactive, TTI - Total Blocking Time, TBT - Cumulative Layout Shift, CLS 이전글 웹 성능최적화 (1) 보러가기 1. Lighthouse 설명 웹 페이지의 종합 성능을 측정하는 툴로써 이전에는 따로 프로그램을 다운로드하여 사용해야했지만 이후에 구글 크롬은 브라우저에 기본내장하여 사용할 수 있도록 했다. Lighthouse를 통해 성능 점수를 매길때 6개의 지표(Metrics)가 있다. 또한 이러한 지표를 웹 바이탈(Web Vitals)이라고 한다. Fi..

순서 1. 성능 최적화는 왜 필요할까? 2. 성능 최적화는 어떻게 이루어질까? 3. 서비스 성능분석 방법 4. 성능 최적화 기법들 5. 크롬 개발자 도구 1. 성능 최적화는 왜 필요할까? 먼저 성능 최적화가 필요한 가장큰 이유는 성능이 저하되면 사용자가 떠나고 매출이 감소한다. 반대로 말하면 성능이 향상되면 사용자가 늘고 매출이 오른다. 구글이 딥 러닝 기술을 이용하여 페이지 로딩속도와 이탈률 및 전환율의 관계를 분석하였을때 다음과 같은 결과가 나왔다. 위의 결과만 보더래도 페이지 표시가 3초~10초 지연이 되면 32%~123%만큼 증가되어 이탈률을 갖게 된다는 것이다. 따라서 웹 성능을 최적화 하게되면 서비스 사용자에게 더 나은 사용자 경험(UX)를 제공하기 때문에 가입률과 전환율은 증가되고 이탈률을 ..

오늘은 Web APIs 관련해서 정리하고자한다. APIs 란? 우리가 늘상 API 라는 말을 많이 하고있지만 실질적으로 정확히 모르고 쓸때가 많다. 백엔드와 데이터를 통신할때도 API통신이라 하고 DOM을 컨트롤할때도 Browser API를 사용한다고 하는등 많은 곳에서 API라고 쓴다. 정의로는 Application Programming Interfaces(APIs)는 프로그래밍 언어에서 개발자가 복잡한 기능을 보다 쉽게 만들수 있도록 만들어진 구조이다. API는 복잡한 코드들을 제거하고 쉬운 구문으로 대체하여 사용할 수 있게 제공해주는 것이다. 정의로 말하면 솔직히 이해하기 쉽지 않다. 아래의 그림의 예시를 통해 좀더 쉽게 설명해보자. 우리가 실제로 집에서 전기를 사용한다고 했을때, 플러그 소캣에 꽂..

오늘은 프로젝트 아키텍쳐 관련하여 정리하고자한다. 순서 1. 모놀리식 아키텍처 2. 모놀리식 단점 3. 마이크로서비스 아키텍처 MSA 4. 멀티레포 장점 5. 멀티레포의 단점 6. 모노레포 모놀리식 아키텍처, Monolithic Architecture 모놀리식 아키텍처는 전통적인 소프트웨어 프로그램 모델이다. 위의 사진처럼 하나의 서비스를 위해 모든 코드와 프론트/백엔드, 로직 등 한곳에서 관리하고 빌드/배포 운영 하는 것이다. 보통 프로젝트 초기에는 코드 관리, 인지 오버헤드 및 배포의 용이성 면에서 모든 것을 한꺼번에 릴리스할 수 있기 때문에 처음 시작하는 작은 스타트업같은 경우나 소규모의 프로젝트는 흔히 모놀리식 아키텍처로 많이 진행한다고 하고 지금도 많이 쓴다. 모놀리식 단점 하지만 한곳에서 관리..

브라우저에서 해당 URL을 입력후 브라우저 렌더링 과정에 대해서 어떻게 일어나는지 정리해보자. TL;DR 렌더링 과정 1. 브라우저 주소창에 특정 주소를 입력 2. 해당 주소의 서버를 찾고 만약 캐시가 있는지 먼저 체크, 그리고 DNS(Domain Name System)가 실제 서버로 연결하고 http, https에 따라 통신한다. 3. 별도의 path없이 기본 url 요청 '/'로 보낼시 루트 설정은 기본 설정의 index.html을 요청하게되고 서버에서 루트폴더에 있는 index.html을 클라이언트쪽(브라우저)으로 보내준다. 4. 해당 index.html을 받은 브라우저에서 텍스트로 이루어진 파일을 파싱(parsing)하면서 DOM 트리 생성 5. html을 읽다 중간 link tag에서 CSS요청..