개발기록/Web
-
canvas로 호(ar)를 그려보기개발기록/Web 2020. 5. 31. 17:38
3D 뷰어를 스크립트로 만들고 있는중에 preLoader를 커스텀 해야하는 상황이 왔다. 예를 들면, bar 막대 형식의 기본 로더를 원 circle 형태로 커스텀 하는것이다. 커스텀을 위해 알아보던중, canvas를 사용해서 로더를 만들어 보기로 했다. 만들면서 쓰게 된 canvas에 대해 정리해본다. (Reference를 참고하여 작성한 글입니다. 잘못된 사항이 있다면 댓글 부탁드립니다. ) 참조 MDN https://developer.mozilla.org/ko/docs/Web/HTML/Canvas/Tutorial/Drawing_shapes canvas는 HTML5의 엘리먼트중 하나로 Javascript를 함께 사용하여 브라우저에 그림판처럼 그림을 그릴 수 있는 api를 제공한다. 애니메이션, 게임 ..
-
ClassNotFoundException: ConcurrentReferenceHashMap 에러!개발기록/Web 2019. 3. 22. 15:06
나의 개발 환경 간단하게1. STS, Maven, Mybatis, Mysql(aws) 데이터를 insert하는 과정에서 에러가 발생했다. ClassNotFoundException: ConcurrentReferenceHashMap..빨간 에러를 검색해 봐도 특별히 잘 모르겠을때, insert에서 나는것 같으니 쿼리를 다시 돌아볼까 하는 마음에 쿼리문을 돌려보니 알게된 것은 테이블을 생성할 때, 필드의 속성이 not null 속성인데, 값이 insert 될때 not null 값이 없을 때 뱉어내는 에러인 것 같았다.해당 필드가 not null 일 필요도 없고, null 값으로 바꿔주니 지나간 에러 인 것. 저 에러는 처음이라, 혹시 몰라 포스팅 해 본다.이런 실수는 또 하지 말것.
-
자바스크립트 객체 _1_(feat.자바스크립트를 깨우치다)개발기록/Web 2019. 3. 16. 16:00
자바스크립트 객체에 대한 개념이 부실해서 책을 보는중, 정리하면 좋겠다 싶어서 기본부터 정리해본다. 자바스크립트 객체 만들기 자바스크립트에서는 객체가 왕이라고 한다. 거의 모든 것들이 객체이거나 객체처럼 동작하기 때문. 객체는 속성들의 그릇일 뿐이며 속성은 이름과 값을 가진다는 사실을 기억해야 한다. 이름있는 값을 가진 속성들의 그릇이라는 개념은 자바스크립트에서 여러값을 표현하기 위해 묶음을 만들 때 사용한다. //kkul(꿀) 객체 만들기.. var kkul = new Object(); //kkul(꿀) 객체를 속성으로 채우기 (점 표기법으로 사용) kkul.living = true; kkul.age = 2; kkul.gender = 'boy'; console.log(kkul); // 객체를 로그에 출..
-
spring - 아리랑(arirang) 형태소 분석기 web에 적용하기개발기록/Web 2018. 4. 27. 09:52
Chatbot web페이지에 형태소 분석기를 붙여보았다. 아직 부족해서 많이 삽질도 많이 했다. 잊어버리기 전에 정리 해둬야지.한글 형태소 분석기 종류는 몇개 있는것 같다. 나는 다른 종류는 알아보지 않았고, 루씬 형태소 분석기를 사용하기로 했다. 루씬 형태소 분석기가 아리랑 형태소 분석기라고도 불린다.https://www.elastic.co/kr/blog/arirang-analyzer-with-elasticsearch아리랑 형태소 분석기는 elasticsearch에서 같이 사용되거나, solr 통해서 많이 사용하는것 같다. 자세한 정보는 더 찾아봐야 할것같다.나는 chatscript를 사용한 chatbot spring web에서 사용. 먼저, https://github.com/korlucene 여기서 ..
-
Bootstrap pagination 자바스크립트로 구현하기개발기록/Web 2018. 4. 19. 16:55
Chatscript 챗봇 구축을 해보는 중에, 모든 대화가 log.txt로 남겨지는걸 확인했다. 로그데이터로 대화의 패턴이라던지, 사용자 정보를 뽑을 수 있겠단 생각과, 더욱이 관리자 페이지를 시범삼아 대충 한번 만들어 보자 라는 생각에 먼저 로그데이터 리스트를 만드는중 닥친 페이지네이션. 흔히 게시판 구축에 필수 조건인데, 유독 나는 페이지네이션이 어려웠다. 그래서 대충 남의 소스가져다가 사용해버리곤 했는데, 요번에는 그럴수 없다는 생각에 열심히 검색하고 알아보던중, 도움이 많이 된 사이트를 링크해둔다. https://okky.kr/article/282819 더욱이 서버에서 페이지네이션을 처리하는게 아니라, 나는 front에서 구현하고 싶어서 자바스크립트로 검색해보는중, 부트스트랩 css에 자바스크립트..
-
Javascript PDF다운로드개발기록/Web 2017. 10. 29. 20:32
jsp 페이지에서 PDF다운로드 기능을 구현한다. 보통 pdf 다운로드의 경우, front단에서 구현한다고 한다. 나는 서버단에서 구현해줘야 하나 싶었다. pdf 다운로드는 PDF.js를 사용, https://mozilla.github.io/pdf.js/ 여기서 사용법을 확인하면 좋을것 같다. 다운로드를 받고, 두개의 스크립트 파일을 추가해준다. 사실 jspdf.min.js만 추가해줘도 충분히 사용할 수 있으나.. 한글지원이 안되므로 한글을 다 깨뜨리더라. 깃허브 가니까 사용자들이 utf-8을 지원할 생각이 없냐는 질문에 그럴 생각 없다는 답변을 보고 나서 검색했다ㅠ_ㅠ var doc = new jsPDF(); var pdfHandlers = { '#editor' : function (element, r..
-
파일업로드 디자인개발기록/Web 2017. 7. 12. 16:55
간단한 게시판 기능중에 파일업로드 기능이 결합된 글쓰기 페이지 구현중에 먼저 view 페이지 작업을 시작 input type file은 디자인이 너무 안이쁘다 예를 들면 이렇게 이미지의 html 코드는 대충 이렇다. 코북에 맞는 디자인으로 커스텀 해본다 ● 부트스트랩으로 뷰를 작업하고 있기 때문에 파일선택은 부트스트랩 버튼과 같은 느낌으로 ● 선택된 파일명은 form에 들어오고 ● 이미지 파일이 들어올 지정된 영역안으로 선택된 파일이미지가 들어온다 HTML 파일등록하기 파일선택인 부분은 파일을 선택했을 때 파일명이 들어오는 부분이기에 disabled로 막아둔다. CSS /*라벨은 원하는대로 커스텀하고*/.fileRegiBtn label {display: inline-block; padding: .5em ..