Frontend(19)
-
Vuetify V-dialog 위에서 CKEditor link 버그 해결
Vuetify V-dialog 위에서 CKEditor5를 사용하고 있다. 다른 기능들은 정상작동 하는데 link 기능은 focusout 되고 dialog 위로 자동 스크롤 되는 현상이 발생했다. Vuetify 와의 충돌 때문인 것 같았는데 역시나... 아래와 같이 선언해주면 문제가 해결된다. (출처) Vuetify가 편리하긴 한데, 여러모로 오히려 더 복잡해져서ㅜ 다음부턴 사용 안 할 것 같다... 참고로 Vue2 기반으로 작성된 코드 입니다.
2021.02.16 -
[Vuetify] UI Component 사용 Tip
추후 쉽게 적용할 수 있도록 Codepen에서 실습했던 내용을 작성함 Expansion panels 1. 특정 판넬을 계속 펼쳐놓고 싶은 경우(클릭해도 닫히지 않도록) - v-model에 펼쳐놓고자 하는 판넬 인덱싱 추가 - 펼쳐놓고자 하는 판넬에 readonly="true" 속성 추가 (테스트 결과 readonly모드여도 내부 컨텐츠의 input 수정 등은 가능함)
2020.11.25 -
[Javascript/Geolocation] Web 실시간으로 수집한 위치 정보로 나침반 구현하기
해당 포스트는 https://courses.wesbos.com/account/access/5d760ba285f96c03c1e5725d/view/194128542 를 기반으로 작성되었습니다. 이번 예제는 Geolocation인터페이스를 사용해 웹에서 실시간 위치 정보 수집하기 입니다. Geolocation.watchPosition() 사용하기 Geolocation.watchPosition()? 장치의 위치가 바뀔 때마다 자동으로 호출할 처리기 함수를 등록할 때 사용합니다. 선택적으로 오류 발생 시 사용할 콜백 함수도 지정할 수 있습니다. 매개변수 success : GeolocationPosition 객체를 입력 매개변수로 사용하는 콜백 함수 error(option) : GeolocationPositionE..
2020.05.05 -
[SpeechRecognition] Web/Chrome 음성 인식
해당 포스트는 https://courses.wesbos.com/account/access/5d760ba285f96c03c1e5725d/view/194128542 를 기반으로 작성되었습니다. 이번 예제는 웹에서 음성 인식 추출 API( Web Speech API ) 사용하기 입니다. 기본으로 제공해주고 있어 별도의 작업 없이 사용할 수 있습니다만, 아쉽게도 Chrome에서만 제공되는 걸로 알고 있습니다. 만들어볼 예제 설명 이러한 웹 사이트를 만드는 예제입니다. 필요 기능을 분석해보자면, 사이트에 접속하는 순간 부터 음성 인식은 시작되어야 하며, 흐름이 끊기는 순간 문단이 바뀝니다. 실시간으로 음성 인식 텍스트 결과 값이 그대로 표시됩니다. 예제 시작 코드 Wesbos님께서 시작 코드를 제공해주시고 계십니..
2020.03.22 -
[JavaScript] 1. 기본/역사/변수/주석/비교/조건문
해당 포스트는 생활코딩을 참고하여 작성되었습니다. 언어 소개 JavaScript 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어 자바스크립트는 배우기 쉬운 언어다. 웹브라우저에서 유일하게 사용할 수 있는 프로그래밍 언어 웹의 중요성 확대 역사 네스케이프에서 HTML의 정적 문제를 해결하기 위해 만듦 마이크로소프트의 인터넷 익스플로러에 jscript라는 이름으로 탑재 ECMA라는 표준화 기구로 이 언어의 관리 주체가 옮겨짐 ECMAScript 표준화 기구인 Ecma International에 의해서 관리되는 자바스크립트 표준안 현재는 ECMAScript 5(ES6)가 표준으로 정의됨 JavaScript 학습에 요구되는 선행학습 HTML 웹페이지를 만드는 언어로 자바스크립트가 제어하는 직접..
2020.03.15 -
[JavaScript][날짜] Date 활용해서 요일 구하기
Date생성자는 시간의 특정 지점을 나타내는 Date 객체를 생성합니다. Date객체는 1970년 1월 1일 UTC(국제표준시) 00:00으로부터 지난 시간을 밀리초로 나타내는 유닉스 타임스탬프를 사용합니다. 날짜 구하기 현재 날짜 구하기 let now = new Date.now(); 특정 날짜 구하기 3번째 방법을 사용할 때 주의사항이 있다! ✔️2000년도 이후는 천의 자리로 입력한다. 십의 자리를 입력할 경우 자동으로 1900년도를 지정해준다. ✔️월은 0부터 시작한다. 즉, 1월을 입력하고 싶은 경우 0을 입력한다. let date1 = new Date('December 17, 1995 03:24:00'); let date2 = new Date('1995-12-17T03:24:00'); let d..
2020.03.08