전체 글 썸네일형 리스트형 [ javascript / html / jsp] html template 사용하여 동적으로 댓글 작성 창 생성하기 개발환경 - sts4 - jsp - jstl - js 댓글 수정, 대댓글 작성의 경우 동적으로 해당 댓글 밑에 입력 창을 만들었다가 없앴다가 하는 작업이 필요하다. 원래는 수정, 대댓글 입력창을 따로 활용했었지만 리팩토링 과정에서 하나로 통합하는 것이 좋을 것 같다는 피드백을 받아 진행해보았다. 먼저 내가 동적으로 활용할 템플릿을 생성해주었다. 태그로 묶으면 간단하게 템플릿이 완성된다. 이 템플릿은 화면에 노출되지 않으며, 이를 화면에 보이게 하기 위한 importNode라는 작업을 한 뒤 화면에 동적으로 노출시킬 수 있다. 취소 완료 .. 더보기 [ajax / javascript] form.serialize() 로 데이터 전송, controller 에서 데이터 받기 function joinMemebership() { var formData = $('#joinForm').serialize(); if (confirm("회원가입을 진행하시겠습니까?") == true) { $.ajax({ url: "/member/join", type: "post", data: formData, dataType: "json", // contentType: "application/json; charset-utf-8", success: function(response) { let code = response.code if (code = 1) { console.log("SUCCESS : ", response); alert("회원가입이 완료 되었습니.. 더보기 [ javascript / ajax ]사용자 아이디 중복 검사, 이메일 중복 검사 로직 이벤트 핸들러 등록 부분 // 사용자 아이디 유효성, 중복 검사 $("#username").change(function(event) { checkDuplicateUsername($(this));}); 페이지 로드 시 이벤트가 등록 되도록 설정함. checkDuplicateUsername() 함수 호출 시 this 로 자기 자신의 element 를 넘겨주는 방식으로 작성 해당 element 에서 필드의 아이디값, value 등을 추출하여 분기처리를 하기 위함. 중복 검사 함수 로직 function checkDuplicateUsername(element) { let username = element.val(); if (!usernameRegTest(element, fieldId)) { retur.. 더보기 [ Javascript ] 카카오 주소 API 적용, 함수 활용도 높이기 (공통함수처리) 예전 부트캠프에서 레거시 프로젝트를 진행하는 과정에서주소 정보를 데이터베이스에 모두 넣고 이를 팝업으로 띄웠던 경험이 있다. sql 로 데이터를 insert 하는데만 시간이 엄청 오래 걸렸던 기억이 새록새록하다... 그때 그걸 하면서 주소가 계속 업데이트가 될텐데 상당히 번거롭겠다는 생각이 들었었는데 그리고 분명 다른 간편한 방법이 있을 거라고 생각했는데 어느덧 일경험을 진행하고 있는 지금 주소 api 를 드디어 활용해볼 기회가 생겼다. ㅎㅎ 좋았어... 어려운 게 아니니 간단하게 진행해보았다.일단 검색창에 다음 카카오 주소 API를 검색하고 사이트에 들어가 자신이 원하는 형태의 주소 api를 골라코드를 단순히 복사 붙여넣기를 하면 된다. 하지만 나는 여기서 이 함수를 다른 곳에서도 호출해서 .. 더보기 JSP에서 data set 활용하기 대댓글 구현 시 JSP에서 HTML 요소에 데이터를 저장하고 활용할 수 있다고 한다. 대댓글을 구현하기 위해서는 해당 댓글의 부모 댓글 아이디 값을 계속 가지고 있다가 넘겨줘야 하는데 이때 data set을 활용하면 매우 간편해진다. 그리고 이 저장한 값을 javascript 나 서버에서 해당 댓글의 대댓글을 식별하는데 사용할 수 있다. 이를 위해 HTML 요소에 'data-*' 속성을 사용할 수 있다. 특정 댓글에 답글달기 버튼을 클릭할 때 해당 댓글의 식별자를 javascript 로 가져와 서버로 전송하여 대댓글을 생성한다. .. 더보기 No primary or single unique constructor found for interface java.util.List java.lang.IllegalStateException: No primary or single unique constructor found for interface java.util.List java.util.List 인터페이스에 대한 주요 또는 단일 고유 생성자를 찾을 수 없다는 내용 즉, 컨트롤러에서 리스트 형식으로 받아올 때 적절한 메시지 컨버터로 자바 객체 매핑이 이루어질 수 있도록 @RequestParam 어노테이션을 붙여주자 에러가 해결되었다. 참고로 나는 Get 요청이었기에 @RequestParam 을 붙였으며, Post 요청일 경우에는 각각 적절한 어노테이션을 붙이면 된다. ✅ 참고자료 @RequestBody @ResponseBody 어노테이션 이해하고 사용하기클라이언트와 서버의 통신.. 더보기 [ Spring / fileUpload ] File Upload / File Download 기능 구현 개발 환경 sts 4 mybatis oracle xe 11g요구사항파일 업로드 각 게시글 업로드 시 파일 첨부파일 저장 시 게시글 별로 폴더 새로 생성해서 저장uuid + 업로드 파일 이름 형식으로 파일 저장 파일 다운로드 다운로드 받을 때는 uuid가 없는 원본 파일 이름으로 다운로드 파일 업로드 // 컨트롤러 @PostMapping("/board/write")public String insertBoard(BoardListDto dto, Model model, HttpSession session) throws Exception { Long userId = (Long) session.getAttribute(SessionConst.USER_ID); if (userId == null) { .. 더보기 [ Spring / Spring Boot ] 스프링 인터셉터 활용하여 인가작업 처리하기 ✅ 인터셉터를 활용하게 된 배경 게시판 프로젝트를 혼자서 공부하면서 만들던 중 드디어 로그인 이후 사용자의 요청을 구분해야하는 시기가 다가왔다! 로그인한 사용자들은 게시글 작성, 수정, 삭제 등을 할 수 있어야하고, 로그인하지 않은 사용자들은 게시글 조회 등의 작업을 할 수 있다. 그렇게 되면 게시글 작성, 수정, 삭제 로직마다 세션을 확인해서 세션을 갖고 있는 사용자인지 확인을 하는 로직을 아마 매번 넣어야할텐데매요청마다 이러한 로직을 작성하는 것은 코드의 중복을 초래한다. 이를 위해 따로 메서드를 작성하여 해당 메서드를 컨트롤러 단에서 처리할 수 있겠지만그러한 *공통 관심사는 다른 방법으로 해결하는 것이 바람직할 것 같다는 생각이 들었다. 사실 나는 부트캠프에서 프로젝트를 진행하면서 항상 .. 더보기 이전 1 2 3 4 5 6 ··· 20 다음
