728x90 반응형 교육/Spring24 Spring 개발자 수업 105일차(2) - jQuery Ajax를 이용한 아이디 중복검사 jQuery Ajax를 이용한 아이디 중복검사 - 우리가 회원가입 양식이나, 여러가지 입력 폼을 만들었을 때 만약 중복검사를 하게 되면 페이지가 이동되어 이전에 작성 했던 내용이 사라지는 부분이 많이 불편했다. 이 점들을 보완해서 사용자가 바로바로 확인할 수 있도록 ajax를 이용해서 새로고침이 이루어지지 않는 아이디 중복 검사를 간단하게 구현해보자. [ 준비 작업 ] - 이전 준비 작업과 동일하며 추가적으로 WEB-INF > views > login 폴더를 생성하고 ex01.jsp을 만들자. - 예제를 위한 임의의 테이블 tblUser를 만들고 컬럼에 id를 추가해서 몇개만 미리 넣어두자. [ 아이디 중복 검사 예제 ] 1) JSP (ex01.jsp) - 기본적인 아이디 입력 폼 양식과 중복 체크 검사.. 2021. 8. 26. Spring 개발자 수업 105일차(1) - jQuery Ajax를 이용한 데이터 가져오기/보내기 jQuery Ajax를 이용한 데이터 가져오기/보내기 - 오늘은 ajax를 이용해서 데이터 주고 받는 페이지를 직접 만들어 보자. [ 준비 작업 ] 1. pom.xml - 자바, 스프링 버전 - Lombok - MyBatis - Log4j - Jackson - JSON 2. web.xml - 인코딩 처리(UTF-8) 3. root-context.xml - datasource, log4j, sessionfactory 설정 4. 파일 생성 - com.test.ajax > AjaxController.java > AjaxDAO.java > UserDTO.java - com.test.ajax.mapper > ajax.xml - WEB-INF > views > basic > basic.jsp 5. DB - 예제를 .. 2021. 8. 25. Spring 개발자 수업 104일차 - jQuery Ajax, 동기와 비동기 방식 jQuery Ajax - 어제 배웠었던 Ajax는 XMLHttpRequest() 객체를 직접 생성해 전부 작성하는 순수 Ajax인데, 이처럼 Ajax 기능을 하나씩 전부 구현 하는것이 아닌 jQuery에서 제공하는 Ajax가 대게 많이 쓰인다. - jquery.js 파일만 있으면 기본적으로 제공된다. [ 기존 방식 vs jQuery 방식 ] - 코드가 굉장히 간결해졌으며, 필요한 프로퍼티만 입력하면 되기 때문에 유지보수도 용이하다. - jQuery에서 제공하는 Ajax는 기존 Ajax 방식을 바탕으로 구현 한 것이므로 상세한 코드는 숨기고 원하는 프로퍼티만 입력하는 방식으로 구현이 되어있다. [ jQuery Ajax 내부 프로퍼티 작성 양식 ] $.ajax({ type: '', // 요청 메소드(GET,.. 2021. 8. 24. Spring 개발자 수업 103일차 - Ajax Ajax [ 정의 ] - Asynchronous JavaScript And(XML), 비동기 자바스크립트와 XML - 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것이다. - JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있다. - 자바스크립트를 사용한 서버와 통신하는 기술(서버와 데이터를 주고 받는 기술) - 자바스크립트 기술이다. [ 특징 ] - 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"이다. - 페이지 새로고침 없이 서버에 요청 - 서버로부터 데이터를 받고 작업을 수행 [ ajax를 왜 사용할까? ] - 이처럼 1개의 웹 페이지에서 두개의 업무를 진행 하려고 할 때 한개의 업무가 실행시 다른 업무 진행 여부와 상관.. 2021. 8. 23. Spring 개발자 수업 102일차 - 웹 소켓(Web Socket)을 이용한 채팅 구현하기 웹 소켓(Web Socket) [ 정의 ] - 웹소켓은 하나의 TCP 접속에 전이중 통신 채널을 제공하는 컴퓨터 통신 프로토콜이다. - HTML5 표준 기술로, 사용자의 브라우저와 서버 사이의 동적인 양방향 연결 채널을 구성한다. - Websocket API를 통해 서버로 메세지를 보내고, 요청 없이 응답을 받아오는 것이 가능하다. [ 웹 소켓을 쓰는 이유? ] - 실시간 채팅 기능을 구현하기 위해서는 http통신의 기존 방법으로는 한계가 있다. - 동작 단계를 보며 문제점을 찾아보자. - 1단계: client1이 server에게 메세지를 전송한다 - 2단계: server는 그 메세지를 client2에게 전송한다. - 3단계: client2는 자신에게 온 메세지를 확인한다. 3단계로 이루어진 아주 간단한.. 2021. 8. 22. Spring 개발자 수업 101일차 - 코드 게시판 만들기(상세 보기, 댓글 작성) 코드 게시판 만들기(상세 보기, 댓글 작성) [ 구현 목표 ] - 글 리스트 목록에서 항목을 선택하여 클릭하면 상세 페이지로 이동한다. - 상세페이지에서 코드를 드래그 형식으로 선택하여 댓글형식으로 코드 설명을 작성할 수 있다. [ 설정 ] 스프링을 이용한 코드 게시판 만들기 - Spring MVC Project + MyBatis + Log4j + AOP + Tiles - 게시판(+소스 코드 첨부) 1. pom.xml - java, spring 버전 변경(1.11, 4.3.8) - jar(lombok, jdbc, mybatis, log4j, tiles) 2. web.xml - 확장자 설정(*.action) - POST 인코딩 필터(UTF-8) 3. root-context.xml - myBatis 설정 >.. 2021. 8. 19. 이전 1 2 3 4 다음 728x90 반응형
