WEB/일반13 [JS] 비디오에서 구간별 썸네일 추출하기 - 1편 안녕하세요. 오늘은 비디오에서 썸네일을 추출하는 방법에 대해서 알아보겠습니다. 간단해 보이지만 전혀 간단하지 않은 이슈였습니다. 1편은 추출하는 방법, 2편은 Safari에서 발생하는 썸네일 추출 불가 문제를 해결하는 방법에 대해서 알아볼 예정입니다. 참고로 Instagram, TikTok도 해결하지 못한 이슈였지만, 저는 해결했습니다. 으하하 Meta 비켜!! 구현 시나리오비디오 파일을 input으로 받는다 동적으로 생성한 video element에 비디오 파일을 넣는다video element의 currentTime을 통해서 원하는 위치로 이동한다.seeked 이벤트로 재생 위치 변경을 감지하고 해당 화면을 캔버스에 그린다캔버스에 그린 이미지를 Blob 객체로 저장 후 ObjectURL로 변경해서 i.. 2025. 2. 8. [JS] canvas를 이용해서 mp4 영상에서 배경 제거하기 (크로마키 기능) 안녕하세요. 오랜만에 글을 쓰는 것 같습니다. 오늘은 배경색이 있는 mp4 파일에서 배경을 제거하는 방법을 알아보겠습니다. PoC로 만들고 꽤 괜찮았지만, 여러 문제가 있어 결국 다른 방법을 택했습니다. 하지만 만들었던게 아까워서 글로 남깁니다. 기능을 개발하게 된 계기요약30MB apng 렌더링 -> 다운로드 속도가 너무 느림 -> 용량 압축을 위해 webp 사용 -> 사파리에서 영상이 끊기는 문제 -> mp4 시도 -> 배경색이 투명하게 되지 않는 문제 요즘은 회사에서 이벤트 페이지를 개발하고 있습니다. 이벤트 페이지의 특성상 최대한 가볍게 만들어서 빠르게 유저와 인터랙션 해야하는데요. 초기 로딩을 빠르게 하기 위해 react 같은 라이브러리 없이 vanilla js만을 이용해서 개발하고 있습니다. .. 2025. 1. 25. [WEB] URL 길이와 SEO의 상관관계 알아보기 안녕하세요. 오늘은 조금 글이 짧습니다. 네트워크 책을 읽다가 문득 생각이 난 내용이 있어 정리합니다. URL 길이는 짧을수록 좋을까요? 길면 어떤 단점이 있을까요? 검색해보니 URL 길이가 길수록 SEO에 좋지 않다는 글이 좀 있었습니다. SEO 관련 회사들인 경우도 있었습니다. 하지만 글에 레퍼런스 문서가 없어서 신뢰하기 어려웠습니다. URL이 길면 SEO에 나쁜가요? Google Senior Search Analyst 'John Mueller'가 답합니다. 'No' 영상은 Reference에 남깁니다. URL 길이가 길수록 검색 품질이 나빠진다거나 상위에 랭크되지 않는 문제는 발생하지 않습니다. URL은 그냥 어떤 자원인지 식별하는 용도의 '식별자' (identifier)로만 사용합니다. 짧은 UR.. 2023. 10. 31. [Web] 정규표현식을 이용해 태그 변경하기, 문자열 중간에 태그 넣기 살다가 한번쯤은 만나게 될 정규표현식을 아름답게 사용하는 방법에 대해서 알아보겠습니다. 문자열 중간에 표시들을 태그로 치환하는 경우 Hello **** *good* ** *hello* =====> 변환 Hello **** good ** hello *를 통해서 문자열들을 강조 하고 싶을때 사용하는 방법입니다. 약간의 예외를 주기 위해서 *문자열* 의 케이스라고 생각해봅니다. const example = 'Hello **** *good* ** *hello*' const result = example.replace(/\*([\w]+)\*/g,`$1`) console.log(result) // Hello **** good ** hello ([\w]+) : 0-9, a-z, A-Z, '_' 를 포함한 문자가 적어.. 2023. 5. 20. [WEB] 테스트 코드 라이브러리 Jest 사용해보기 - 1 FE에서 테스트는 참 말이 많은 주제인것 같습니다. E2E, Unit Test를 도입해서 view, logic 을 모두 테스트하고, 커버리지도 100% 달성하겠다! 이런 것은 쉽지 않습니다. Input과 Output이 명확한 데이터를 다루는 영역에서는 테스트를 작성할때 이슈가 많이 없지만, FE는 DOM을 실시간으로 바꾸고 그 화면들을 테스트 하는것은 쉽지 않습니다. 또한 들어가는 노력에 비해서 return이 그렇게 크다고 생각하지 않습니다. 테스트를 도입해서 생기는 코드의 견고함과 안정성은 동의하지만, 화면같은 경우 자주 설계같은것이 바뀌게 되는데 그럴때마다 새롭게 TC를 정의하고 확인하는것이 시간 대비 효율이 맞나 싶은 생각이 있습니다. 하지만 util함수에는 BE처럼 똑같이 테스트를 할 수 있겠다고.. 2023. 5. 15. [Typescript] Axios API 함수 리턴하기, 결과값 리턴 차이를 타입의 측면에서 바라보기 Axios를 사용하다보면 API를 호출하는 함수를 통째로 리턴할지, 그 결과값을 리턴할지 고민을 모두 하셨을거라 생각합니다. 개인 프로젝트 진행 중 고민이 됐었는데요. 사람마다 다르지만 결과값을 리턴하는 케이스가 많더라구요. 왜 함수를 통째로 리턴하는건 선호되지 않을까요? 두개의 차이는 무엇이고 어떤것을 쓰는것이 나은지 알아보겠습니다. (그런 글이 없는것 같아서..ㅎ) TS를 사용하고 있었기에 차이가 체감 되었습니다. export default { // Axios API 함수 리턴 fetchLectureList : () => { return axiosInstance.get(url) } // Axios API 요청의 결과값 리턴 fetchLectureList : () => { return axiosIn.. 2022. 12. 12. [JS] 널 병합과 연산자 우선순위 이번에는 자칫하면 프로그램에 오류를 낼 수 있는 사소하지만 중요한 것에 대해서 말하고자 합니다. 널 병합과, 우선순위 연산자가 뭔 연관이지? 라고 생각하실 수 있습니다. 하지만 분기문에서 결과가 뒤바뀌는 결과를 낳을 수 있는 예시를 보여드리고자 합니다. 널 병합 연산자 (nullish coalescing operator) statement의 결과값이 null이나 undefined일 경우에, 뒤에 나온 값을 반환해주는 연산자입니다. ES2020에서 나왔습니다. falsy 값을 판단해서 오른쪽 피연산자를 반환하는 '||'와 구분해서 써야합니다. const arr = []; if( arr.length ?? 0 === 0 ) { console.log("참"); }else { console.log("거짓".. 2022. 10. 2. [TS] Enum vs Object 회사의 소스코드를 보던 중에 문득 들었던 궁금증에 대해서 해결해보고자 합니다. Enum과 Object의 차이를 알아보고, 어떤것을 사용하는것이 좋은지 결론을 내보겠습니다. 네이버 블로그식 질질끌기 포스팅을 제일 싫어해서.. 빠르게 써보겠습니다. 결론부터 내면 object가 as const로 type assertion을 해서 충분히 사용 가능하면 enum은 필요없다 입니다. Enum TS에서 자체적으로 구현한 열거형으로 C의 enum과 유사합니다. '자체적' 이라는 말에서 알 수 있듯, js에는 존재하지 않습니다. Enum은 어떻게 트랜스파일 될까? IIFE(즉시실행함수표현) 의 형태로 변환됩니다. js의 object는 멀쩡하게 나오는것을 볼 수 있습니다. Enum이 Object보다 나은 장점 .. 2022. 9. 11. Chrome Performance Flame chart 색이 투명한경우 (Main탭) 오랜만입니다!! 성능 확인을 위해서 Performance를 뒤적거리던 중... 집 컴퓨터에서 Performance 탭에서 Script 실행시간을 보려고 하는데.. 글쎄 투명으로 나오는게 아닙니까.. 아니.. 뭘 보라는겁니까.. 그래서 시크릿 모드에서 확인해봤는데.. flame chart가 잘 나오는 것이었습니다.. 별것도 아닌데.. 오류를 찾는데 꽤 오랜시간이 걸렸습니다. 침착하게 옵션들을 비교했어야 하는데.. 해결법부터 알려드리겠습니다. chrome setting에서 저 WEBGL-based flamechart를 꺼야합니다.. 끄시고나서, 다시 크롬을 재 실행후 측정을 해보면 아래와 같이 다시 잘 나오는것을 확인할 수 있습니다. 온갖 검색어로 검색을 했지만.. 나오지 않아서... *어떻게 문제를 해결했.. 2022. 3. 1. [WEB] REST, RESTful, RESTful API [미리 스포] 코세라 완강 했습니다 ^^ 경축 !!!!! 레퍼런스는 2개를 참고했고, 맨 아래 쓰도록 하겠습니다. REST ? Representational State Transfer 그.. 요즘 공고를 보면 RESTful API 사용 가능자, 설계 가능자( 경력직) 에 이런게 보이는데.. 진정한 의미의 RESTful API를 설계하는것은 사실상 거의 불가능하다고 생각됩니다. ( 유튜브 REST 이대로 어쩌고~) 그걸 보고나서 생각이 들었습니다. HATEOS, self-descriptive한 RESTful API 를 설계하는 사람이 진짜 있을까요? media-type 같은것은 IANA에 다 정의를 해야한다고 하는데.. 마이크로소프트도 REST아닌데 RESTful이라고 한다고 합니다. (반박은 빌게이츠.. 2021. 8. 12. 이전 1 2 다음 728x90
