도담도담

브라우저창을 쭉 내리다 보면 맨 위로 올려주는 버튼을 본적이 많을 것이다. 그 부분을 만들어보자. 심플하게, ↑ 이거면 끝이다. 여기에 조금 모양을 덧 붙여 주자면, See the Pen goingTop by lsj5634 (@zinisang) on CodePen. 이런식으로 해서 원하는 위치에 존재하게 하여 언제든 클릭 한번으로 맨 위로 돌아올 수 있게 해준다.

우선 기본적으로 modal 창이란 이런식으로 주변을 어두운 배경으로 만들면서 새로운 레이어가 나와서 주목시켜 확인할 수 있게 해준다. 또한 흔히 알듯이, 어두운 부분을 클릭하면 자동으로 화면을 닫아준다. modal 종류는 https://getbootstrap.com/docs/4.3/components/modal/ 에서 확인하며 사용할 수 있다. 모달창에 띄워줄 로그인 화면을 먼저 만든다. 아이디 또는 비밀번호를 잊으셨나요? 을 통해 모달창에 페이지 화면 전체를 replace 시킬 예정이다. modal 창 내부에 로그인 창 출력 LOGIN × 로그인 을 통해 위에서 만든 로그인 창 화면을 모달 창 안에 출력 부트스트랩의 모달 창을 사용하기 위해서는 아래의 라이브러리들을 포함시켜 줘야 한다. ~~~ 결과

게시글에 이미지 저장시켜서 올리기 이미지 파일을 올려서 폴더와 DB에 저장 시키고 나중에 다시 그 저장시킨 이미지를 불러오는 방법이다. 리뷰를 하는 게시글을 만드는 과정이다. 리뷰 작성 1 2 3 4 5 CSS 나 JS 내부까지 나타내지는 않았지만 결과적으로 얼핏 아래와 같은 화면으로 나오게 된다. 내용을 받는 컨트롤러는 아래의 과정을 통해 이미지의 이름을 날짜와 시간까지 확인하여 등록함으로써, 이미지의 이름이 겹치지 않게 DB에 저장시켜 준다. @PostMapping("/reviewWrite") public String reviewWrite(HttpServletRequest request, ReviewDTO dto, RedirectAttributes redirectAttributes, String co..

사용기술 및 개발환경 프로젝트 개발환경 운영체제 윈도우 10(Windows 10) IDE(개발 tool) 인텔리제이(IntelliJ IDEA 2021.01.03) 프론트엔드 타임리프(Thymeleaf) 백엔드 스프링 부트(Spring Boot) 개발언어 Java, HTML, CSS, BootStrap 데이터베이스 MariaDB (10.6.3) 데이터베이스 연동 Spring Data JPA 라이브러리 관리 Gradle 자바버전 JDK 1.8 기타 카카오 API (카카오 지도 API, 카카오 주소 API, 로그인) 역할 분담 내용 데이터수집 상세페이지작업 투입(지도api) 여행플랜 맛집,관광,축제 페이지 메인페이지 로그인, 로그아웃 회원가입 카카오/구글 API구현 마이페이지까지

쿼리메서드 작성 방법 주로 findBy~~ deleteBy~~ getBy~~ 와 같은 이름으로 시작하고, 필요한 필드 조건이나 AND, OR 와 같은 키워드를 조합하여 메서드의 이름만으로도 쿼리조건을 만들어 낼 수 있다. 메서드의 파라미터(매개변수) 는 키워드에 따라서 객수가 결정된다. 예) Between의 경우 범위를 지정하는 두가지 값이 필요하기 때문에 findByStartDateBetween 과 같은 메서드 이름을 작성할 수 있다. 실제 SQL은 select ~~~ where startDate between ? and ? 와 같은 형식으로 실행된다. 메서드의 리턴 타입 select를 하는 작업일 경우 List 또는 배열을 이용할 수 있다. 파라미터네 Pageable 타입을 전달하는 경우에는 반드시 ..

레이아웃 두 가지 방법을 지원 1. JSP 의 include와 같이 특정 부분을, 가져와서 포함 시키는 형태 th:insert : th:~~ 의 바깥쪽 태그는 유지하면서 태그의 시작과 끝 내부에 삽입하는 방식 th:replace : 기존 내용을 대체하는 방식 2. 특정부분을 파라미터 형태로 전달하여 내용에 포함하는 형태. th:fragment 그 외 th:block : HTML 의 역할을 하는 Thymeleaf 지원 태그 *참고 : 기존 버전에는 th:include 가 있었지만, 3.0 버전 이후로는 사라진다. include 방식 포함되는 쪽 HTML 1. 일부분만 포함되는 HTML 해당 시작 태그 내에 th:fragment="이름" "이름"은 포함하는 HTML 쪽에서 사용할 이름 예) 밑의 내용을 기준..

스프링 MVC 와 thymeleaf 스프링 부트에서는 별도의 설정을 통해 JSP등을 사용할 수 있지만, 스프링 부트의 원래 목적보다 빠르고 편리하게 개발하는 것을 지향하기 때문에 JSP보다는 쉽고 간결하게 UI를 해결할 수 있는 Template 플러그인을 사용하여 개발 기본적으로 FreeMarker, Mustache 등을 이용하여 개발 그 중에서 thymeleaf을 사용하는 이유 JSP와 유사하게 ${ }을 별도 설정 없이 바로 사용 가능 Model 에 담긴 객체를 JavaScript에서도 쉽게 처리 가능 연산, 포맷과 관련된 기능에 대한 추가 개발없이 사용할 수 있도록 지원 개발도구(즉, ~~.html) 파일로 생성하는데 문제가 없고, 해당 파일 호출시 확장자를 이용하지 않고 호출 가능 기존 JSP에서..