728x90 반응형 Spring25 Spring 개발자 수업 108일차 - jQuery Ajax를 이용한 post-it 메모장 만들기(생성, 확인) jQuery Ajax를 이용한 post-it 메모장 만들기(생성, 확인) - 기존에 배웠던 Ajax를 활용해 post-it 형식의 메모장을 만들어서 post-it 메모장 생성, 리스트 확인, 메모 작성, 메모 삭제 기능을 구현하기 - 우선 오늘은 post-it 메모장 생성(랜덤 위치)과 리스트 확인(새로고침 해도 원래 위치)을 구현을 해보자. [ 환경설정 및 파일 생성 ] - 기존의 Ajax수업의 프로젝트 환경설정과 동일하며, 파일 생성만 따로 추가하도록 하자 [ Controller ] com.test.ajax > MemoController.java > MemoDAO.java > MemoDTO.java com.test.ajax.mapper > ajax.xml [ View ] views > memo > i.. 2021. 8. 30. 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. 이전 1 2 3 4 5 다음 728x90 반응형
