알쓸전컴(알아두면 쓸모있는 전자 컴퓨터)

axios(post) -> spring framework json 객체 변환 Controller 에 추가시 @RequestMapping(value = "/suggestion_peer_insert", method = RequestMethod.POST) public void suggestion_peer_insert(@RequestBody String filterJSON,HttpServletRequest request, HttpServletResponse response) { try { suggestion_dao.suggestion_peer_insert(filterJSON,request, response); }catch(Exception e1) { // TODO Auto-generated catch block..

post 에 params 데이터 보내기 Get 방식의 경우에는 axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); 위와 같이 보내면 되지만 Post 는 안됩니다. npm install url-search-params-polyfill --save 로 설치를 하고 이유는 IE 11 을 커버 하기 위해서 입니다. import 'url-search-params-polyfill'; 을 추가 해 줍니다. var params = new URLSearchParams(); params.append('doc_..

vue-simple-uploader (Server 파트) simple-uploader 을 사용 하기 위해서는 먼저 POST 로 전송온 request 객체를 multipartHttpServletRequest 으로 변환 해줘야 합니다. multipartHttpServletRequest 을 사용 하기 위해서는 1.pom.xml commons-io commons-io 2.0.1 commons-fileupload commons-fileupload 1.2.2 추가해 줍니다. 2.wepapp->WEB-INF->spring->appServlet->servlet-context.xml bean을 추가해 줍니다. 여기서 옵션으로는 maxUploadSize(최대업로드 가능한 바이트크기)maxInMemorySize(디스크에 임..

vue-simple-uploader제가 사용한 파일 업로드 라이브러리는 위의 업로더 입니다. 홈페이지 : https://github.com/simple-uploader/vue-uploader 입니다. vue-uploader 는 https://github.com/simple-uploader/Uploader 의 라이러러리를 vue js 로 사용하기 편하게 하기 위해서 만들어진 라이브러리 입니다. 1. npm install simple-uploader.js --save 설치를 해줍니다. 2. npm install vue-simple-uploader --save설치 해 줍니다. 그리고 npm build 시에 Unexpected token: name (parent) [./~/vue-simple-uploader/s..

vue js ckeditor 적용법 1. 전제 사항 ▶ vue cli 을 사용 하여 vue init webpack 으로 프로젝트를 생성 하였습니다. ▶ 톰켓 같은 웹서버가 필요 합니다. 2. 필요 사항 build -> webpack.base.conf.js -> const path = require('path')const utils = require('./utils')const config = require('../config')const vueLoaderConfig = require('./vue-loader.conf')require('es6-promise/auto'); require('es6-promise/auto');을 추가 해 줍니다. module.exports = { context: path.res..

bootstrap 테마 적용 저게 예제로 사용할 탬플릿은 https://startbootstrap.com/template-overviews/shop-homepage/ 에 있는 테마 입니다. 다운로드 받으면 위와 같은 내용 들이 있습니다. 이를 Django에 적용 하려고 합니다. 먼저 저의 Django 환경은 project 이름은 Vcsite app이름은 mainapp 으로 만들었습니다. 먼저 Vcsite/mainapp/ 에 static 폴더를 만들고 Vcsite/mainapp/static 에 mainapp 이라고 폴더를 만들어 줍니다. Vcsite/mainapp/static/mainapp 에 자신이 받은 bootstrap 파일중 index.html을 제외하고 모두 복사 붙혀 넣기 합니다. 저의 경우에 a..

기본폼 이메일 주소 암호 파일 업로드 여기에 블록레벨 도움말 예제 입력을 기억합니다 제출 주의점 Form group 과 input group 을 직접 같이 쓰면 안됩니다. 대신, input group 을 form group 내에 넣도록 하세요. 인라인 폼 한줄에 폼을 표시하는 것입니다. Name Email Send invitation 주의점1. 너비를 자동으로 맞추기게 되어 있습니다. with:100% 와 width:auto; 로 초기화하여 사용합니다. 사용하는 화면에 따라 맞춤너비가 필요할수도 있습니다. 2. 항상 라벨을 추가해야합니다. 그렇지 않으면 폼에 문제가 생길수도 있습니다. 하지만 라벨을 숨기는 방법은 있습니다. .sr-only 클래스에 sr-only 을 주면 라벨을 숨길수 있습니다. 그리고 ..

지금 부터 부트 스트랩 코드는 기본 코드는 기본 코드 를 바탕으로 body 만 작성 하겠습니다. 정렬 클래스 좌측정렬된 텍스트.중앙정렬된 텍스트.우측정렬된 텍스트.양쪽정렬된 텍스트.그냥 텍스트. 변형 클래스Lowercased text.Uppercased text.Capitalized text. 기본 테이블 Optional table caption. # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter 줄무늬 테이블 Optional table caption. # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 ..

그리드 시스템 일단 간단한 샘플 코드를보면서 설명하는게 이해하기 좋을듯 합니다. Hello, world! .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-8 .col-md-4 .col-md-4 .col-md-4 .col-md-4 .col-md-6 .col-md-6 위 그림에서 보면 그리드에서 cod-md-1 최대 12열로 표현 합니다. md-8 은 8개를 합친 것이고 md-4는 4개를 합친것입니다. row은 줄을 의미하구요 부트 스트랩 공식 사이트에서 설명부트스트랩은 기기나 뷰포트 크기가 증가함에 따라 12 열이 적절하게 확대..

bootstrap 기본 코드 작성하기 처음에는 간단히 설치하고 넘어가는 방법으로 하겠습니다. 부트 스트랩은 코드를 웹서버로 지원해주는 서비스가 있습니다. 인터넷의 환경이라면 따라 설치를 안하고 써도 기본적인것들은 사용할수 있다는 것이죠 . 부트스트랩 CDNMaxCDN 의 사람들은 고맙게도 부트스트랩의 CSS 와 자바스크립트를 CDN 으로 지원합니다. 이를 사용하려면 아래의 부트스트랩 CDN링크들을 사용하세요. 위 내용은 추후 html 기본틀에서 bootstrap을 적용할때 사용됩니다, bootstrap 사이트 기본 예제코드 Hello, world! 나와 있지만 저는 처음에는 CDN 을사용하기 때문에 코드를 약간 수정해 줘야합니다. Hello, world! 위의 코드를 기본으로 해서 예제들을 보면서 학습 ..