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..

프로젝트 아래처럼 만들 것. com.study.board member controller vo service board controller vo service reply 로그인 페이지 아이디 비밀번호 입력창 - 로그인 버튼 , 조인 버튼 로그인 버튼 게시글 목록 페이지로 이동 조인 버튼 회원가입 페이지로 이동 화면 분할 templates 폴더 밑에 content(내용부 html 모음) 폴더와 fragment 폴더 만들어 줌 content 폴더 안에 member/board 폴더 밑에 화면에 보여질 해당 html들 작성하면 됨. fragment(모든 html이 열리는 파일 모음)에 layout.html 생성 아래 코드 작성하여 화면 분리 fragment 폴더 밑에 header.html 생성 아래 코드 작성 ..

방법1. test1에서 name이라는 이름으로 데이터가 넘어오면 Controller에서는 변수에 넘어오는 이름이랑 똑같이 받아옴. 방법2. 매개변수에도 어노테이션이 들어올 수 있다. @RequestParam : 요청할 때 넘어오는 파라메터(데이터)를 컨트롤(? name : 넘어오는 데이터 이름 @GetMapping("/test2") public String test2(@RequestParam(name = "name") String name) { return "test2"; } 넘어오는 데이터의 이름에 따라서 변수명이 달라도 데이터를 받을 수 있다. @GetMapping("/test2") public String test2(@RequestParam(name = "name") String data) { Sy..

멤버 테이블 생성 후 사용할 controller 등 다 만들어주고 MemberServiceImpl에 DB연결 작업을 위해 아래 코드 작성 @Autowired private SqlSessionTemplate sqlSession; spring에서 input 버튼으로 페이지 이동할 때 문법 특이함. 버티컬바에 감싸서 @{}에 페이지 이동할 곳 넣어줌. 타임리프에서 form 태그 제공해주는 방법으로 데이터 넘기기도 가능. th:action 사용 / 페이지 이동은 전부 @{}에 작성 th:object="${memberVO}" 속성 넣어주고 input태그에 th:field="*{변수 이름}" 속성을 넣어주면 MemberVO의 변수와 동일하게 id, name 값 자동으로 넣어줌 //회원 등록 화면 이동 @GetMap..