ajax(비동기 통신, 자바스크립트) -동기 : 페이지 이동과 데이터 전송이 동시에 일어난다 -비동기 : 페이지 이동을 하지 않아도 데이터 전송 가능 시스템의 성능을 향상 시키기 위해 비동기 씀. 두가지 방법 경우에 따라 적절하게 사용함. ajax 연습용 테이블 3개 생성 프로젝트 새로 생성했기 때문에 db작업 다 해주기! test_ajax.html 생성 후 버튼 만들어서 ajax 기능 test html - js 연결 작업 하기 예제1. ajax 객체 생성 하기 //ajax 예제 1 function ajax_test1(){ //ajax 통신을 위한 객체 생성 const xhr = new XMLHttpRequest(); //controller로 이동 //첫번째 매개변수 : 'post', 'get' //두번..

board_detail.html에서 댓글 입력 가능, 댓글 리스트 조회 되어야 함. 댓글 입력 기능 댓글 입력창 만들기 댓글 replymapper에서 댓글 등록 insert문 작성 INSERT INTO SPRING_REPLY ( REPLY_NUM , REPLY_CONTENT , REPLY_WIRTER , BOARD_NUM ) VALUES ( (SELECT 'REPLY_'||LPAD(NVL(MAX(TO_NUMBER(SUBSTR(REPLY_NUM, 7))), 0) + 1, 3, '0') FROM SPRING_REPLY) , #{replyContent} , #{replyWriter} , #{boardNum} ) ReplyService에 메소드 생성 //댓글 등록 void insertReply(ReplyVO r..

아래의 형태로 페이징 처리 설정 이전 1 2 3 4 5 다음 한 페이지에 10개씩 게시글 목록 조회(최신글 기준) 해당 페이지를 클릭하면 그 페이지에 뜨는 게시글 10개 조회하는 방법으로 처리 페이지 처리를 할 수 있는 페이지 정보를 담고 있는 PageVO(객체) 생성 , getter/setter도 생성 public class PageVO { private int nowPage; //현재 선택된 페이지 번호 private int totalDataCnt; //전체 데이터(게시글) 수 private int beginPage; //화면에 보이는 첫번째 페이지 번호 이전 1 2 3 4 5 다음 1번자리 해당 private int endPage; //화면에 보이는 마지막 페이지 번호 5번자리 해당 private ..

Docs - introduction - 두번째 소스에서 아래 것들 적용할 html의 css/ js 자리에 붙여 넣기 css js Components - buttons 버튼 형식(? 볼 수 있음 Primary Secondary Success Danger Warning Info Light Dark Link - BootStrap 샘플 BootStrap의 버튼들 Layout으로 화면 구역 나누기 반드시 모든 내용은 특정 클래스에 감싸서 만들 것. div1 div2 div3 div4 div5 div6 div7 div8 반응형 (pc > 스마트폰 화면 크기에 따라 화면 사이즈 자동 조절) Navbar Home Features Pricing Disabled 작게 하면 메뉴바 달라짐

위치 : static 폴더 아래 (css/js/img) 외부 css와 html 연결 시 link 태그 사용 title 태그 아래 작성 href 작성 시 주의! ccs/js 기준 폴더 : static에 접근하려면 무조건 맨 앞에 / 있어야 된다. fragment 사용 시 외부 css, js 연결하기 fragment 사용 시 위와 같이 css/script 연결 태그들이 th:block 밖에 있기 때문에 적용 안 됨. 그리고 화면 따라 css, javascript 매번 바뀌기 때문에 css, javascript도 연결이 바뀔 수 있게 layout.html에 아래 코드 추가 css 코드 위치 : 전 js 코드 위치 : 태그 전 fragment.html에는 아래와 같이 css 불러오는 th:block / cont..

Spring 구조 잡기 메뉴 본문 분리 jsp의 화면 분할 > template spring > fragment (thymeleaf에서 지원하는 기능) build.gradle에 dependencies 맨 첫줄에 아래 코드 넣어야 화면분할 기능(fragment)을 제공해준다. implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect' 저장 후 gradle refresh 해주기! 기능을 실행할 컨트롤러 만들어줌 templates 밑에 fragment와 content 폴더 생성 fragment폴더 안에 header.html 생성 - 메뉴 부분 user_layout.html 생성 - 유저가 보는 모든 html 열리는 layout 파일 user_layout..