본문 바로가기

분류 전체보기85

[Front] 스크롤은 가능하되 스크롤 안 보이게 하기 (쉬움) 바로 들어가보자. 모달이 있다고 가정해보자. # 상위 DIV ID { width: 100%; height: 100%; overflow: hidden; } # 하위 DIV ID { width: 100%; height: 100%; overflow-y: scroll; padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */ box-sizing: content-box; /* So the width will be 100% + 17px */ } 부트스트랩 모달 기준으로 설명을 하자면? Modal title 출처: https://stackoverflow.com/questions/16670931/hide-scroll-b.. 2022. 9. 29.
[Spring Boot] 페이징이 어렵다고? 이렇게만 하세요 일단 VIEW 는 본인이 사용중인 템플릿에 아래 코드를 복붙한다 CONTROLLER @GetMapping("/아까 그 URL") String pagingList(Model model, Pageable pageable) { Page p = null; p = 사용하는서비스.findPagingList(pageable, "idx"); int totalPage = p.getTotalPages(); int nowPage = p.getPageable().getPageNumber() + 1; int startPage = Math.max(nowPage - 4, 1); int endPage = Math.min(nowPage + 4, p.getTotalPages()); model.addAttribute("boardList".. 2022. 9. 24.
[Spring Boot] 세상 쉬운 검색창(검색 로직) 만들기 1-2 (백 로직) 샘플 Entity는 Staff로 정하고 설명을 위해 제공 @Getter @Entity @NoArgsConstructor public class Staff { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String name; private Integer age; } Controller @Controller public class StaffController { private final StaffService staffService; public StaffController(StaffService staffService) { this.staffService = staffService; } @GetMappin.. 2022. 9. 24.
[Spring Boot] 세상 쉬운 검색창(검색 로직) 만들기 1-1 (View) 웹페이지하면 검색창 없는 곳이 드물정도로 검색창이 많은데 이 검색창 구현이 생각보다 엄청 쉽다는 것을 개발을 처음 접한 사람들은 모를 수 있다. 바로 구현해보자. 1. View단에서 텍스트를 입력할 수 있는 INPUT 태그를 만든다. 1-1. 위 INPUT 태그에 사용자가 입력한 값을 컨트롤러에 보낼 수 있도록 Form으로 감싸준다. ... 1-2. Submit 역할을 하는 버튼을 만들고 응용하고 싶다면 이를 검색이라는 텍스트 대신 아이콘으로 대신한다. 검색 1-3. [ 응용 ] 아이콘을 누르지 않고 그냥 엔터를 쳐도 값이 전달되도록 한다. function enterkey() { if (window.event.keyCode == 13) { document.getElementById("폼 ID").subm.. 2022. 9. 24.
[Spring] 모달 쉽게 띄우기 + 모달에 매개변수 값 전달하기 (타임리프) 1. 부트스트랩 5버전의 CDN 추가 2. 모달을 호출할 버튼을 만든다. data-target 에 모달 ID를 넣으면 모달이 호출되는 원리이다. Launch demo modal 3. 모달을 만든다 Modal title 이곳에 내용을 적어주세요 Close Save changes 4. [ 응용하기 ] 하드코딩을 하지 않는다면 변수값을 가져와야 할텐데 타임리프라는 템플릿 엔진을 사용하면서 모달 외부에서 사용한 타임리프 변수값을 가져오고 싶은데 방법을 모르겠고 제이쿼리나 자바스크립트로 어떻게 값은 가져왔는데 하필이면 동적 테이블이라 첫번 째 행의 의 값만 주구장창 나온다면? TH:ATTR을 활용한다. 어떻게? 4-1 [ 설명 ] 버튼은 아래처럼 data-target을 th:attr 안에 넣는다 th:attr=".. 2022. 9. 21.
[Spring] 객체지향 설계 5 원칙 SOLID란? feat.클린코드 객체지향 설계의 핵심은 자고로 응집도는 높고 결합도는 낮은 프로그램을 설계하는 것이다. 그렇다면 응집도는 무엇이고 결합도는 또 무엇일까? [ 응집도(Cohesion) ] 한마디로 내부 요소들의 연관성이다. 예를 들어 하나의 클래스에서 함수(method)와 변수가 통일된 목적을 가지고 연관되어 있다면 응집도가 높은 것이고 이 함수는 이 변수에 저 함수는 저 변수에 뒤죽박죽이라면 그 클래스는 다양한 목적이 있는 클래스가 되고 목적을 기준으로 더 쪼개질 수 있으므로 단일 목적으로서의 응집도가 낮다고 할 수 있다. 더 쉬운 예시: 메뉴가 하나뿐인 오래된 음식점을 생각해보자. 그 음식점의 모든 내부 요소들은 그 하나의 메뉴를 만드는 것이라는 목적으로 똘똘 뭉쳐서 연관성이 매우 높을 것이다. 반면 메뉴가 여러개인 .. 2022. 9. 21.
[jQuery] Datatable 로 쉽게 데이터 조회하는 테이블 만들기 1. CDN을 통해 외부 라이브러리를 쉽게 import 하기 2. 테이블을 만들면 된다 Email Name 3. 이제 늘 하던대로 VO나 Entity 하나 두고 html단에서 ajax 통신으로 컨트롤러->서비스->리포지토리로 가서 데이터를 긁어오면 된다. 아래는 샘플 서버사이드 스크립트 테이블 끗 2022. 9. 15.

티스토리툴바