이번에는 유저들의 면접 영상을 재생할 때 구현했던 플레이어 제작 과정을 소개하고자 한다. 플레이어를 제작하기 위한 사용한 라이브러리는 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..
지난 포스팅에서 프로젝트 주제와 기술 챌린지에 대한 간략한 내용을 담았다. 지난 포스팅을 토대로 오늘은 영상을 다루는 프로젝트를 시작하면서 처음 진행한 리서치에 대해 써보도록 하겠다. 오늘 다룰 내용은 크게 세 가지이다. 1. HTML5 video 2. WebRTC API, Library찾기 3. 모든 브라우저에 호환 가능한 코덱 찾기 웹캠, HTML5의 getUserMedia()의 역사 영상 쪽은 처음 공부하는 거라 몰랐던 부분이었는데 사실 영상을 촬영하는 것은 html5를 사용하는 것만으로도 가능하다는 것을 알았다. html5rocks.com에서 소개하는 튜토리얼을 통해 어떻게 우리가 영상을 브라우저에서 간단히 다룰 수 있게 되었는지의 역사를 알 수 있게 되었다. 오래된 포스팅이지만, 역사는 변하지 ..
프로젝트 주제 우리의 프로젝트 주제는 화상 면접 연습 커뮤니티 사이트이다. 여러 아이디어가 나왔지만 이 주제가 더더욱 와닿았던 것은 내가 직접 경험해 봤기 때문이다. 나의 경우에는 대학 졸업 후 바로 호주에서 회사생활을 2년 동안 하다가 왔다. 2년 전 구직활동을 하던 당시 대부분의 회사의 지원 조건에는 워킹홀리데이 비자는 해당되지 않은 곳 수두룩했다. 그렇게 지원조건이 안됨에도 포트폴리오와 커버레터를 정성스레 적어 보내고는 했다. 그러다가 한 회사에서 면접 제안이 왔고, 나는 단 한 번뿐인 그 기회를 꼭 잡아야겠다고 생각했다. 타지에서 모든 것을 혼자 준비했었기에 아무도 봐줄 사람이 없었고, 그때 내가 택한 방법은 나의 면접 모습을 녹화하는 것이었다. 예상가는 면접질문을 미리 정리하고, 그 질문에 대해..
Magazine Site 📖 Firebase 로 CRUD를 구현하고 2차에서는 백엔드에서 만든 API 를 받아와 CRUD를 구현 하였습니다. 4.15-4.18 => Firebase CRUD 구현 : Magazine Site with Firebase > 4.19-4.25 => Backend API 연결 - AXIOS, REDUX TOOLKIT Introduction 🙌 firebase service를 통해 구현했던 매거진 사이트를 백엔드에서 받아온 API로 붙여보는 시간을 가졌습니다. 이번 시간에는 axios와 Redux toolkit을 공부하여 적용시켰습니다. SKill 🛠️ React, Redux Toolkit Promise based HTTP client : Axios Storage Service :..
나만의 개발용어 사전 만들기 📖 여기를 클릭해 살펴보세요. github link Introduction 🙌 모르거나 기억하고싶은 개발 용어를 기록하는 저만의 개발 용어 사전을 만들었습니다. SKill 🛠️ Vite React Redux database : Firebase Storage Service : AWS S3 bucket 구현 기능 💻 사전 만들기 CRUD 즐겨찾기, 즐겨찾기페이지 카드 색상 랜덤 배치 Figma Design 🖌 개발자 협업툴인 Figma로 디자인을 먼저 한 후 작업 하였습니다. What I've Learned 📖 Vite로 진행한 리액트 프로젝트 CRA 보다 Vite의 실행속도가 현저히 빠르다하여 강의는 CRA 기반 이었지만 Vite로 진행해보았습니다. 비교가 안되는 빠른 속도에 ..
지난 두 포스팅에 걸쳐 자바스크립트의 비동기 처리 방법 콜백과 프로미스에 대해 작성했다. 1_ [비동기 | 동기 ] 비동기 처리의 시작 - 콜백 지옥 체험 2_ [자바스크립트 비동기 처리 ] 프로미스(Promise) 개념과 활용 이번에는 좀 더 간편하고 깔끔한 코딩이 가능해지는 async, await에 대해 다뤄보겠다. 프로미스의 체이닝과 같은 콜백 패턴 또한 가독성이 그리 좋지 않다. async, await 은 프로미스의 체이닝 없이 프로미스를 좀 더 간결, 간편하게 동기적으로 실행되는 것처럼 보이게 만들어주는 API이다. 새로운 것이 추가된 것은 아니고 기존 존재하는 프로미스 위에 조금 더 간편한 API를 제공한 것으로 이를 문법적 설탕(syntactic sugar)이라고 한다. async 네트워..
지난 포스팅에서는 비동기 처리를 위한 콜백 지옥을 의도적으로 체험해보았다. [비동기 | 동기 ] 비동기 처리의 시작 - 콜백 지옥 체험 이번 포스팅에서는 이런 콜백지옥의 대안으로 ES6에서 나온 프로미스(Promise)에 대해 다뤄보는 시간을 가지겠다. 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 번거로워지며 여러 개의 비동기 처리를 한 번에 처리하는 데도 한계가 있다. 이의 대안으로 ES6에서는 비동기 처리를 위한 또 다른 패턴으로 프로미스(Promise) 를 도입했다. 프로미스는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이..
- Total
- Today
- Yesterday
- 알고리즘자바스크립트
- html
- React
- 타입스크립트
- github
- 무한스크롤
- 리액트네이티브
- 항해99
- 자바스크립트 비동기 처리
- 클로저
- css
- 프로그래머스
- 모두를위한컴퓨터과학
- network
- cs50
- 실전프로젝트
- 백준
- 네트워크
- javascript
- 자바스크립트
- 리액트
- 자바스크립트 클로저
- 모두를 위한 컴퓨터 과학
- 프로그래머스 베스트앨범 자바스크립트
- 자바스크립트알고리즘
- 파이썬알고리즘
- reactquery
- 프로그래머스 자바스크립트
- GIT
- python
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |