KOSTA 교육 53일차(Semi-Project, Ajax, JavaScript, jQuery)

19. 1. 21(월)

 

실습 내용

 

1. Ajax

---

1. Ajax

Post에 대한 내용들을 비동기식으로 바꾸어 해당 페이지에서 다른 페이지로 움직이지 않고 이동한다.

• Post의 내부 내용을 클릭했을 때 Ajax를 사용하여 팝업창이 뜬다.
• Post 내부 내용을 들어가면 제목 및 마감일이 출력되어야 한다.

 

Post 클릭시 내부페이지 출력

• detailPostView 클래스를 click하였을 때 함수를 실행한다.
• 그 함수는 p_no를 변수로 하여 변수는 this(여기서의 this는 detailPostView)에서 find(찾는 함수)로 select_pno 클래스를 찾아 .val()을 통해 클래스에 대한 value값을 p_no에 담는다.
• 담은 p_no는 Ajax로 나타낼 수 있게 메소드로 호출시켜놓고 파라미터는 p_no를 선언한다.
• return false한다.

 

• Json 형식으로 dataType을 받기 위해선 JSON객체를 생성해주고 해당 객체에 각 객체들을 add해주어야 한다.
• 이 때 add해준 객체들은 index 순서에 맞게 저장되는 것을 꼭 주의해야한다.
• 그리고 response 해주기 위해 getWriter().print(jsonarr.toString())으로 출력될 수 있도록 만들어준다.
• JSONArray.fromObject(객체)는 또 하나의 list 내부 객체를 만들어 내부 객체에서 또 index값이 나뉜다.

 

• funtion을 위에서 선언한 click이벤트 함수에서 선언한 함수명과 동일하게 선언한다.
• 메소드 타입은 POST(default는 GET), url은 Controller에서 선언한 경로,
  dataType은 JSON 형태, cache 유무는 false, data는 input Value : value 를 선언한다.
• success 방식은 성공시 success 함수를 실행하여 response 한다.
  JSONArray 선언했던 index를 순서에 맞게 선언하여 p_title(Post 제목)을 꺼내오고 post_title라는 id를 가진 태그에 txt1을 담는다.
• promise 방식은 성공시 .then 실패시 .catch로 이동하여 사용된다. 세부 내용은 success 방식과 동일하다.

 

마감일 출력

• d_dateList id를 가진 태그를 클릭하면 함수가 실행된다.
• 현재시간을 now, 마감일을 cris에 담는데 마감일은 기존에 구했던 d_dateList(마감일)을 .html로 담는다.
• gap은 마감일과 현재일을 감해 남은 일을 구하고 Math.floor을 통해 소수점을 버리고 마감일을 산출한다.
• 여기서 마감일이 0보다 크면 아직 마감일을 지나지 않은 것이기 때문에 남은 일수를 나타내주고 0이면 당일, 음수면 마감일이 지났다고 alert한다.

 

• Post 내부에 표시되는건 동일하기 때문에 따로 function을 만들지 않았다.
• 동일한 Ajax 조건이지만 add 순서가 2번째이기 때문에 index를 1로 준다.
• 만약 마감일이 null이 아니라면 txt2에 년/월/일만 보여주기 위해 .slice()를 이용하여 일 까지만 출력하고 split을 통해 일 이후는 잘라낸다.
• 그리고 d_dateList(마감일)에 .html(txt2)로 마감일을 넣어주고 css를 통해 inline 선언을 해주었다.
• 만약 마감일이 없다면 .html(‘마감일이 없습니다.’)를 통해 d_dateList에 마감일이 없음을 알린다.

오늘 실습 간 느낀점

오늘은 만든 코드를 가지고 Ajax로 나타내기 위해 자바스크립트를 이용하였다. 정말 급하게 배우고 이해가 정말 안되었던 과목 이었던 것만 기억이 나고 사실 정말 기억이 나지 않아 진행하기 전에 오전에 공부를 진행하고 오후부터 프로젝트 실습을 진행하여 진도를 많이 빼지는 못하였다.

 

프로젝트 마무리가 2일 남았다. 현재 아직 완성이 안된 기능도 있기 때문에 사실 완벽하게 완성하여 구동할 수는 없지만 완성된 기능부터 하나씩 합쳐서 조금이라도 더 완성에 가까울 수 있도록 더 힘써야겠다.
그래야 나중에 최종프로젝트 때 Spring과 결합하여 더 빠르게 완성하고 추가 기능을 구현해 볼 수 있는 기회가 있을 것 같다.

 

내일 마무리 힘내서 잘 구현 되었으면 좋겠다.