재원블로그 재원블로그

댓글 수정 기능을 개선하다 이 개념이 헷갈려 많은 삽질을 하였다. 먼저 함수 선언식은 function name(a) { ... } 이런 식으로 함수를 만들고, 함수 표현식은 let name = function(a) { ... } 이런 식으로 함수를 만든다. 함수 선언식은 예를 들어 func(); function func() { ... } 처럼 함수가 만들어지기 전에 사용해도 문제가 없다. 왜냐하면 자바스크립트 내부적으로 선언식으로 작성된 함수를 먼저 만들어 놓기 때문이다. 하지만 함수 표현식으로 예를 들어 func(); let func = function() { ... } 와 같이 사용하면 오류가 난다. 왜냐하면 이는 func라는 변수를 만들어 그 안에 어떤 특수한 값이 들어간 것처럼 인식하기 때문이다...

자바스크립트로 댓글을 구현했을 때 처음 문제는 DOM에서 어떻게 수정 버튼을 누른 그 리스트를 찾아내는가였다. 처음에는 단순히 id로 해결하려 했지만, 당연히 댓글의 개수가 두 개 이상이 되면 먹히지 않았다. 그래서 알아낸 것이 class로 정의한 다음, addEventListener('click', function(e) {...}) 에서 e.target을 이용하는 것이었다. e.target은 이벤트가 생긴 그 노드를 반환하는데, parentNode를 이용하여 li를 찾아내고, li.getElementsByClassName()을 이용하여 각각의 element에 접근할 수 있었다. 두 번째 문제는 수정 버튼을 눌렀을 때 수정 폼으로 리로딩 없이 만들면서, 수정 폼으로 바뀐 상태에서 다른 댓글의 수정 버튼을..

ajax를 이용하여 POST, PUT, DELETE는 어렵지 않게 구현할 수 있다. 그러나 항상 GET으로 json을 받아와서 화면에 어떻게 뿌리는 지 잘 몰라 thymeleaf를 이용하여 렌더링 하곤 했었다. 이를 제이쿼리를 통해 해결했다(물론 자바스크립트만으로도 가능하다) $(function() { $.ajax({ url: '/api/board', method: 'GET', dataType: 'json' }).done(function(json) { let boardBody = document.getElementById('boardBody'); for (const key in json) { boardBody.innerHTML += '' + '' + json[key].id + '' + '' + json[..

$.ajax({ type: 'POST', url: '/post/api', dataType: 'json', contentType: 'application/json; charset=utf-8', data: JSON.stringify(data) }) @PostMapping이 적용되어 있는 메소드의 리턴 값이 void라고 가정한다면 위 ajax는 오류를 발생시킨다. 그 이유는 dataType 때문이다. dataType은 서버에서 뷰로 받아오는 데이터의 형식을 지정한 것인데, 서버에서 아무것도 리턴하지 않으니 오류가 나는 것이다. 반대로 contentType은 뷰에서 서버로 데이터를 전송할 때 데이터 형식을 지정한 것이다. 예전에 rest api 형식의 게시판을 직접 짤 때 PUT이나 DELETE를 수행하기 위해..

login.html 아이디 비밀번호 loginScript.js var id = document.getElementById('id'); var password = document.getElementById('password'); var submit = document.getElementById('loginSubmit'); const realId = 'abc'; const realPassword = '123'; submit.onclick = function() { if (id.value !== realId || password.value !== realPassword) { alert("사용자 정보가 맞지 않습니다."); } else { alert(realId + '님 반갑습니다.'); } } getEleme..