changpd

챗봇은 크게 두가지가 있다. 인공지능을 쓰느냐 인공지능을 안 쓰느냐 인공지능을 쓰면 당연히 좋을텐데, 머신런닝도 할 줄모르는 상황에서는 그림의 떡이다. 그럼 포기해야되나 싶지만, 굳이 그러지 않아도 된다. 사용성 과연 챗봇을 가지고 무얼할지를 조금 더 고민해보자. faq정도 읊어주고, 간단하게 몇가지 동작만 해주는걸로 충분하다면 굳이 인공지능이 필요할까? 비용적인 부분에서도 별로 효율적이지 못하다. 그럼 어떻게? 어떻게 구현을 해야되나 머릿속으로 그려보면, if문 몇개 추가하면 되지 싶다. '이런질문이 들어오게 유도하고' '이런대답을 해주면 된다' 쉽게생각하면 한없이 쉽다. 그런데 구현 마저도 쉽게 할수 있는 서비스들이 너무 많다. QnAMaker, Botservice 연동 여기서는 이 MicroSoft에서 제공하는 두가지 서비스를 활용하는 방법이다. 너무 쉬워서 어의가 없을 수도 있다. 0. 마이크로소프트 계정생성  ms계정이 있어야한다. 뒤늦게 말에서 좀 그렇긴한데, 무료가 아니다. 그렇다고 엄청 비싸지도 않다. 1. 계정을 만들고 portal.azure.com  에 접속 2. BotService 생성  - 새로 만들기 -> Bot Service 선택 -> 만들기  - 대충 봇이름 정도만 입력하면 된다. 3. BotService설정  - 2번에서 만들고 나면 포탈홈에 서비스명이 노출된다. 클릭해서 들어오자  - 봇서비스도 나름 소스코드다 c#, node.js 중에 편한걸로 선택하고, Question and Answer 템플릿을 선택한다. (어기서는  c#선택, 본인은 c#을 한번도 해본적이 없다) 4.  id , password 생성  - next버튼을 클릭하면 요런 화면이 나오는데, 파란색 버튼을 클릭하면 아이디와 암호를 발급받을 수 있다. 암호는 한번밖에...

정의   데이터 시각화 (data visualization)는 데이터 분석 결과를 쉽게 이해할 수 있도록 시각적으로 표현하고 전달되는 과정 ( https://ko.wikipedia.org/wiki/%EB%8D%B0%EC%9D%B4%ED%84%B0_%EC%8B%9C%EA%B0%81%ED%99%94 ) 단계설명 정보  조직화 단계 사용자의 정보 인지에 관여 혼돈의 상태로 존재하는 데이터를 분류하고 배열하고 조직화하여 질서를 부여 정보  시각화 단계 사용자의 정보 지각에 관여 보다 효율적으로 정보 전달을 위해 시각, 청각, 촉각, 미각, 후각의 감각 기관에 최적의 자극을 제시하는 방법 제시 상호작용  단계 정보와 사용자 간의 상호작용 측면의 사용자 경험을 디자인 정보의 인지적 요인뿐만 아니라 지각적 요인을 함께 활용 정보 시각화 단계와 밀접하게 연동되면서 동시에 입력 기술의 특성도 함께 고려  관련자료 데이터시각화 업체  뉴스젤리 : 데이터 전략수립, 수집, 분석, 시각화 ( http://blog.newsjel.ly/%EB%89%B4%EC%8A%A4%EC%A0%A4%EB%A6%AC/ )     데이터시각화 툴  태블로 :  http://www.tableau.com/   차트관련 js 기본적으로 사용하는 차트는 line, pie, bar, area, radar, map 정도 라이브러리내에는 차트의 종류는 달라지더라도 색은 비슷  html5 canvas 기반이 많음. ie구버전이 호환안되는 경우가 있을 수 있음. 대부분 반응형 웹 지원 어떻게 혼합해서 사용할지 고민필요 d3.js  https://github.com/mbostock/d3/wiki/Gallery googlechart  https://developers.google.com/cha...

HTTP 메소드중에 가장 많이는 방식은 get과 post일듯 하다 이둘은 비교도 참 많이 당한다. 대강 살펴보면, get은 url이 보이고, post는 숨기는 방식 민간함데이터를 전달할 시에는 보안상 post방식이 좀더 현명한 선택인듯하다. 여기 까지가 깊게 생각안해봤던 내가 할 수 있는 대답.. ㅎ 그래서 오늘은 조금 더 살짝 들어가서 몇가지 더 차이점을 정리하려고 한다. 다행히  w3schools   정리가 되어있었다. 들여다보면 우선, get방식은 url에 파라미터가 보인다 . 이로인해 다음과 같은 결과가 초래할수 있다. 1. 브라우저캐싱 2. 즐겨찾기에추가 3. 브라우저히스토리에 저장 4. 글자길이제한(url 최대길이 2048 char) url로 전달하는것과 form을 만들어서 전달하는것 역시 차이 가있다. 1. post방식은 form을 binary 형태로 전달 한다. 2. url은 application/x-www-form-urlencoded 타입에 제한되지만 post는 파일전송을 위한 multipart/form-data 도 제공한다. 3. url은 ascii 방식, post는 바이너리 방식 4. post는 body태그안에 form을 만들어야 하므로 url을 직접던지는 방식보다 조금 느릴 수 있다. 결론적으로 암호와 같은 민감한 정보들은 되도록이면 post방식으로해야하고, 트래픽이 엄청많은 곳에서 단순정보조회같은것들은 get방식으로하면 되지싶다. Compare GET vs. POST The following table compares the two HTTP methods: GET and POST. GET POST BACK button/Reload Harmless Data will be re-submitted (the browser should alert the user that the data are about to be re-submi...

elasticsearch의 plugin은 설치가 쉽다. 명령어 하나면된다. /$ES_HOME/bin/ 디렉토리에 있는 plugin 명령어를 사용하면 지가 알아서 다운을 받아 설치를 한다. plugin --install < org > / < user/component > / < version > 보통 기본적으로 다들 설치하는 plugin들은 아래와 같다. /elastisearch/bin/plugin -install mobz/elasticsearch-head /elastisearch/bin/plugin -install lukas-vlcek/bigdesk /elastisearch/bin/plugin -install enezes/elasticsearch-kopf 위에것들이 제대로 설치되면 elasticsearch의 상태를 제공하는 front-page를 접속할 수 있다. http://{elasticsearch 설치주소}:9200/_plugin_head/ 그런데, 방화벽이 막혀있으면 plugin 명령어를 사용을 할 수 없다. 그럴때는 어쩔수 없이 수동으로 설치를 해야 하는데, 검색이 잘안돼서, 눈칫껏 하다보니 되길래 적어본다. 1. 우선 각각 plugin들의 압축파일을 github에서 다운받는다. https://github.com/mobz/elasticsearch-head https://github.com/lukas-vlcek/bigdesk https://github.com/lmenezes/elasticsearch-kopf 2. elasticsearch/plugins/ 하위에 각각 plugin들의 디렉토리를 생성한다. 3. 각 plugin들의 하위 디렉토리에 ' _site ' 라는 디렉토리를 생성한다. 4. plugin의 압축파일들을 '_site' 하위로 이동한다. /elasticsearch/plugins/head/_site/ Gruntfile.js ...

웹 ui는 미적인 측면 뿐만아니라, 사람들의 성향에 좌지우지 된다. 이왕이면 조금더 편하고, 조금더 이쁜걸로. 내년 트렌드 역시 작년 이맘때 쯤 올라오던 2014년 디자인 트렌드와 크게 다르지는 않다. 전체적인 느낌은, 간결해졌고, 보기 좋아졌으며, 모바일페이지와 비슷한 ux 경험이 반영 되어있다. (출처 : http://www.elegantthemes.com/blog/resources/web-design-trends-to-look-out-for-in-2015) 1. Responsive or Go Home 역시 반응형웹. 몇년째 계속 화두다. 당연히 필요하다. 사용자가 어디에 있건 어떤 디바이스를 다루건간에 서비스는 계속 이루어져야 한다. 반면, 개발자입장에서는 css를 두벌 이상으로 만들어야 한다. 미디어쿼리가 좀더 좋아지던가, 브라우져가 좀더 좋아지던가. 2. Ghost Buttons 고스트버튼, 버튼 이미지를 배경이미지로 하고, 테두리만 두른 형태. 사용자의 행동이 필요한곳에 강제적인 느낌을 덜 주기 위해 사용한다고함. 확실히 무조건 눌러야 한다는 압박감은 덜한것같다. 3. Bigger Emphasis on Typography 타이포그라피. 사진보다는 글이 명확하다. 다만 한글폰트는 가짓수가 별로 없어서. 손글씨 이미지형태가 많아질듯 4. Large, Beautiful Background Images & Videos 크고 이쁜 사진을 배경으로. 역시 간결하다. 사진은 그림이 가지지 못한 느낌이 있다. 영상이 배경이 될수는 있지만, 브라우저와 데이터 요금에 부담을 줄것이다. 5. Scrolling Over Clicking 스크롤은 오직 우측과 하단에 상태바만 보여줬지만, 스크롤이란 ux행위 자체에 기능과 디자인이 붙었다. ui가 발전하는 공식. button onclick, onchage가 아니라, scroll up,down 이런...

아파치 같은경우에는 서버 버전 정보 숨기는게 곧잘 검색이 되는데, 톰캣이나 레진 같은 경우에는 별로 안나와서. ㅎ > curl -i <사이트 주소> 를 입력했을시 톰캣을 사용하는 서버측에서 별다른 설정을 하지 않았다면 Server: Apache-Coyote/1.1 이런 식으로 서버의 버전이 표시된다.  이부분을 숨기고 싶으면 실행된 톰캣의 server.xml 을 열어서  < Connector port = "8080" protocol = "HTTP/1.1" server = "Apache" Connector태그의 protocol과 server를 새로 추가 해주면 아래처럼 노출 되는 버전정보를 수정할 수 있다. <결과> Protocol : HTTP/1.1 .... Server: Apache <톰캣스펙 - server.xml의 connector의 server-attruibutes 설명> server Overrides the Server header for the http response. If set, the value for this attribute overrides the Tomcat default and any Server header set by a web application. If not set, any value specified by the application is used. If the application does not specify a value then  Apache-Coyote/1.1  is used. Unless you are paranoid, you won't need this feature. http://tomcat.apache.org/tomcat-7.0-doc/config/http.html #RESIN Resin은 resin.conf를 열어서 <serv...

web-xml에서 다음과 같은 에러메세지가 떨어지는 경우 The content of element type "web-app" must match "(icon?,display-name?,description?,distributable?,context-param*,filter*,filter-mapping*,listener*,servlet*,servlet-mapping*,session-config?,mime-mapping*,welcome-file-list?,error-page*,taglib*,resource-env-ref*,resource-ref*,security-constraint*,login-config?,security-role*,env-entry*,ejb-ref*,ejb-local-ref*)". 원인은 web-app의 자식 element들은 나름 순서대로 적어줘야 하는데 이 순서를 지키지 않아서 발생 순서는 에러메세지 순서와 같다. 1. icon 2. display-name 3. description 4. distributable 5. context-param 6. filter 7. filter-mapping 8. listener 9. servlet 10. servlet-mapping 11. session-config 12. mime-mapping 13. welcome-file-list 14. error-page 15. taglib 16. resource-env-ref 17. resource-ref 18. security-constraint 19. login-config 20. security-role 21. env-entry 22. ejb-ref 23. ejb-local-ref

Form에서 필드값들 유효성 체크할때 괜찮은 javascript 있다.  validate.js http://rickharrison.github.io/validate.js/ 설치 방법 Include the JavaScript file in your source <script type="text/javascript" src="validate.min.js"></script> 사용법 Create the validation object with your desired rules. This needs to be in a  <script>  tag located just before your closing  </body>  tag. The reason for this being that the DOM needs to have your form loaded before you can attach your rules. var validator = new FormValidator('example_form', [{ name: 'req', display: 'required', rules: 'required' }, { name: 'alphanumeric', rules: 'alpha_numeric' }, { name: 'password', rules: 'required' }, { name: 'password_confirm', display: 'password confirmation', rules: 'required|matches[password]' }, { name: 'email', rul...

쿠키확인 대부분의 쿠키는 배포 이후에 테스트하기위해 삭제(?)용도로 사용되지만 ㅋ 가끔 쿠키에 데이타가 제대로 들어갔는지 확인할 필요가 있다. 익스플로러의 경우에는 (xp) C:\Documents and Settings\KTH\Local Settings\TemporaryInternet Files\ 보통 여기서 확인하믄 되는데, 크롬은 임시다운로드 파일 위치 찾기도 번거로울뿐더러, 더 쉽고 좋은 방법이 있다. 개발자들이 크롬을 선호하는 건 이유가 다 있다. 바로 크롬의 디버깅 툴. ㅎ 들어가는법 F12 or 마우스 오른쪽버튼 -> 요소검사 네이버 로그인하고 나서 바로 디버깅 툴로 들어왔다. 총 4개의 쿠키가 생성된걸 확인할 수 있다. 광고관련된 쿠키가 4개중 3개다. 역시 개발자과 광고는 불가분의 관계다. ㅎ 쿠키 말고도 html5에서 적용되는 항목에 대해서도 확인이 가능하다. 대부분 비어있긴한데, 네이버와 다음에는 localstorage에 변수 하나가 들어있긴하다. 역시 앞서나가는 회사 ㅋ (아직 익스플로러에서는 안될텐데ㅋ,) 이참에 다음이랑 네이트 쿠키도 구경해보자ㅎ <다음> <네이트> 네이트 쿠키. 어마어마 하다... ㅋ 삭제방법 삭제는 넘흐 간단하다. 쿠키 선택 -> 우측버튼 클릭 -> Delete 끝. ㅋ

가장 많이 쓰는 에디터인듯. 여기 워드프레스도 Tinymce 이고, 저작권은 LGPL. 설치방법은 나름 쉬움. 웹공부 한지 얼마 안되고, 에디터도 처음 써봐서 헤멜뻔 했는데, 괜히 겁먹었음;;  1.  라이브러리 다운받아서 본인 웹 폴더에 넣어주시고,   2. 스크립트 위치만 설정한뒤에,   3. 설치 코드부분만 본인 입맛에 수정해주시면 끝. 우선 여기서 라이브러리 파일부터 다운받으시고 http://www.tinymce.com/download/download.php 적당한데 폴더 위치 넣어주시고, <script type=”text/javascript” src=”/common/tiny_mce/tiny_mce.js”></script> 이젠 tinymce의 init 함수만 작성하면 되는데, 친절하게도 메인 홈페이지에 코드가 게시되어 있음. *  mode -> tiny mce를 어느 class에 넣겠냐는 말임.  지금 ‘textarea’로 되어있는데, 이렇게 설정해놓으면 본인 페이지에 있는 모든 textarea에 다들어가게됨.   * editor_selector -> mode랑 같이 사용하는데, 이번엔  특정 textarea에만 넣고 싶다! 라고 할때 사용하는거임. mode : “specific_textareas”, editor_selector : “reqcontent”, ‘reqcontent’라는 textarea에만 tinymce가 삽입. *theme -> 스킨이랑은 다름. tinymce를 간단한 몇가지만 한줄짜리로 쓸것인가 온갖기능을 전부 쓸것인가 simple, advanced 두가지. *skin 02k7은 뭔지 잘 몰라두 됨. skin_variant가 스킨을 설정해주는 거임 . ...