Algoroot's space

오랜만에 글을 쓴다. 항해 99 수료 후 살짝 풀어진 마음을 다잡고 취업준비, 면접 준비를 하며 타입 스크립트 공부를 하고 있다. "개발자는 평생 HTTP 기반 위에서 개발한다. " 웹 프런트엔드 개발자를 잘하고 싶어 하면서 내가 처음 공부한 방식은 개발 언어였다. 항해 99를 통해 백엔드와 협업을 하면서 웹 네트워크 지식이 많이 부족하다고 생각되었다. 수료 후 면접 준비를 하면서 많이 나온다는 네트워크 질문 모음들에 대해 공부는 했지만, 깊게 들어가면 한 없이 깊은 부분인 것 같아 실제 면접 시 질문이 들어오면 어디까지 대답해야 할지도 감이 안 왔다. 또 구글링을 하다 보면 여러 정보가 중구난방으로 혹은 똑같은 내용만 담겨있는 경우도 있어서 혹시 모를 잘못된 지식을 습득하는 것을 방지하기 위해 저렴하면..

지난 포스팅 : [WillBe 화상 면접 커뮤니티] React Player를 통한 custom player만들기 (1) 재생, 멈춤 3초 후, 3초전 소리 조절 + 음소거 배속 (0.5배속, 1배속, 1.5배속, 2배속) 전체화면 (fullscreen) 오늘 다룰 내용 6. 재생시간 툴팁으로 표시 7-1. 좋아요, 스크랩 동영상 내에서 처리 7-2. 하이라이트 Top 3 시간 누르면 해당 시간으로 이동 + TroubleShooting 6. 재생시간 툴팁으로 표시 이미지와 같이 재생바와 표시되는 시간 툴팁을 구현하는 부분이다. 필요한 메소드는 재생 컨트롤러를 인식하는 seekTo(), 현재시간을 초로 반환하는 getCurrnetTime(), 총 시간을 반환하는 getDuration() 로 이 세가지가 필요..

프론트엔드 팀원 분과 지난 3주간에 걸쳐 협업을 잘 해왔는데 프로젝트가 완성이 되어 가면서 dev에 있는 프로젝트를 main에 merge시키려는 과정에서 아래와 같은 문구가 떴다. 우선 로컬 main에 dev를 merge시키려는 과정에서 발생한 오류인데 왜 연관이 없다고 하는지 몰라 구글링을 했다. 찾아보니 원인은 두 가지라고 한다. 1. 서로 관련 기록이 없는 이질적인 두 프로젝트를 병합할 경우 2. 로컬 저장소와 원격지의 저장소의 기록(History)을 비교했을 때 소스코드의 차이가 심한 저장소의 경우 내 경우는 1번에 해당했던 것 같다. 더 찾아보니 로컬에 있던 프로젝트와 깃 저장소에 있던 프로젝트를 깃에서는 서로 다른 프로젝트라고 인식하고 있어서 생길 수 도 있다고 한다. 로컬 main브랜치에서 ..

이번에는 유저들의 면접 영상을 재생할 때 구현했던 플레이어 제작 과정을 소개하고자 한다. 플레이어를 제작하기 위한 사용한 라이브러리는 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 :..