2018-04-24 실습시간은

1. 지난시간에 하다가 마지막에 다 못한 getpost.html을 변형해서 URL을 입력받아 그곳으로 GET이나 POST를 요청을 전송하는 폼을 템플릿을 이용해 동적으로 생성하는 예제를 마무리하고
2. 중간고사 문제풀이를 하고 채점결과 확인하는 시간으로 하겠습니다.

마지막에 잘 안 되었던 부분은 폼이 동적으로 생성은 되는데 submit이 동작하면서 페이지가 리로딩되는 바람에 생성했던 폼이 금방 없어지는 것처럼 보였죠. 아래 깃헙 gist에 지난 실습시간 마지막 코드 상태를 복사해 붙여넣어 놓았습니다.

https://gist.github.com/kyagrd/3d457756345c69e8408a5cd3871c77d3

이것은 동적으로 생성하기 위한 <input> 태그로 만든 인터페이스를 <form> 태그로 감쌌기 때문인데 (gist 코드의 30-34줄), <form> 태그는 method와 action 속성을 설정하지 않더라도 기본적으로 GET을 현재 문서 URL로 보내게 되어 페이지가 리로딩됩니다. 이것만 하지 않으면 지난 실습시간에 하던 예제는 잘 동작하게 됩니다. 마지막에 시간이 없어서 이걸 고치려면 어떻게 해야 되는지까진 못했죠. submit 버튼의 submit의 기본동작을 막고 click 이벤트에 등록한 자바스크립트 함수만 실행되게 하는 방법은 대략 두가지가 있습니다.

1. 그냥 감싸고 있는 <form> 태그를 지운다. (가장 정통적으로 올바르다고 권장하진 않지만 귀찮아서 많이들 쓰는 방법 ...)
2. <form> 태그는 그대로 두되 <form>의 action 속성이나 이벤트 핸들러를 변경해 submit 이벤트의 기본동작을 막는다.

문제풀이를 위한 JS Bin 주소: https://jsbin.com/jihabew/edit?html,output