반응형

javascript 8

[javascript] TTS(text-to-speech)적용방법 플러그인, 라이브러리(필요X)

국비교육에서 다른 팀원이 한 프로젝트를 보게 됐는데 TTS를 적용한 요리 레시피 사이트를 만든 걸 감명 깊게 봐서 꼭 나도 해봐야지 했던 게 있다. 마침 시간이 나던 차 기존 작업하던 개인 프로젝트에 적용해 보려 한다. 이제는 코드를 짜야하는데 https://sub0709.tistory.com/86 [javascript] 플러그인 없는 Text-To-Speech 만들기 관련지식 javascript, TTS, speechSynthesis, SpeechSynthesisUtterance TTS 라는 기술이 있습니다. 프로그램이 텍스트를 읽어주는 것으로, 과거에는 운전중인 사람을 위해 책을 읽어주거나 시각장애인을 위해 웹. sub0709.tistory.com 이 블로그에서 tts란 무엇인지 예제 또한 훌륭한 것..

javascript 2021.07.24

[javascript] SQL 계층형 쿼리를 JSONTree로 만들기

ORDER SIBLINGS BY : 특정 컬럼에 대한 Order by를 실행(조회된 데이터에 대해) CONNECT BY : 상위 코드와 하위 코드를 이용하여 Tree 형태로 보여줄수 있는 것 SELECT department_id AS ID, department_name AS TEXT, parent_id AS PARENT_ID, LEVEL AS LVL FROM departments START WITH parent_id IS NULL CONNECT BY PRIOR department_id = parent_id ORDER SIBLINGS BY department_name 출처 : thebook.io/006696/part01/ch07/01/03/ 위와같은 형식으로 쿼리결과를 만들어 json List형태로 vie..

javascript 2020.09.17

[javascript] Study Timer 만들기

만든 이유 및 소감 개인적으로 공부할때는 타이머를 켜놓고 공부를 하는데(공부 다 해놓고 타이머에 기록된 공부 시간을 보면 좀 뿌듯하다.) 전에 HTML, CSS를 공부할때 마침 타이머가 없기도 했고, 만들어 놓으면 닳는 것도 아니고 영원히 내가 원하는 기능을 가진 타이머를 소지 하고 있으니까, 또 하고 있는 공부에도 되고 겸사겸사로 만들게 되었다. 만들고 보니 이걸로 또 어떤 기능을 추가해서 더 발전된걸 만들 수 있을까? 라는 생각도 든다. 기능 1. 현재시간 2. 시간 측정 3. 일시정지 시간 기록 4. 시간 리셋 결과물 Study Timer.html 00:00:00 시작 리셋 +@ date.getMonth() 의 반환값은 0 ~ 11 이기 때문에 +1을 해준다.

javascript 2020.07.19

[javascript] db에서 가져온값 <br/> 처리

문제 해결 과정 dhtmlx로 프로젝트 개발중 db에서 뽑아온 값에 html에서 엔터처리가 로 나오게 되어 문제가 생겼다. 문제를 발견하고 처음에는 back에서 처리해서 view로 보내줄려고 했지만 이상하게 sysout을 해보면 console창에는 br태그는 보이지 않고 엔터처리가 되어 나오고 front에서만 br태그가 나왔다. 그러므로 javascript로 front에서 작업을 하게 되었다. 결국은 아래와 같이 해결은 되었지만... 점심먹고 돌아와 인터넷 복붙으로 만들어 놓은 코드 복습해볼려고 다 지우고 result.v_desc만 뽑아보니 정상적으로 나온다...?? 정말 다른건 건들지도 않고 br태그가 나온 그 코드로 돌아가서 다시 한번 뽑아본 것 뿐인데?? 코딩에도 기도가 필요한 이유를 알 것만 같다..

javascript 2020.07.15

[javascript] javascript로 날짜형태 바꾸기 + Json 날짜형식 변경

프로젝트 진행 중 백에서 값을 받아와 프런트로 바로 넘겨줘야 하는 일이 생겼다. 코드를 잘못 짠 거 같지만 경험으로 삼고 이대로 가보자 문제는 AJAX를 사용해서 날짜 형태가 JSON으로 바껴서 "yyyy-MM-ddTHH:mm:ss.XXX+XXXX"형식으로 나온다. 앞선 형식을 "yyyy-MM-dd HH:mm:ss" 형태로 변경을 해야 한다. 문제가 되는곳 해결방안은 총 두개를 찾았다. 첫 번째 라이브러리를 사용하는것! https://momentjs.com/ Moment.js | Home Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format("MMM Do YY"); moment().f..

javascript 2019.12.03

[Spring boot] Modal 적용 3가지 방법

Modal적용 3가지 방법 필요한 상황에 따라 사용하시면 될 거 같습니다. bootstrap을 사용한다는 가정하에서의 2가지와 javascript만으로 만든 modal입니다. 우선은 bootstrap으로 만드는 간단한 방법입니다. 데이터를 넣지 않는 항상 똑같은 값을 가지고 있는 모달에서 사용하시면 됩니다. 1. 결과물 tables.jsp Ready to test x test Cancel jsp안 body 하단에 위치해줍시다. 주의 사항은 a 태그에 data-target과 Moa Modal에 id를 맞춰야 합니다. 간단하죠~ 두 번째입니다. 이번에는 jsp을 하나를 더 추가해줘서 내용만 따로 적는 방법입니다. 모달의 껍데기만 모달이 나올 본문에 위치하고 내용물만 따로 jsp로 만들어 다른곳에서 제어한다고..

spring boot 2019.12.03

[javascript] 클립보드(clipboard.js) 사용방법

Project 수행 중 버튼으로 clipboard를 이용해야 하는 상황이 왔다 현재상황 다음은 w3school 예제다 이 경우는 script에서 id로 값을 가져와 값을 선택해서 복사하는 형태다 하지만 내 경우는 버튼이 저렇게 많아서 id를 쓰지도 못하고 버튼마다 value값을 넣어줘서. select() 메소드를 사용하지도 못한다. .select()는 input 태그일 경우 w3school에서는 우리가 드래그 -> ctrl + s라는 과정을 javascript로 만든 것이다. 그래서 난 이 방법을 선택했다. https://twpower.github.io/81-use-clipboard.js-in-javascript [Javascript] clipboard.js를 이용해 웹에서 클립보드에 복사하기 Pract..

javascript 2019.12.02
반응형