유혁스쿨

Node.js (노드) 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경(플랫폼) 2008년 크롬 웹브라우저가 출시되면서 자바스크립트의 속도가 점차 빨리지게 되었고, 이에 자바스크립트를 웹 브라우저가 아닌 곳에서 쓸 수 있게 만들자는 의견에 의해 CommnJS표준이 작성되었고, Node.js는 CommonJS표준에 맞춰 크롬 V8엔진을 기반으로 개발된 플랫폼 환경이다 주로 서버측 프로그래밍에서 사용되며 비동기 이벤트 기반의 단일 스레드 모델을 사용하여 효율적으로 네트워크 애플리케이션을 개발할 수 있도록 지원한다. Node.js를 사용하면 웹 브라우저가 아닌 곳에서 자바스크립트로 프로그램을 개발할 수 있다. JAVA Spring 진영에서의 Tomcat(내/외장) 서버와 비슷한 역할을 해준다...

[프론트서버 백앤드서버 CORS연동 설정] axios 통신주소로 Spring의 url을 입력하여 프론트 서버와 백앤드 서버가 서로 통신하기 위해서는 백엔드 서버에서 CORS 를 설정해야한다. Cors Mapping (Cross-Origin Resource Sharing,CORS) 이란 다른 출처의 자원을 공유할 수 있도록 설정하는 권한 체제를 말한다. 따라서 CORS를 설정해주지 않거나 제대로 설정하지 않은 경우, 원하는대로 리소스를 공유하지 못하게 된다. 아래와 같이 설정할 클래스를 만들어야하는데, 이때 WebMvcConfigurer 인터페이스를 구현받아야 한다. import org.springframework.context.annotation.Configuration; import org.spring..

[ Ajax ] 컨트롤러로 부터 return 응답을 받는 데이터의 형태이며 text, xml, json, html 등이 가능하다. 문자열이라면 text이고 객체나 Map 혹은 List라면 Json으로 지정해 주면 된다. 'JSON' 서버의 데이터를 JSON 형태로 받아온다. 조회 작업을 할 때 return을 통해 데이터를 JSON형태로 받아온다. 'TEXT' 서버의 데이터를 text형태로 받아온다. 보통 (입력,수정,삭제) 작업 성공시 return을 통해 success문자열을 반환받기 위해 사용한다. ex) 컨트롤러 : return "success"; 스크립트 : if(data == "success"){} 성공에대한 문자열 반환은 text가 아닌 JSON으로 지정되어있다면 Map형태로 Key:Value형..

jqGrid HTML + 스크립트 코드 node.js 스크립트 코드 //모듈 추출 var http = require('http'); var express = require('express'); //express모듈 : http모듈처럼 사용할 수 있지만 훨씬 더 많은 기능이 있는 외부모듈이다. //http에 http모듈을 추출하여 저장한다. express에 express모듈을 추출하여 저장한다. var bodyParser = require('body-parser') var _ = require('underscore'); var array = []; for(var i = 0; i < 10; i++){ array[i] = { id : i, value : i * i }; } var output = _.filte..

w2ui 플러그인을 활용한 그리드 그리기 3번째 포스팅이다. 그리드에서 데이터를 추가 수정 삭제할 때 각각 필요한 메서드가 있다. add(record) : 데이터를 추가한다. getChanged() : 변경사항을 확인한다. getSelection() : 선택하고 있는 데이터를 확인한다. [추가] - add( ) 위 세개의 메서드는 2번째 포스팅에서 다뤘던 이벤트 리스너를 통해 이벤트가 발생했을때 작동할 수 있도록 구현한다. 추가시에는 onAdd리스너를 통해 구현한다. , onAdd: function(target, eventData){ this.add({ recid: this.total + 1 , name: '[입력]' , author: '[입력]' , publisher: '[입력]' , price: '[..

지난 포스팅에 이어서 시작한다. 그리드는 굉장히 다양한 이벤트가 있다. , onAdd: function(target, eventData){} , onChange: function(target, eventData){} , onDelete: function(target, eventData){} onAdd : add버튼을 누를때 실행된다. onChange : 데이터를 수정하면 실행된다. onDelete : delete버튼을 누를 때 실행된다. 그리드 플러그인의 각 이벤트 리스터는 첫번째 매개변수로 자기 자신을 받고, 두번째 매게변수로 이벤트 객체를 받는다. 여기서 자기자신이라함은 그리드를 말하고 이벤트 객체는 그리드 로우행의 데이터 객체를 말한다. , onAdd: function(target, eventDat..

https://w2ui.com/web/home New JavaScript UI Library w2ui JavaScript UI Library for the Modern Web Download w2ui 1.5 w2ui.com w2ui 공식 홈페이지에서 w2ui플러그인을 내려받는다. 내려받은 플러그인에서 w2ui-1.5.js , w2ui-1.5.css 두 파일을 디렉토리에 저장한다. 저장한 파일들을 참조하도록 저장된 디렉토리 경로와 함께 각각 선언해준다. 위 코드와 같이 style 속성을 적용한다. Body영역 본문에는 id가 wrap인 div 태그요소를 추가한다. 이어서 작성할 스크립트 코드로 wrap id를 갖는 div영역에 그리드가 그려질 예정이다. 다음은 그리드를 그려내는 Script 코드이다. na..

HTML 코드입니다. 데이터 추가 닉네임 메시지 Ajax코드입니다. $(document).ready(function(){ $('#write_form').submit(function(){ var data = $(this).serialize(); $.ajax({ url : '/messages' ,type : 'post' ,data : data ,success : function(data){ console.log("채팅 메시지 데이터 저장 성공",data); } }) //Ajax() event.preventDefault(); })//submit() 이벤트 setInterval(function(){ $.ajax({ url : '/messages' ,type : 'get' ,data : {dummy:new Dat..

npm install mysql var mysql = require('mysql'); var client = mysql.createConnection({ user : 'root' ,password : '123qwe' }); 서버 스크립트문에 위와같이 설정한다. createConnection() 메서드는 데이터베이스 접속 메서드이다. 매개변수 인자값에 데이터베이스의 정보들을 각 속성에 주입하여 객체로 받는다. client.query('데이터베이스명'); 테이블이 존재하는 데이터베이스 이름을 입력한다 CREATE DATABASE로 생성한 데이터베이스의 이름이다. 위와같이 선언할 수도 있고, 데이터베이스 접속 메서드인 createConnection()의 매개변수 인자값에 들어가는 객체 속성에 추가가 가능하다...

XML 데이터는 XMLHttpRequest객체의 responseXML 속성을 통해 전달받을 수 있다. 따라서 node.js에 다음과 같이 코드를 구성한다. request.onreadystatechange = function(event){ if(request.readyState == 4){ if(request.status == 200){ console.log(request.responseXML) var xml = request.responseXML; } } } XML문서객체를 조작할 때에는 getElements 키워드가 붙은 메서드를 사용하는데 html태그에서 사용하는 메서드와 동일하다. XML에서는 보통 id속성을 사용하지 않기 때문에 getElementsById() 메서드보다는 getElementsBy..

XMLHttpRequest는 자바스크립트에서 Ajax를 사용할때 사용되는 객체이다. var request = new XMLHttpRequest(); request.open('get','/data.json',true); request.send(); XMLHttpRequest객체의 open() 메서드에 전송방식, 전송위치, sync방식을 지정해준다. 3번째 매개변수의 true속성을 통해 sync를 비동기방식으로 설정하여 Ajax 데이터 전송을 진행하였다. var request = new XMLHttpRequest(); request.onreadystatechange = function(event){ if(request.readyState == 4){ if(request.status == 200){ conso..

app.use(express.bodyParser()); 위 코드방식을 사용하면 node.js 서버를 구동시킨 cmd상에 위와같은 오류가 발생한다. 해당 코드를 삭제하고 파라미터 데이터를 전송하면 아래 콘솔창과 같은 텍스트열이 출력되면서 node.js 서버를 구동시킨 cmd상에서는 파라미터값들이 undefined로 출력된다. npm에서 body-parser 를 install 해줘야한다. > npm install body-parser install 해준 뒤 script부분 대체코드 var bodyParser = require('body-parser') app.use(bodyParser.urlencoded({ extended: false })) app.use(bodyParser.json()); https://..

페이징 처리를 마치고 jQuery를 사용여 검색기능 작업중에 검색어와 검색기준을 파라미터에 담는 도중 에러가 발생했습니다. 상황은 jQuery를 사용하여 버튼을 클릭하였을때 행(row)을 몇개를 띄워줄지에 대한 작업 처리에대한 $("#count-per-page .btn-izone").click(function(){ let row = $(this).val(); //1번//location.href="/board/list?row="+row+'&page='+${page}; //2번//location.href="/board/list?row="+row+'&page='+${page}+'&keyword='+${keyword}+'&condition='+${condition}; location.href="/board/li..

select option이 selected 선택되었을때 value값을 가져오게하는법 코어태그립으로 selected 속성을 부여하고 form get방식으로 submit을통해 선택된 네임파라미터를 전송하는 방법을 jQuery로 구현할수 있습니다. 제목 내용 작성자 제목+내용 기본적으로 select 속성은 제목 이라는 option이 선택되었을때 제목 option의 value속성 값이 select의 name파라미터에 실려 넘어갑니다. 제목 제목이 선택된다면 condition이라는 파라미터에 title이 실려가는것입니다. 이 내용은 선택된 option을 전송하는것과는 별개인데 이 코드를보십시오 ${'selected'} c:if문의 조건은 만약 name이 condition인 select태그의 option이 현재 o..