분류 전체보기
-
javascript 함수 선언식, 함수 표현식HTML, CSS, JavaScript 2021. 11. 14. 01:23
댓글 수정 기능을 개선하다 이 개념이 헷갈려 많은 삽질을 하였다. 먼저 함수 선언식은 function name(a) { ... } 이런 식으로 함수를 만들고, 함수 표현식은 let name = function(a) { ... } 이런 식으로 함수를 만든다. 함수 선언식은 예를 들어 func(); function func() { ... } 처럼 함수가 만들어지기 전에 사용해도 문제가 없다. 왜냐하면 자바스크립트 내부적으로 선언식으로 작성된 함수를 먼저 만들어 놓기 때문이다. 하지만 함수 표현식으로 예를 들어 func(); let func = function() { ... } 와 같이 사용하면 오류가 난다. 왜냐하면 이는 func라는 변수를 만들어 그 안에 어떤 특수한 값이 들어간 것처럼 인식하기 때문이다...
-
자바스크립트로 댓글 수정 만들기HTML, CSS, JavaScript 2021. 11. 13. 00:51
자바스크립트로 댓글을 구현했을 때 처음 문제는 DOM에서 어떻게 수정 버튼을 누른 그 리스트를 찾아내는가였다. 처음에는 단순히 id로 해결하려 했지만, 당연히 댓글의 개수가 두 개 이상이 되면 먹히지 않았다. 그래서 알아낸 것이 class로 정의한 다음, addEventListener('click', function(e) {...}) 에서 e.target을 이용하는 것이었다. e.target은 이벤트가 생긴 그 노드를 반환하는데, parentNode를 이용하여 li를 찾아내고, li.getElementsByClassName()을 이용하여 각각의 element에 접근할 수 있었다. 두 번째 문제는 수정 버튼을 눌렀을 때 수정 폼으로 리로딩 없이 만들면서, 수정 폼으로 바뀐 상태에서 다른 댓글의 수정 버튼을..
-
spring restcontrollerSpring Boot 2021. 11. 13. 00:34
@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]가 나온다...
-
spring boot 배포하기Spring Boot 2021. 11. 10. 15:58
gradle을 이용하면 bootjar를 실행하여 jar 파일을 만들 수 있다. 처음에는 배포를 heroku를 이용하여 했다. 예전에 heroku에 gradle을 배포하였다가 안됐었는데, 이번에는 jar 파일을 직접 배포하는 방식을 사용했다. 그러면서 저번에 gradle로 배포하지 못했던 이유를 알았는데, Procfile이 반드시 필요한 것이었음에도 불구하고 저번에는 작성하지 않았다. 그러므로 배포가 안되었던 것이다. h2 데이터베이스를 이용하여 배포했는데, heroku는 30분이 지나면 휴면 상태로 돌아가 메모리가 초기화되어 작성했던 데이터들이 날아갔다. 그래서 mariadb를 사용하려 했으나 무료로라도 addon을 사용하려면 카드를 등록해야 했다. 그래서 mariadb의 url에 주목했다. 공유기를 사..
-
rest api 활용하기HTML, CSS, JavaScript 2021. 11. 5. 01:12
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[..