전체 글
-
[DBeaver] DB 전체 내보내기프로젝트/설정 등 2023. 7. 31. 00:56
목적 DBeaver를 사용할 때 특정 DB의 데이터를 내보내는 방법 정리 내보낸 dump 파일 새 DB에 가져오는 방법 정리 프로젝트 진행이 끝나고 외부 DB에 있는 데이터를 로컬로 옮기는 과정을 진행했다. 별건 없지만 그 과정을 알아보도록 하자. [DB 내보내기] 먼저 DBeaver를 열고 내보낼 DB 우클릭 - 도구 - Dump database 순으로 클릭한다. 그럼 아래와 같은 화면이 나온다. 모든 테이블을 내보낼 것이므로 다 선택된 상태로 뒀다. 뭔지 잘 몰라서 기본설정으로 두고 경로만 정해준뒤 Start를 눌러줬다. 위와 같은 화면이 뜨면서 dump 파일이 생성된다. [DB 가져오기] 다음으로 옮길 DB를 보자. 여기선 로컬에 옮길 것이므로 로컬에 DB하나를 생성해줬다. 해당 DB 우클릭 - 도..
-
[JavaScript] SpringBoot : 무한 스크롤(Intersection Observer API)카테고리 없음 2023. 7. 28. 22:24
목적 스크롤을 내리면 새로 게시물 리스트를 불러와 생성하는 기능 구현 무한 스크롤 기능 구현 보통 인스타그램이나 페이스북 같은 SNS 피드를 보면 화면을 아래로 계속 스크롤 해도 새로운 게시물이 무한하게 나오는 것을 볼 수 있다. 이번 프로젝트에서도 이와 같은 기능을 구현하고자 했는데, 그 과정을 살펴보자. 우선 크게 흐름을 설명하면 이렇다. 리스트 게시판에서 스크롤을 아래로 내려서 가장 하위에 위치한 요소가 감지됨. Ajax로 아래 이어 붙일 페이지에 대한 정보 서버에 요청 서버는 DB에 저장되어 있는 게시물을 가져와서 Ajax에 응답 응답 받은 데이터를 가지고 동적으로 요소 생성 위 과정의 결과는 아래와 같다. 오른쪽에 스크롤 길이를 보면 내려갈 때 계속해서 아래쪽에 새 게시물이 생성되는 것을 볼 수..
-
[Java] SpringBoot : 기념일 날짜 계산하기(util.Date, sql.Date, Calendar 변환, 지난 일 및 남은 일 계산, list 정렬)프로젝트/기능 정리 2023. 7. 27. 22:06
목적 특정 날짜를 기준으로 오늘까지 일(days)수와 특정 날짜까지 남은 일수 구하기 기념일 계산을 위해 시작일을 기준으로 100일, 200일, ~년 ··· 단위 구하기 오늘까지의 일수 이상의 기념일만 4개씩 보이도록 구현 진행한 프로젝트의 마이페이지에 등록된 날짜를 기준으로 기념일을 보여주는 기능이 필요했다. 가진 정보는 회원이 등록한 날짜 하나이므로 해당 값을 통해 자동으로 이후 날짜를 계산해주는 흐름을 만들어보도록 하자. 완성된 화면은 아래와 같다. 만약 시간을 몇 달 돌려보면 아래와 같다. 보통은 DB에 등록되어 있는 날짜 데이터를 어떤 모델에 담아 가져온 후 작업을 하게되지만, 날짜를 테스트하기 위해 아래 과정을 진행해줬다. [Java] @RequestMapping("/mypage/main.do..
-
[JavaScript] SpringBoot : 다중 이미지 Ajax 전송(Ajax DB 테이블 생성, Ajax promise, <form> + Ajax 데이터 전송)프로젝트/기능 정리 2023. 7. 24. 15:10
목적 다중 이미지 Ajax 전송 기능 구현 데이터 + Ajax 데이터 동시에 서버 전송 처리 비동기 방식 순차 처리를 위한 promise 사용 이전 글에서 다중 이미지 미리보기 처리과정을 정리했다. 폼을 다시 보면 아래와 같은데, 텍스트와 이미지를 한번에 서버로 전송해야 하는 구성이다. 이전 글과 같은 방식으로 이미지를 입력 받고, 다른 텍스트들이 채워지면 submit 버튼(게시)이 활성화 되도록 했다. submit을 하게되면 텍스트 데이터는 태그에 의해 POST 방식으로, 이미지 배열은 Ajax에 의해 POST 방식으로 서버에 넘겨주도록 만들었다. 하나씩 정리해보자. [JSP] 우선 태그 구조는 아래와 같다. 관련 설명은 여기 제목 사진 파일선택 해시태그 장소 게시 흐름을 보기 위해 적어두지만 따로 설..
-
[JavaScript] SpringBoot : 다중 이미지 미리보기(<input type = "file">, 이미지 리스트 동적 생성, 이미지 추가 및 삭제)프로젝트/기능 정리 2023. 7. 23. 22:24
목적 파일 여러개 미리보기 기능 구현 미리보기 이미지 클릭시 이미지 삭제 미리보기 이미지들을 서버에 전송할 수 있도록 배열에 저장 이번 프로젝트에서 메인 기능 중 하나인 갤러리는 여러 이미지를 서버에 보내고, 서버로부터 여러 이미지를 받아와서 화면에 뿌려줘야 한다. 가장 처음 단계는 태그를 통해 이미지 파일을 받아서 화면에 미리보기 표시를 해주는 것이다. JS로 어떻게 처리했는지 정리해보도록 하겠다. 결과화면은 아래와 같다. [JSP] 파일선택 우선 JSP 쪽의 태그는 위와 같다. 이전에 프로필 사진 기능 구현 내용을 정리하면서 이미지를 받는 태그의 name을 잘 설정해줘야 한다고 했다. 이유는 Spring에서 해당 name을 가지고, 전달받은 모델의 setter를 찾아 매핑하기 때문이다. 만약 Ajax..
-
[JavaScript, CSS, jQuery] SpringBoot : 캐러셀, 이미지 터치 슬라이드프로젝트/기능 정리 2023. 7. 18. 10:14
목적 화면 터치를 감지하여 터치 드래그 시 이미지 슬라이드 전환 기능 구현 이전 글에서 한 화면에 꽉 차는 한 페이지 자체를 슬라이드 하는 기능을 만들어봤다. 페이지 슬라이드 기능에서는 터치를 감지해서 화면을 전환하지 않았지만, 상세 글 보기에 나오는 이미지 캐러셀은 인스타그램 게시물처럼 횡방향 터치 이동 시 전환되도록 만들고 싶었다. 아직 데이터가 없어서 이미지 소스나 개수 등을 동적으로 생성해서 처리하진 않은 상태지만, 슬라이드 기능이 메인이므로 정리해보도록 하겠다. 완성본은 아래와 같다. [HTML] 먼저 html 태그 구조는 아래와 같다. 야경 본 날 반포 한강공원 제목영역과 라디오 버튼은 흐름을 모두 보기 위해 가져왔고, 메인인 슬라이드 이미지 영역은 아래 그림과 같다. 태그 ID를 표시하기 위..
-
[JavaScript, CSS] SpringBoot : 페이지 슬라이드프로젝트/기능 정리 2023. 7. 15. 20:12
목적 페이지 전환없이 좌우 슬라이드 기능 구현 스크롤 위치에 상관 없이 폼이 슬라이드로 등장했다가 제거시 슬라이드로 사라지도록 함. JavaScript와 css만 이용 진행중인 프로젝트의 갤러리 메인 페이지에서 글쓰기 버튼을 누르면 화면 오른쪽에서 슬라이드로 폼이 등장하는 기능을 만들고 싶었다. 나중에 웹뷰 앱으로 전환할 생각인데, 모바일 앱 UI상으로 페이지 새로고침은 자연스럽지 않으니 자연스레 연결해주는게 좋아보였기 때문이다. 근데 뭐.. 기본적으로 JS와 CSS, HTML밖에 다룰 줄 몰라서 여러 방법을 찾아봤으나.. 해결하지 못했다. fadeIn, fadeOut은 페이지 호출시에 opacity 조절을 통해 나름 자연스러워 보이게 할 수 있지만 슬라이드는(보기에는 별다를게 없어보이는데..) 어떻게 ..
-
[JavaScript] SpringBoot 프로젝트 : 장소 검색(Kakao 지도 API)프로젝트/기능 정리 2023. 7. 14. 00:52
목적 카카오 지도 API를 이용해 장소를 검색하고 주소를 찾아본다. 지도나 마커 표시 없이 장소 검색 목록만 가져와서 표시한다. 갤러리 형태의 게시판을 만드는데 글을 등록할 때 장소를 검색해서 함께 등록할 수 있는 기능을 만들고자 했다. 카카오지도 샘플에는 검색과 더불어 마커를 지도에 표시하는 기능도 있지만, 여기서는 검색된 목록과 주소만 필요하여 필요 없는 코드는 제거하고 기록을 남겨두도록 하겠다. 우선 미완 상태지만 현재 페이지 모습은 아래와 같다. 제일 하단에 위치한 장소를 입력하는 과정을 알아보겠다. [Kakao 지도 API] 일단 카카오지도 API 를 사용하기 위해서는 API KEY가 필요하다. KEY 발급을 위해 카카오 개발자사이트에 가입하자. https://developers.kakao.co..