유혁스쿨

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://..

tbody에는 접근이 가능하지만 아직도 그 하위의 fc-list-event-title클래스명을 갖는 tr태그에는 접근이 되지 않는다. 구현된 renderSegList 함수에서 코드를 수정한다. public renderSegList(allSegs, datDates) { var _a = this.context, theme = _a.theme, options = _a.options; var _b = this.state, timeHeaderId = _b.timeHeaderId, eventHeaderId = _b.eventHeaderId, dateHeaderIdRoot = _b.dateHeaderIdRoot; var segsByDay = groupSegsByDay(allSegs); return (createEle..

선택자 $()의 형태는 $('요소') 혹은 $('속성') 과 같이 사용해왔다. ( 요소[속성=값] 혹은 요소:속성 ) 매개변수를 하나만 넣었을 경우 해당하는 요소나 클래스를 모두 찾아간다. https://u-it.tistory.com/entry/%EC%86%8D%EC%84%B1%EC%84%A0%ED%83%9D%EC%9E%90-%ED%95%84%ED%84%B0%EC%84%A0%ED%83%9D%EC%9E%90?category=1019283 속성선택자 , (입력양식)필터 선택자 / 요소[속성=값] , 요소:속성 [속성 선택자] 속성 선택자 문법은 기본적으로 요소[속성=값] 의 형태이다. 속성 선택자는 요소에 명시적으로 지정하는 name, id, class 등의 속성 값과 일치한 요소를 찾는 선택자이다. 여기서..

$(document).ready(function (){ $('h1').on('mouseenter',function(){ $(this).addClass('reverse'); }); $('h1').on('mouseleave',function(){ $(this).removeClass('reverse'); }); }); 태그 요소에 마우스를 올려놓았을때 'reverse' 클래스 속성을 추가하고, 다시 마우스를 요소로부터 떨어트리면 추가된 'reverse'클래스 속성을 제거한다. 이와 같은 문법을 한번에 객체형태로 만들 수 있다. $(document).ready(function (){ $('h1').on({ mouseenter: function(){ $(this).addClass('reverse'); } , mo..

ListView.prototype.render = function () { var _this = this; var _a = this, props = _a.props, context = _a.context; var extraClassNames = [ 'fc-list', context.theme.getClass('table'), context.options.stickyHeaderDates !== false ? 'fc-list-sticky' : '', ]; var _b = this.computeDateVars(props.dateProfile), dayDates = _b.dayDates, dayRanges = _b.dayRanges; var eventSegs = this.eventStoreToSegs(props..

두 스크립트를 선언해줘야한다. ,titleFormat : 'YYYY - MM' titleFormat 옵션을 통해 날짜 형식이 지정 가능하다. 처음 언급한 두 스크립트중 하나라도 없다면 캘린더는 렌더링되지 않는다. 두 스크립트는 추후 링크에 접속하여 실물파일로 저장하여 사용한다.

이벤트가 지니고있는 데이터 중 api 사용자가 임의로 데이터 컬러를 동적으로 컨트롤 하는 경우가 생긴다. , eventDidMount: function(info) { } eventDidMount : 함수형 옵션을 활용하여 설정한다. function의 매개변수 info에 접근하여 event에 대한 정보를 가질 수 있다. , eventDidMount: function(info) { var title = info.event.title; var start = info.event.start; var end = info.event.end; console.log(title,start,end); } start, end, title과 같이 default 속성은 모두 info.event에서 직접 접근이 가능하지만 만약 e..

v5에서의 툴팁 구현 2.x대 버전의 "popper.js"와 "tooltip.js"의 새 버전인 "tippy.js" 두 스크립트 파일 등록 (추후 해당 URL에 직접 들어가서 각 파일들을 직접 다운받아서 사용해야한다.) FullCalendar의 eventDidMount 함수 옵션을 통해 tippy 메소드 호출 후 툴팁 세팅. eventDidMount: function(info) { tippy(info.el, { content: info.event.title//이벤트 타이틀을 툴팁으로 가져옵니다. //content: info.event.extendedProps.description,//이벤트 디스크립션을 툴팁으로 }); }, 툴팁 디자인 및 기타 옵션 설정하기 eventDidMount: function(i..

https://u-it.tistory.com/entry/each-%ED%95%A8%EC%88%98-%EC%82%AC%EC%9A%A9%EB%AC%B8%EB%B2%95 each() 함수 '요소' 관리 사용 문법 선택자를 변수에 담은 후 변수로 접근하여 사용 가능 선택자를 변수에 담은 후 변수를 매개변수로 담아 접근하여 사용 가능 Object 배열에서는 다음과같이 변수로 사용이 불가능해진다. u-it.tistory.com 지난 시간에 each 함수를 통해 요소를 반복하여 관리하는 문법을 구현했었다. $(document).ready(function (){ $('h1').each(function(index,item){ $(item).addClass('item'+index); }); }); 선택자를 지정하고 eac..

1. css() 메서드의 매개변수에 {backgroundColor : 'black , color : 'white'} 와 같은 형태로 속성을 지정할 수 있다. 2. css() 메서드의 매개변수에 'background','black' 와 같은 형태로 속성을 지정할 수 있다. 1번의 형태 경우에는 $('h1').css( { backgroundColor : 'white' , color : 'red' } ) stylesheet방식과 유사한 형태로 {중괄호}안에 변경할 속성을 나열하여 한번에 지정할 수 있다. 2번의 형태 경우에는 $('h1').css('background', 'white').css('color','red') 와 같이 지정할 스타일이 복수개일 경우 메서드를 각각 두번 호출하여 설정해야한다. 주의할 ..