POMOTODO : jQuery (ajax, sortable)

POMOTODO를 만들면서 작성한 코드를 복습하기 위해 작성하는 글입니다.

 

 

POMOTODO.kr

 

 

What is POMOTODO?

 

---

POMOTODO에서 사용한 jQuery

  - ajax

  - sortable

 

- ajax (asynchronous javascript and xml)

AJAX는 전체 페이지를 다시 로드하지 않고도 서버와 데이터를 교환하고 웹 페이지의 일부를 업데이트하는 기술이다.

꼭 xml뿐 아니라 json도 사용할 수 있다

이 기술을 통해 서버 뿐 아니라 사용자도 시간,돈,자원을 절약할 수 있고, 싱글 웹페이지를 구성할 수 있다

 

1. ejs파일에 jquery를 첨부한다(cdn형식)

<!--ejs파일의 head에 첨부-->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

 

2. 자바스크립트에 작성할 요청코드

//기본형태
//$.ajax({ 
//    method : '서버로 전송하는 데이터의 타입 (POST, GET)',
//    url : '데이터를 전송할 URL',
//    data : {서버에 전송할 데이터, key/value 형식의 객체},
//    success : function() {
//        ajax통신에 성공했을 때 호출될 이벤트 핸들러
//    },
//    error : function(xhr, status, error) {
//        ajax통신에 실패했을 때 호출될 이벤트 핸들러
//    }
//})
//예제
 $.ajax({ 
    method : 'POST',
    url : '/insertNotTodoList',
    data : {id : modalButton.innerHTML, notTodoListHTML : ntdItemList.innerHTML},
    success : function() {
        console.log('낫투두 ajax 성공')
    },
    error : function(xhr, status, error) {
        console.log('낫투두 ajax 실패');
    }
})

 

3. 서버에서 요청을 받고 응답해주는 코드를 작성해야한다

 //낫투두리스트 업데이트
    app.post('/insertNotTodoList', function(req, res){
        if(req.user !== undefined){
            db.collection('not-todolist').updateOne({id : req.user.id}, { $set : req.body }, function(err, result){ 
                console.log('낫투두리스트 업데이트')
                res.status(200).send({ message : '낫투두 업데이트 성공했습니다'});
            })
        }else{
            res.status(200).send({ message : '로그인을 해주세요'});
        }
    })

 

- sortable

 

리스트간 이동을 위해 버튼으로이동, 드래그&드롭이동 두가지 방법이 있었고 후자를 선택했다

직접구현하는 방법도 있지만 간편하게 jquery를 이용해서 구현했다

 

1. ejs파일에 jqueryui를 첨부한다(cdn형식)

<!--ejs파일의 head에 첨부-->
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

 

2. 자바스크립트에서 사용할 코드

//기본형태
$("선택자").sortable();

// 예제
$("#sortable").sortable({
    start:function(event, ui){
        console.log('투두드래그시작');
    },
   stop:function(event, ui){
        ajaxTodo();
        }
});

 

3. 모바일환경에서 드래그&드래그드롭이 되게 하려면?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

jqueryui밑에 첨부해주면 된다