재원블로그 재원블로그

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

@PostMapping("/api/user") public String createUser(@RequestBody UserRequestDto requestDto) { return userService.create(requestDto); } 이 메소드의 리턴값은 String이고 RestController 안에서 정의되었다. ajax로 POST를 한 이후 값을 이용하기 위해 .done(function(result) {...})를 사용해 봤지만 전혀 작동이 되지 않았다. 이유는 String으로 보내진 값이 문자열로 인식이 안되고 오류 메시지처럼 인식이 되었기 때문이다. 그리하여 .fail(function(error) { alert(error); }) 를 넣어 실행해 보면 [object object]가 나온다...

gradle을 이용하면 bootjar를 실행하여 jar 파일을 만들 수 있다. 처음에는 배포를 heroku를 이용하여 했다. 예전에 heroku에 gradle을 배포하였다가 안됐었는데, 이번에는 jar 파일을 직접 배포하는 방식을 사용했다. 그러면서 저번에 gradle로 배포하지 못했던 이유를 알았는데, Procfile이 반드시 필요한 것이었음에도 불구하고 저번에는 작성하지 않았다. 그러므로 배포가 안되었던 것이다. h2 데이터베이스를 이용하여 배포했는데, heroku는 30분이 지나면 휴면 상태로 돌아가 메모리가 초기화되어 작성했던 데이터들이 날아갔다. 그래서 mariadb를 사용하려 했으나 무료로라도 addon을 사용하려면 카드를 등록해야 했다. 그래서 mariadb의 url에 주목했다. 공유기를 사..

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[..

@OneToMany와 @ManyToOne을 썼다고 해서 양방향이 되지 않는다. 2개의 단방향일 뿐이다. 이를 양방향으로 바꿔 주기 위해서는 @OneToMany에 mappedBy 속성을 써서 @ManyToOne의 객체 이름이 붙어야 한다. 또한 @OneToMany에 CascadeType.ALL 속성을 추가하면 리스트를 삭제했을 때 그 안의 객체들도 같이 삭제된다.

@GeneratedValue 를 아무 strategy 없이 사용하면 GenerationType.AUTO가 적용된다. 처음에는 아무 strategy 없이 사용했는데, 이렇게 하면 게시글의 id와 댓글의 id가 서로 중첩되어 게시글의 번호가 실제 게시글 수와 맞지 않는 경우가 생겼다. 이를 해결하기 위해서는 GenerationType.IDENTITY를 사용하면 된다. 그러면 게시글의 번호와 댓글의 번호가 서로 독립적으로 작용하게 된다.

$.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를 수행하기 위해..

@Override public boolean isUserExist(UserDto userDto) { User user = userRepository.getById(userDto.getId()); if (user == null) { return false; } else { if (user.getPassword() != userDto.getPassword()) { return false; } else { return true; } } } 입력한 비밀번호를 DB에 저장된 비밀번호와 비교하는 메소드이다. 이 때 C++ 문법에 익숙했던 나는 != 연산자를 이용하여 String 간의 비교를 했다. 그러나 계속 false가 리턴되어 제대로 입력해도 로그인이 안되는 문제가 발생했다. 그러다 Intellij에 경고문을 ..