본문 바로가기

분류 전체보기18

[Livewire] 라이브와이어 Livewire란? javascript를 사용하지 않고 라라벨과 블레이드만으로도 동적페이지 생성이 가능한 도구이다. 복잡해진 javascript 사용을 대신하기위해 만들어졌다. Livewire동작원리 공식사이트에 올라온 동작원리 설명 Livewire는 페이지와 함께 초기 구성 요소 출력을 렌더링합니다 (예 : Blade include). 이렇게하면 SEO 친화적입니다. 상호 작용이 발생하면 Livewire는 업데이트 된 데이터로 서버에 AJAX 요청을 보냅니다. 서버는 구성 요소를 다시 렌더링하고 새 HTML로 응답합니다. 그런 다음 Livewire는 변경된 사항에 따라 DOM을 지능적으로 변경합니다. Livewire설치하기 1. 라라벨 프로젝트 설치 홈스테드에 livewire를 테스트할 프로젝트(blo.. 2020. 11. 3.
[jQuery + HTML + CSS] 오디오 플레이어 만들기 - 2 * 목차 * 1. youtube 링크 삽입 화면 2. 음원파일 삽입 화면 3. Youtube API 4. 오디오 플레이어 관련 js 함수 먼저 관리자 등록화면에 대해 설명하도록 하겠다. 관리자 화면에서는 음원과 유튜브 링크를 등록할 수 있다. 오디오 플레이어에 마우스 오버하면 생기는 툴박스에 등록 버튼이 생기도록 하였다. 재생이 시작되면 반복 재생되도록 설정 해놓았다. 1. youtube 링크 삽입 링크삽입 버튼을 클릭하면 youtube url을 삽입하는 팝업이 뜬다. youtube 영상의 주소창에 있는 url 또는 공유 url 삽입이 가능하다. 적용하기 버튼을 클릭하면 팝업창이 닫히고 오디오 플레이어에 동영상 제목이 삽입되고 재생시간이 표기된다. 볼륨은 70으로 셋팅. 재생버튼을 클릭하면 재생시간이 시.. 2020. 8. 12.
[jQuery + HTML + CSS] 오디오 플레이어 만들기 - 1. 회사에서 진행중인 프로젝트에 배경음 삽입기능이 추가되었다. 음원파일 업로드 또는 youtube url등록이 다 가능해야 하는기능. audio 태그와 YouTube API를 같이 사용하기 위한 플레이어를 만들기로 한다. 1. HTML과 CSS로 오디오 플레이어 형태 만들기 2. 각각의 버튼을 만들어 파일 업로드 및 url등록이 가능하게 만들기 3. 음원 업로드시 audio태그를 생성 4. youtube url등록시 API이용하여 iframe생성 작업단계의 큰 틀만 보자면 저렇게 4단계이다. 그래서 만들어진 오디오 플레이어는 아래와 같다. 기본적으로 표기되는 배경음의 속성은 - 재생상태 - 제목 - 재생시간 - 볼륨 이며 새로 링크를 삽입하거나 음원을 업로드하면 플레이어를 아래처럼 초기화 시켰다가 플레이어를.. 2020. 8. 4.
[jQuery + HTML + CSS] 오디오 플레이어 만들기 - 0. 1. HTML로 오디오 태그 만들기 2. 음원 파일 업로드 : input file로 파일 선택 - 확장자 필터링 : form 전송으로 파일 업로드 : 업로드 후 오디오 태그 삽입하여 재생 3. Youtube API로 동영상 적용하기 : 유튜브 URL 입력 - 공유 URL 또는 주소창 URL : URL에서 영상 ID 추출 - 정규식 : API사용하여 iframe적용하여 재생 4. 공통 적용 사항 : 제목 출력 : 음악 재생시 재생시간 초기화 (재생초, 종료시간) : 음악 재생시 소리 70으로 초기화 : 볼륨조절 (음소거) : 재생, 일시정지 2020. 7. 27.