2021/05 29

<!DOCTYPE html> 에 Uncaught SyntaxError: Unexpected token '<' 뜰때 해결하기

Controller에서 일정 패턴으로 URL을 맵핑 시키고 있었습니다. PathVariable을 적극적으로 이용해서 심플한 url 패턴을 만들어보자! 해서 localhost/project이름/로그인사용자닉네임/사용모듈 ... 으로 depth 구조를 만들어서 Controller에서도 정규식을 이용해 맵핑을 시키고 있었는데요. 기여코 이 에러를 또 다시 마주하고야 말았습니다. 결론부터 말씀드리자면, .css 나 .js 같은 파일들 마저 Controller 가 잡아서 제멋대로 html 데이터로 응답을 하다 보니 해당 에러가 발생 한 것 입니다. 이걸 힌트로 해결 할 수 있는 분들은 해결 하시면 되고, 저와 같은 문제인 분들은 아래 이어질 해결 방법을 따라가시면 됩니다. servlet-context.xml에 m..

Google Analytics 구글 애널리틱스 활용하기 - 웹 어플리케이션에 적용

https://shanepark.tistory.com/121 Google Analytics 구글 애널리틱스 활용하기 - 티스토리 연동 최종 프로젝트에서 Google Analytics 를 사용해 볼 예정입니다. 아직 프로젝트가 생성 중이니 저의 티스토리에 연동을 해 봄으로써 테스트를 해보았습니다. 구글 애널리틱스(GA)란 ? 더보기 Google Analyt shanepark.tistory.com 위에서는 티스토리 블로그에 있는 기본 기능으로 연동을 해 보았습니다. 기본 티스토리의 Google Analytics 는 과거의 버전으로, 최신에 제공하는 기술들을 사용할 수 없습니다. 아래에서 활용해볼 방법을 활용하면 티스토리를 포함한 본인의 어느 웹 사이트에서도 최신의 Google Analytics 분석을 활용 ..

Development/Projects 2021.05.23 (3)

JavaScript 드래그 할 수 있는 HTML 요소 만들기

종종 HTML 요소의 드래그가 필요한 때가 있습니다. 드래그를 통해 상태값을 변경하거나, 간단하게 설정을 적용시킬 수 있을때 특히 유용합니다. 저희가 준비중인 프로젝트에서는 칸반 보드가 들어갈 예정인데 이를 위해 꼭 필요한 기술입니다. 일단 칸반 카드로 쓸 div를 만들어 줬습니다. .kanbanCard { cursor: move; position: absolute; background-color: #2196F3; color : white; border: 1px solid #d3d3d3; text-align: center; } cursor:move로 마우스를 올렸을때 십자표시로 커서가 바뀌도록 css를 적용해줍니다. 이제 위의 자바스크립트 코드가 필요합니다. 코드 전문을 먼저 보여드리고 나서, 함수를 한..

Google Analytics 구글 애널리틱스 활용하기 - 티스토리 연동

최종 프로젝트에서 Google Analytics 를 사용해 볼 예정입니다. 아직 프로젝트가 생성 중이니 저의 티스토리에 연동을 해 봄으로써 테스트를 해보았습니다. 구글 애널리틱스(GA)란 ? 더보기 Google Analytics is a web analytics service offered by Google that tracks and reports website traffic, currently as a platform inside the Google Marketing Platform brand.[1] Google launched the service in November 2005 after acquiring Urchin. 구글이 제공하는 무료 웹 분석 툴 입니다. 구글의 통계 및 빅데이터 노하우를 바..

Spring Junit 테스트시 Caused by: java.io.FileNotFoundException: ServletContext resource [/WEB-INF/tiles/tiles.xml] cannot be resolved to URL because it does not exist 오류 해결

java.lang.IllegalStateException: Failed to load ApplicationContext at org.springframework.test.context.cache.DefaultCacheAwareContextLoaderDelegate.loadContext(DefaultCacheAwareContextLoaderDelegate.java:124) ~[spring-test-4.3.25.RELEASE.jar:4.3.25.RELEASE] at org.springframework.test.context.support.DefaultTestContext.getApplicationContext(DefaultTestContext.java:83) ~[spring-test-4.3.25.RELEAS..

Spring 에서 Tiles framework 쉽게 사용하기

Tiles framework 란? 더보기 Tiles allows authors to define page fragments which can be assembled into a complete pages at runtime. These fragments, or tiles, can be used as simple includes in order to reduce the duplication of common page elements or embedded within other tiles to develop a series of reusable templates. These templates streamline the development of a consistent look and feel across a..

맥에서 Microsoft remote desktop 으로 접속시 한영키 입력방법

제가 요즘 정말 애용하고 있는 Microsoft 사의 Remote Desktop 입니다. 심지어 Github Desktop도 아직 Apple Silicon native를 지원하지 않는 상태에서, Remote Desktop은 이미 Apple Silicon 에 최적화 되어있습니다. 일단 한번 사용해본다면 Team Viewer 등 타 프로그램을 거들떠도 안보게 될 만큼 막강한 원격 제어를 제공합니다. 왼쪽 맨 위에 억지로 띄운 Mac의 신호등이 아니면 정말 그냥 윈도우 컴퓨터 처럼 보일 정도입니다. 심지어 해상도도 원격 조정중인 맥에 연결된 노트북의 해상도로 자동 변경됩니다. 찬양은 여기까지 하고.. 한/영키를 맥북에서 사용하던 키를 똑같이 누를때 작동이 안되는 것을 확인했습니다. 검색을 하니 커맨드 + 스페..

IT Computer/Mac 2021.05.19

삼성 sl-j1660 프린터 m1 맥북에서 사용하기

삼성에서 나온 저렴한 프린터기 입니다. 쿠팡에서 구매해서 사용중인데요, mac OS를 공식적으로 지원하지 않습니다. https://support.apple.com/kb/DL1888?locale=ko_KR Hewlett-Packard 프린터 드라이버 v5.1 (OS X) 언어 DanskDeutschEnglishEspañol (Chile)Español (Colombia)EspañolEspañol (América)SuomiFrançaisItaliano日本語한국어NederlandsNorskPolskiPortuguês BrasileiroPortuguêsPусскийSvenska简体中文繁體中文 Hewlett-Packard 프린터 드 support.apple.com 위의 링크에서 HP용 프린터 드라이버를 다운 받습니..

IT Computer/Mac 2021.05.16 (1)

Windows) Kibana 설치하기 + Elastic Search 연동하기

Elastic Search 는 lucene 기반의 분석 엔진입니다. 쿼리를 짜서 '검색'을 하는 개념이기 때문에 Search 컨셉을 가지고 있습니다. Elastic Search는 시간이 갈수록 증가하는 문제를 처리하는 분산형RESTful 검색 및 분석 엔진입니다 위의 Elastic Stack을 구성하기 위해 Kibana를 설치해 보겠습니다. https://www.elastic.co/kr/downloads/kibana Download Kibana Free | Get Started Now | Elastic Download Kibana or the complete Elastic Stack (formerly ELK stack) for free and start visualizing, analyzing, and ..

Database/Elastic Search 2021.05.16 (1)

ajax로 elastic search DB에서 데이터 받아오기 예제

학원 최종 프로젝트에 검색 기능을 넣으려다가 선생님께 추천 받아 elastic search를 사용해 보고 있습니다. 기왕 DB를 구축해 사용하는거, 채팅 메시지에 대해서는 RDBMS 말고 Elastic Search를 활용하려 생각하고 있습니다. 그것을 위해 여러가지 실험을 해보다가 한번 ajax로 비동기 데이터를 전달 받아 화면에 렌더링 하는 테스트를 시행해 보았습니다. 간단하게 위의 코드만 작성했고, 해당 index/type/ (gaia/message/) 에는 몇가지의 더미 데이터를 미리 넣어두었습니다. 테스트를 해봤는데.. CORS policy로 인해 꽤나 고생했습니다. 위의 에러 해결이 필요하신 분은 아래 링크를 참고해주세요. https://shanepark.tistory.com/113 No 'Ac..

No 'Access-Control-Allow-Origin' header is present on the requested resource. 해결하기

Access to XMLHttpRequest at '' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. ajax를 이용해 elastic search의 데이터를 불러오는 테스트를 해보고 있었는데 에러가 발생했습니다. CORS(Cross-Origin Resource Sharing) 설정 때문인데요, POSTMAN이나 Web Browser에서 명령을 내릴때 잘 된다고 해서 ajax로 신호를 보내도 동일한 response를 기대한 제가 잘못이었습니다. 웹은 SOP(Same Origin Policy) 정책을 따..

Elasticsearch 3) Elasticsearch 외부 접속 허용하기

저는 집에서 DB 서버를 돌리고 외부에서 접속 할 예정입니다. MongoDB도 그랬는데 Elasticsearch도 기본적으로는 외부 접속이 막혀있었습니다. 127.0.0.1:9200 로 바인딩 되어있는 것을 변경해 주어야 합니다. 일단 설정파일을 변경해 주어야 되는데, 요 파일이 가장 의심됩니다. 열어봅니다. 럭키! 여기 내용이 있네요 network.host: 0.0.0.0을 추가해주고, 아래cluster.initial_master_nodes: ["node-1", "node-2"] 의 주석을 풀어줍니다. 컨트롤 + C 로 서버를 종료 한 뒤에, 새로 켜봅니다. 예~ 접속이 됩니다! 이후 공유기 포트포워딩에 9200 포트, 9300 포트 열어서 외부 아이피 접속까지 성공적으로 테스트 마쳤습니다.

Windows) Elasticsearch 2) Postman 설치하기 및 CRUD 예제

ElasticSearch를 활용하기 위해 Tool 을 설치합니다. Oracle에는 SQL Developer MYSQL에는 Sequel Pro MongoDB는 Robo 3T 가 있죠 이번에는 Api 를 테스트하기 위해 Postman을 설치할 예정입니다. https://www.postman.com/downloads/ Download Postman | Try Postman for Free Try Postman for free! Join 13 million developers who rely on Postman, the collaboration platform for API development. Create better APIs—faster. www.postman.com 위의 링크에서 다운 받습니다. 본인의 ..

Windows) Elasticsearch 1) Elasticsearch 설치하기

최종 프로젝트에서 전체 검색 기능을 넣으려고 하니 선생님께서 추천해주신 오픈소스 검색엔진 입니다. 아래의 링크에서 다운 받습니다. https://www.elastic.co/downloads/elasticsearch Download Elasticsearch Free | Get Started Now | Elastic Download Elasticsearch or the complete Elastic Stack (formerly ELK stack) for free and start searching and analyzing in minutes with Elastic. www.elastic.co 집에서 서버로 돌리는 컴퓨터가 Windows 라서 windows 용으로 다운 받습니다. .zip 파일이 다운 받아지는..

반응형