이번에는 유저들의 면접 영상을 재생할 때 구현했던 플레이어 제작 과정을 소개하고자 한다. 플레이어를 제작하기 위한 사용한 라이브러리는 React Player이다. 다양한 API를 제공하고, 많은 개발자가 사용하며 최근까지도 업데이트가 활발이 되고 있어 선택하게 되었다. 추가적으로 플레이어에서 재생바 역할을 하는 부분만 스타일 잡는데 줘야 할 값들이 너무 많아 시간이 오래 소요될 것을 우려하여 mui의 Slider를 가져와서 사용하였다. 플레이어에 있는 기능은 Youtube와 Vimeo에 있는 기능을 넣으려고 노력하였다. 구현한 기능은 아래와 같다. 1. 재생, 멈춤 2. 3초 앞, 3초전 3. 소리 조절 + 음소거 4. 배속 (0.5배속, 1배속, 1.5배속, 2배속) 5. 전체화면 6. 재생시간 툴팁으..
오늘은 프로젝트에서 면접 영상을 찍은 후 업로드하는 과정에서 클라이언트, 서버, S3가 어떻게 영상을 주고받았는지에 대해 써보도록 하겠다. Pre-signed URL 방식을 택한 이유 클라이언트에서 S3에 파일을 업로드 하는 방법으로는 크게 2가지가 있다. 1. AWS SDK를 이용해 직접 업로드 2. API 서버에 파일을 전달하고 API 서버에서 S3에 업로드 1 번의 방법은 서버를 거치지 않지만, AWS SDK를 써서 S3이용이 가능해야 하기 때문에 브라우저에서 AWS SDK를 사용하는 시점에는 결국 AWS Access Key와 Secret Key 정보를 알고 있어야 한다. 이는 Key 정보가 브라우저에서 노출될 수 있고 악성 해커가 이를 이용하면 S3 리소스를 탈취해 갈 수 있는 위험성이 있다. 2..
프로젝트 주제 우리의 프로젝트 주제는 화상 면접 연습 커뮤니티 사이트이다. 여러 아이디어가 나왔지만 이 주제가 더더욱 와닿았던 것은 내가 직접 경험해 봤기 때문이다. 나의 경우에는 대학 졸업 후 바로 호주에서 회사생활을 2년 동안 하다가 왔다. 2년 전 구직활동을 하던 당시 대부분의 회사의 지원 조건에는 워킹홀리데이 비자는 해당되지 않은 곳 수두룩했다. 그렇게 지원조건이 안됨에도 포트폴리오와 커버레터를 정성스레 적어 보내고는 했다. 그러다가 한 회사에서 면접 제안이 왔고, 나는 단 한 번뿐인 그 기회를 꼭 잡아야겠다고 생각했다. 타지에서 모든 것을 혼자 준비했었기에 아무도 봐줄 사람이 없었고, 그때 내가 택한 방법은 나의 면접 모습을 녹화하는 것이었다. 예상가는 면접질문을 미리 정리하고, 그 질문에 대해..
- Total
- Today
- Yesterday
- 자바스크립트 비동기 처리
- GIT
- 타입스크립트
- network
- 자바스크립트
- 백준
- reactquery
- 모두를 위한 컴퓨터 과학
- 리액트
- React
- html
- 네트워크
- 프로그래머스
- javascript
- python
- 리액트네이티브
- 자바스크립트 클로저
- 프로그래머스 자바스크립트
- 클로저
- 자바스크립트알고리즘
- 모두를위한컴퓨터과학
- React Query
- cs50
- 프로그래머스 베스트앨범 자바스크립트
- 알고리즘자바스크립트
- 항해99
- 무한스크롤
- github
- css
- 실전프로젝트
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |