• 제작 기간 : 21.9.10 ~ 9.23 (14일)

구성 화면

메인 화면

• -> 버튼을 클릭하면 다음 단계로 넘어간다.
• DONE 영역에는 버튼이 없다.
• 새로운 TODO 등록 버튼을 누르면 할일 등록 화면으로 넘어간다.
  
  

할일 등록 화면

• 빈칸을 모두 채운 후 제출하면 메인화면 TODO 영역에 새로운 todo list가 추가된다.
• 내용지우기를 누르면 모두 빈칸이 된다.
• 이전을 누르면 메인화면으로 돌아간다.
  

배운 것

• 서블릿, mysql을 사용하여 DB와 데이터를 주고 받을 수 있다.
• 리다이렉트, 포워드를 사용할 수 있다.
• Ajax로 서블릿으로부터 받아온 데이터를 사용할 수 있다.
• jstl, el로 받아온 데이터를 활용할 수 있다.
• js로 받아온 데이터를 활용할 수 있다.
• 서블릿에서 자바 데이터를 json으로 변환할 수 있다.

문제, 해결

서블릿, jsp 파일이 test 폴더에서 만들어 지지 않는다.

• 이유를 모르겠어서 main 폴더 내에 test 폴더를 만들어서 사용. 조잡해보인다.

jsonArray를 서블릿에서 jsp로 넘긴 후 해당 데이터를 사용하는 방법

• 자바스크립트로 사용할 경우 <% %>로 json을 받은 후 자바스크립트 JSON.parse(json)을 사용한다. 자바의 List<TodoDto>가 자바스크립트 객체 배열 형태로 변환되기 때문에 쉽게 사용할 수 있다.
• jstl, el로 사용하라는 요구사항을 뒤늦게 알게되었다.

jsonArray를 jstl, el으로 사용하는 방법

• 자바스크립트에서는 json의 데이터를 사용하기 편리하다. jstl, el는 json의 변환과정이 없이 List<TodoDto> 형태로 넘겨받아 사용하는 것이 편리하다.

get은 파라미터가 보이지만 post는 보이지 않는다.

• 두 방식이 가지는 특징이다.
• GET 방식
  • 입력한 데이터를 URL에 붙여서 전송한다. 데이터가 다 보이므로 보안에 취약하다.
  • 전송할 수 있는 데이터는 256바이트를 넘을 수 없다.
  • 전송속도는 POST 방식보다 빠르다.
• POST 방식
  • 입력한 데이터를 본문 안에 포함해서 전송한다.
  • 입력한 데이터가 URL에 보이지 않으므로 GET 방식보다 보안에 우수하다.
  • 전송할 데이터의 길이에 제한이 없다.
  • 복잡한 형태의 데이터를 전송할 때 유용하다.

get은 한글이 깨지지만 post는 깨지지 않는 이유

• 서블릿 doPost 메소드에 request.setCharacterEncoding("UTF-8");를 붙여넣어서 해결. jsp에서 post로 받는 경우이다.
• https://sleepyeyes.tistory.com/25
• 해당 링크에 인코딩, 디코딩 설명이 잘 되어있다.

URL /의 유무가 끼치는 영향

1. /Todo/TodoTypeServlet -> http://localhost:8080/Todo/TodoTypeServlet로 이동. 원하는 결과
2. Todo/TodoTypeServlet -> http://localhost:8080/Todo/Todo/TodoTypeServlet로 이동
3. /TodoTypeServlet -> http://localhost:8080/TodoTypeServlet로 이동

ajax를 사용하여 jsp에서 서블릿으로 값을 넘겨주는 방법

• 두 방식 모두 서블릿에서 request.getParameter("key")로 파라미터 값을 받을 수 있다.

GET 방식

• 데이터를 URL에 붙여서 전송

var xhr = new XMLHttpRequest();
xhr.open('GET', '/server', true);

xhr.onload = function () {
  // Request finished. Do processing here.
};

xhr.send(null);
// xhr.send('string');
// xhr.send(new Blob());
// xhr.send(new Int8Array());
// xhr.send(document);

POST 방식

• 데이터를 BODY에 넣어서 보낸다.
• 따라서, 헤더 필드 중 BODY의 데이터를 설명하는 Context-Type이라는 헤더 필드가 들어가고 어떤 데이터 타입인지 명시한다.
• 컨텐츠 타입
  • application/x-www-form-urlencoded : GET과 같이 key와 value 쌍으로 body에 데이터를 넣는다. 똑같이 구분자 &를 쓴다.
  • text/plain : body에 단순 txt를 넣는다.
  • mulipart/form-data : 파일 전송할 때 많이 쓰인다. body의 데이터를 바이너리 데이터로 넣는다는 것을 알려준다.

var xhr = new XMLHttpRequest();
xhr.open("POST", '/server', true);

//Send the proper header information along with the request
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function() { // Call a function when the state changes.
    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
        // Request finished. Do processing here.
    }
}
xhr.send("foo=bar&lorem=ipsum");
// xhr.send(new Int8Array());
// xhr.send(document);

• 출처
  • https://bbbea.tistory.com/65
  • https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send

버튼을 클릭하면 원하는 결과가 발생하지 않는 경우가 자주 생긴다.

<!-- 버튼 구성 -->
<button class="todo-list__next-btn" name="${todoList.todoId }">
  <i class="fas fa-arrow-right"></i>
</button>

<script>
let target = event.target
// 버튼의 자식태그(i)가 선택될 경우 부모태그(버튼)로 target 변경
if (target.className != "todo-list__next-btn" ) {
  target = target.parentNode;
}
</script>

• 버튼의 자식태그 i를 클릭할 경우 event.target이 i가 되기 때문에 발생한 에러였다.
• if문을 사용하여 i가 클릭될 경우 부모태그 button을 지정하도록 코딩했다.