- 아이디 중복 검사를 할 수 있는 기술 : ajax, axios, fetch
Ajax
- ajax의 동기/비동기 통신 매커니즘
- 동기식 통신 메커니즘의 문제점은 클라이언트가 요청했을 때 서버가 응답을 해주기까지 아무것도 할 수 없음(로딩 지연에 따른 버벅댐을 느낌)
- 비동기식
- pome태그나 하이퍼링크가 아닌 자바스크립트 코드만으로 브라우저가 서버측에 요청을함
- 동기식에 비해서 클라이언트는 브라우저 화면을 계속 보고 있음
- 로딩 지연에 따른 불편함이 없음
- 구글에서 Jquery 검색
- 다운로드에서 CDN 중 jsDelivr 선택
- Copy 선택 후 Copy URL 선택
- URL 주소 : https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js
- JSON(Java Script Object Name) : 자바스크립트 객체 표기법
Json 사용 준비
- MVN 저장소에서 jackson-databind 검색
- 최신 버전 선택 후
- 코드 복사 후
- pom.xml에 붙여넣기
- MVN 저장소에서 jackson-dataformat-xml 검색
- 최신 버전 선택 후
- 코드 복사 후
- pom.xml에 붙여넣기
- MVN 저장소에서 gson 검색
- 최신 버전 선택 후
- 코드 복사 후
- pom.xml에 붙여넣기
- 위 3가지는 자바 오브젝트를 Json으로 변환할 때 사용하고 스프링이랑 연동이 잘 됨.
- 이 중 gson은 사용자가 직접 변환시킬 수 있음
thumbnailator 사용 준비
- MVN 저장소에서 thumbnailator 검색
- 최신 버전 선택 후
- 코드 복사 후
- pom.xml에 붙여넣기
- thumbnailator : 썸네일이미지(원본이미지)를 대상으로 사진 크기 편집을 손쉽게 할 수 있는 메서드를 제공해줌
아이디 중복확인 버튼 추가
- join.jsp에 button 코드 추가
- 화면 확인.
- 우측에 나왔으면 하지만 아래에 나옴
- jQuery를 사용할 수 있게 join.jsp 하단에 script src에 URL 입력
- jQuery로 적는 대신 짧게 $로 사용 가능
- 아이디 중복확인 버튼을 누르면 입력상자에 입력된 아이디를 가지고 아이디가 중복인지 확인하는 요청을 서버에 보내야함
- 입력 내용을 서버에 보내야함
- 입력 값이 없을 때는 서버에 보낼 필요가 없음- val( )이란 함수는 들어있는 String을 꺼내줌
- id를 입력했으므로 id를 꺼내줌
- 빈칸이면 get, 내용이 있으면 set- 사용자가 직접 타이핑해서 입력할 수 있는 입력 상자는 아무것도 입력 안해도 null이 아닌 빈문자열 ''임
- window.open(' ', ' ', ' ')은 새로운 창을 열면서 ' '안에 세부사항 설정 가능
- 첫번째 인자는 주소
- 두번째 인자는 이름표. 이름을 주지 않으면 새창이 계속 뜸. 이름을 주게되면 이름이 있는 창이 다시 뜸
- 세번째 인자는 옵션 정보
- 아이디 입력 안하면 입력 요청 창 생성
- MemberController에 joinIdDupChk 메서드 추가
- Model 사용
- model이 선언되어 있으면 컨트롤러가 알아서 객체를 생성해줌
- joinIdDupChk.jsp 생성
- joinIdDupChk.jsp 로직 작성
- 아이디 중복 여부 체크해서 조건에 맞게 내용 출력
- servelt의 interceptor 예외 추가해줌
- 안하면 계속 join이 뜸
- 작동 확인
- join.jsp의 아이디 form에 name으로 frm추가
- joinIdDupChk.jsp에 '아이디 사용' 버튼 추가
- 아이디 사용을 클릭하면 사용할 아이디가 부모창에 적용되도록 함
- ID 중복일시 '아이디 사용' 버튼 없음
- 사용가능한 ID일시 '아이디 사용' 버튼 생성
- '아이디 사용' 클릭시 자식창이 닫히며 부모창의 아이디 입력란에 사용할 아이디 자동 입력됨
key 관련 event
- keydown : 모든 키에 대해서 이벤트가 발생. 키를 눌렀을때 발생
- keyup : 모든 키에 대해서 이벤트가 발생. 키를 눌렀다가 뗄때 발생
- keypress는 문자열이나 특수문자, 즉 문자로 처리되는 대상에 대해서 이벤트가 발생
- 화살표나 펑션키 같은 경우에는 문자가 아니므로 이벤트 발생 안함.
keyup 설정 적용
- join.jsp에 keyup 코드 추가
- keyup을 사용해서 눌렀다가 뗄 때마다 이벤트가 발생하게 하겠음
- url: '/member/joinIdDupChkJson' + id처럼 할수도 있지만 파라미터가 많으면 불가능
- 항상 :(콜론)을 기준으로 앞이 Key, 뒤가 Value가 됨. jQuery가 자동으로 붙여줌
- id나 inputId처럼 ' '로 감싸져 있지 않으면 문자열이 아닌 변수라는 의미임
- MemberController에 joinIdDupChkJson 메서드 추가
- 결과 확인
- 등록된 ID라면 true
- 등록되지 않은 ID라면 false
- MemberController에 joinIdDupChkJson 메서드 수정
- Map을 사용해서 출력
- Map을 사용하려면 여러 개일때도 반환 가능
- GetMapping에 value와 produce 사용
- 결과 확인
- join.jsp에서 아이디 텍스트의 span 태그에 id 속성 추가
- 아이디 입력에 따른 문구 출력 및 색상 변경
Servlet 버전 관리
- Servlet 3버전 이하일 때는 commons-fileupload를 사용해서 업로드 해야함
- MVN 저장소에서 commons-fileupload 검색
- 최신 버전 클릭 후
- 코드 복사 후
- pom.xml에 붙여넣고 주석처리(Servelt 4.0.1 버전 사용중이라서 사용 안함)
- Servlet의 파일업로드 기능이 3.0 이상 버전부터는 기본으로 들어가 있음
- Servlet 3버전 이하일 때는 commons-fileupload를 사용해서 업로드 해야함
Servlet에서 파일 업로드 설정
- 파일 업로드시 경로 설정
- 파일 업로드시 제한 설정
BoardService 메서드 추가
- BoardMapper를 참고해서 BoardService 작성
ServiceTests를 src/test/java에 만드는 이유는 경로가 같다고 판단되므로 임포트를 하지 않고 사용이 가능해서이다!!!!!!
BoardService에 전체 삭제 추가
BoardServiceTests 결과
BoardController 생성
- com.example.controller 패키지에 BoardController 생성
BoardService에 전체글 가져오기 추가
- BoardMapper.java에 전체글을 가져오는 추상메서드 List<BoardVO> getBoards( ) 추가
- BoardMapper.xml에 mybatis 구문 추가
list 메서드 생성
- BoardController에 전체글을 리스트로 가져오는 list 메서드 생성
다음시간에~
- boardList.jsp에 c taglib 추가
- 내일 이어서~
Nil Desperandum <절대 절망하지 마라>