Front End Develop Front End Develop

ffmpeg 프로그램을 다운받고 영상을 hls 전용 스트리밍 영상 파일로 변환 및 ts (각각의 세그먼트 파일) 들을 추출 한 뒤에 웹에 적용해볼 수 있습니다. ie 11 이상으로 지원하고, 각각 영상 조각 파일들은 다양한 옵션에 의해서 다양하게 유저에게 제공할 수 있습니다. 기본적인 CLI 사용법은 다음과 같습니다. - ffmpeg -i hasashin.mp4 -b:v 1M -g 60 -hls_time 2 -hls_list_size 0 -hls_segment_size 500000 output.m3u8 각각의 옵션에 대해서 알아봅시다. hls_init_time seconds (중요) 초기 대상 세그먼트 길이를 초 단위로 설정합니다. 기본값은 0입니다. 첫 번째 m3u8 목록에서 이 시간이 지나면 다음 키..

CSS 프레임워크 중 가장 인기있는 Bootstrap과 마찬가지로 가장 인기있는 css 종류를 알아봅시다. 이러한 프레임 워크는 그리드, 대화형 UI 패턴, 웹 타이포그래피, 툴팁, 버튼, 양식 요소, 아이콘을 포함하는 기본 구조를 제공합니다. 즉시 사용 가능한 솔루션을 사용할 수 있으며 이는 웹 사이트를 빠르게 구축하는 데 도움이됩니다. 모든 것을 처음부터 시작할 필요가 없으며 프로젝트에서 코드를 재사용 할 수 있습니다. 이제 어떤 프레임 워크가 가장 적합한지에 대한 질문이 있습니다. 프런트엔드 개발을 처음 사용하는 경우 프레임 워크를 선택하는 것이 약간 까다로울 수 있습니다. 솔직히 말해서 모든 CSS 프레임 워크에는 장단점이 있으므로 특정 요구 사항에 따라 다릅니다. 이 기사에서는 업계의 대부분의 ..

수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요. 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다. // participant.length -1; // character number is between 1 ..

프론트엔드 면접 문제은행 제 2탄입니다. 선호하는 개발 환경에 대해 자유롭게 이야기해 주세요. 제가 선호하는 개발 환경은 javascript 환경을 선호합니다. 자유분방한 javascript를 컴파일해서 사용하는 타입스크립트도 좋아합니다. 자바스크립트의 자유분방에 절제미를 더할 수 있는 상황에는 타입스크립트로 충분하다고 생각합니다. DB는 설계를 자세히 해보진 않았지만 RDBMS 든 NOSQL이든 Select를 잘 해올 수 있으면 된다고 생각합니다. IDE는 자바 등 컴파일 언어에서는 인텔리제이를 선호하고, 나머지 국면에서는 VSCODE를 선호합니다. 그리고 SPA를 만들 수 있는 환경 PWA로 데스크탑 애플리케이션을 만들 수 있었으면 좋겠습니다. 버전 관리 시스템은 어떤 것들을 사용해보셨습니까? 현재 ..

일반적인 질문: 어제/이번 주에 무엇을 공부하셨나요? 어제는 자바스크립트로 slide를 순수하게 만드는 작업을 코드펜에서 시도해보았고, 이번 주에는 전체적으로 flutter 앱을 만들기 위해 flutter 생존코딩이라는 책을 독파하며 튜토리얼을 한단계씩 끝내는 것에 주안점을 두었습니다. 코딩을 할 때 당신을 들뜨게 하거나 흥미를 끄는 것들은 무엇인가요? 저를 들뜨게 하는 것은 개발자와 서비스 제공 운영자, 즉 시스템 플랫폼적 운영자들이 저를 통하여 조금 더 빠르고 편리하게 서비스를 제공할 수 있게 되어, 그로인해 발생하는 이익창출이 된다고 생각 될 때입니다. 최근에 당신이 경험한 기술적인 문제는 무엇이고 그것을 어떻게 해결했나요? 최근에 제가 경험한 기술적인 문제는, 순수 자바스크립트로 진행되어지지 않는..

웹 개발을 하면서 적정 수정 수준이란 것이 있습니다. 웹에서 사람들을 위해 일을 해결하는 일을 할 기회가 있습니다. 이러한 수정의 범위가 얼마나 다른지에 대해 매우 흥미롭습니다. 사용자를 위한 미디어쿼리들이 많이 제공되고 있습니다. 그 중 하나는 prefers-reduced-motion라는 미디어쿼리 속성일 것입니다. 이 미디어 쿼리는 웹에서 사람들의 경험을 개선하기 위해 독점적으로 사용됩니다. 모션 감소를 명시적으로 요청한 사용자의 모션을 감소시키는 코드를 작성할 수 있습니다. @media (prefers-reduced-motion: reduce), (update: slow) { *, ::before, ::after { animation-delay: -1ms !important; animation-du..

HTML markup this-file-has-a-really-really-really-long-filename. pdfCSS.filename { display: flex; min-width: 0;}.filename__base { text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}.filename__extension { flex-shrink: 0;} flex container의 기본 min-width는 auto 입니다. min-width가 auto일 때는 자식 요소들의 최소 너비를 보장하려고 합니다.이로 인해 텍스트가 긴 경우 text-overflow:ellipsis가 적용되지 않을 수 있는데요.이 때 min-width를 0..

CSS 속성중에 revert 속성이란 것이 있습니다. 부모 속성으로 돌아가거나 부모가 없을 때는 최초의 상태로 돌아가는 것입니다.