각진 세상에 둥근 춤을 추자

Ajax를 이용해서 user 목록을 관리하는 프로그램을 구현해 본다. 데이터는 Sequel Pro에서 작성하여 불러온다. 1. Eclipse - user2 폴더 생성 - data 폴더, js폴더 생성 jsp파일과 js파일을 나누어 생성한다. 2. list.js (데이터 요청) /** * */ function list(){ $(function(){ $('section').empty(); $('nav').empty().append("user2 목록user2 등록"); $.get('./data/list.jsp', function(data){ let table = ""; table += ""; table += "아이디"; table += "이름"; table += "휴대폰"; table += "나이"; tabl..

1. JSON 문자열 처리 방식 다음과 같은 JSON 데이터를 생성한 다음, Ajax를 이용해 해당 데이터를 요청 및 출력해 본다. 1-1. JSON 데이터 생성 ( JSON 문자열 처리 방식): json1.jsp / escape 처리 String jsonData = "{\"uid\":\"a101\", \"name\":\"홍길동\", \"hp\":\"010-1234-1001\", \"age\":23}"; // JSON 출력 out.print(jsonData); %> 1-2. JSON 데이터 요청 폼 작성: 3_JSON.jsp AJAX 실습 데이터 요청 아이디 : 이름 : 휴대폰 : 나이 : 1-3. Ajax를 이용해 데이터 요청하기: 3_JSON.jsp 2. DB JSON 방식 다음과 같은 DB의 데이터..

2022.10.21 - [JSP] - [JSP] 프로젝트 실습 - 게시판 만들기 3 (약관 화면 설계) [JSP] 프로젝트 실습 - 게시판 만들기 3 (약관 화면 설계) 2022.10.19 - [JSP] - [JSP] 프로젝트 실습 - 게시판 만들기 2 (로그인 화면 설계) [JSP] 프로젝트 실습 - 게시판 만들기 2 (로그인 화면 설계) 아래 화면과 같은 로그인 화면 페이지를 구현해 본다. 화면 페 this-circle-jeong.tistory.com 앞서 구현한 약관 화면에서 다음 버튼을 클릭하면 회원가입 화면이 나오게 코드를 작성했다. 이번에는 회원가입 화면을 구현해 본다. 1. 회원가입 폼 구현하기 사이트 이용정보 입력 아이디 비밀번호 비밀번호 확인 개인정보 입력 이름 별명 공백없이 한글, 영문..

2022.10.19 - [JSP] - [JSP] 프로젝트 실습 - 게시판 만들기 2 (로그인 화면 설계) [JSP] 프로젝트 실습 - 게시판 만들기 2 (로그인 화면 설계) 아래 화면과 같은 로그인 화면 페이지를 구현해 본다. 화면 페이지를 보면 3부분으로 나눌 수 있다. 헤더(header) - 메인(main) - 푸터(footer)이다. 각각 페이지를 구현할 때 마다 헤더와 푸터 부분을 this-circle-jeong.tistory.com 앞서 구현한 로그인 화면에서 '회원가입' 버튼을 클릭하면 약관 화면이 나오게 작성하였다. 이번에는 약관 화면을 구현해 본다. 약관 내용은 네이버 약관 내용을 복사했다. 내용 입력은 Sequel Pro를 통해 입력했다. 1. 약관 폼 구현하기 사이트 이용약관 동의합니다..

Ajax를 이용해 서버의 데이터를 요청해 출력할 수 있었다. 이번에는 직접 JSON 데이터를 생성하여 전송해 본다. 먼저, JSON 데이터를 입력할 폼을 구현한다. 1. 전송 폼 구현하기 Ajax 데이터 전송 2. 기능 구현하기 3. 전체 코드 화면 구현과 기능 구현을 합친 전체 코드는 다음과 같다. Ajax 데이터 전송 데이터 전송 url을 네이버로 하였다. 검증되지 않은 데이터이기 때문에 네이버에서는 수락하지 않는다. 위 기능 구현 코드에서 e.preventDefault(); 라는 코드를 작성했다. 이 코드는 form 내에 submit 버튼을 눌렀을 때 새로 실행하지 않아도 작동되게 한다.

이번에는 데이터 하나가 아닌 여러 개의 데이터를 Ajax를 이용해 요청해 출력해 본다. http://chhak.or.kr/data/users.json 1. 화면 구현하기 클라이언트가 데이터를 받아 올 화면을 아래 사진과 같이 구현한다. Ajax 데이터 처리 데이터 요청 아이디 이름 휴대폰 나이 2. 기능 구현하기 Ajax를 이용해 서버의 데이터를 요청한다. 3. 전체 코드 화면 구현과 기능 구현을 합친 전체 코드는 다음과 같다. Ajax 데이터 처리 데이터 요청 아이디 이름 휴대폰 나이

아래의 링크는 JSON객체로 생성된 서버이다. http://chhak.or.kr/data/user.json Ajax를 통해 위 JSON 데이터를 요청해 본다. Ajax는 비동기 방식 통신 기술이다. 즉, 클라이언트가 화면을 구현하고 서버는 해당 화면에 알맞는 데이터만 전송한다. (1) 화면 구현하기 다음과 같은 폼을 작성한다. Ajax 데이터 요청 데이터 요청 아이디 : 이름 : 휴대폰 : 나이 : (2) 기능 구현하기 데이터를 요청하는 코드를 작성하기 전 제이쿼리를 적용하는 라이브러리를 구글에서 가져온다. https://developers.google.com/speed/libraries 호스팅된 라이브러리 | Hosted Libraries | Google Developers 가장 많이 사용되는 오픈소스..

Ajax(Asynchronous JavaScript and XML)란 JSON 또는 XML 형태의 데이터를 비동기적(비순서적)으로 전송하기 위한 통신 기술을 말한다. 아래 그림을 통해 간단하게 동기 방식과 비동기 방식의 차이에 대해 알아본다. (1) 동기 방식 동기 방식은 클라이언트가 서버에 신호를 요청하면 응답이 돌아와야 다음 동작을 수행할 수 있다. (2) 비동기 방식 비동기 방식은 클라이언트가 서버에 신호를 보냈을 때 서버의 응답 상태와 상관 없이 다음 동작을 수행할 수 있다. 즉, Ajax를 이용하면 클라이언트가 서버에 자료를 요청할 때 화면 전환 없이 요청한 자료를 전송받을 수 있으며, 클라이언트가 기다릴 필요 없이 바로 다른 작업을 수행할 수 있다. Ajax 관련 함수 $.ajax({옵션});..

'Starting Tomcat v9.0 Server at localhost' has encountered a problem. Port 8080 required by Tomcat v9.0 Server at localhost is already in use. 이클립스 서버를 실행시키려니 에러가 떴다. 정말 하루 걸러 하루 에러가 발생하는 다채로운 맥북 생활이다... 에러 메시지에는 이미 포트 번호가 사용 중이니 다른 포트 번호로 변경하라고 한다. 아무래도 이클립스가 종료될 때 서버 프로세스가 제대로 종료되지 않았나 보다. 방법1: 포트 번호 변경하기 (실패) 1. 하단 메뉴에서 톰캣 서버를 더블 클릭하면 다음과 같은 화면이 뜬다. 2. 포트 번호를 8080에서 8088로 변경한다. 3. 또 다른 에러 발생!..

보통 Sequel Pro를 아래 페이지에서 다운 받는다. 프로그램을 다운받고 실행시키려고 하면 무한 로딩에 빠지는 걸 볼 수 있다. Sequel Pro 개발사 측에서 해당 버전이 불안정함에도 마땅한 솔루션이 없다고 한다. 그래서 아래 주소의 깃허브에서 배포하는 nightly builds의 Sequel Pro를 새로 다운받는다. https://github.com/sequelpro/sequelpro/issues/3388 Stuck on Loading Database · Issue #3388 · sequelpro/sequelpro I've already tried looking at previous posts with same errors and nothing has worked Here is the exac..