com.eomcs.lang.ex06
com.eomcs.lang.ex06.Exam0431.java
continue; // 다음 줄로 가지 않고 '변수증가문'으로 이동한다.
com.eomcs.lang.ex06.Exam0450.java
흐름 제어문 - for(:) 와 배열
for (타입 변수명 : 배열 또는 컬렉션) {
// 반복할 문장
}변수의 타입은 배열이나 Iterable 구현체의 항목 타입과 같아야 한다.
for (배열에서 꺼낸 값을 저장할 변수 선언 : 배열주소) {
// 문장;
}// for (배열에서 꺼낸 값을 저장할 변수 선언 : 배열주소) 문장;
for (String name : names) {
System.out.println(name);
}ArrayList
배열과 ArrayList
02-자바기초3 / 9 페이지
com.eomcs.lang.ex06.Exam0460.java
개발자가 배열을 직접 다룬다.
배열을 다루는 도구 ArrayList를 통해서 배열을 다룬다. ArrayList가 배열을 다룬다.
배열이 꽉 차면 자동으로 배열 크기를 늘린다. 배열을 확장한다.
1) 기존보다 더 큰 새 배열 생성
2) 기존 배열의 값을 새 배열로
3) 기존 배열 대신 새 배열 사용
기존 배열은 어떻게 되는 겁니까?
버려지는 거. garbage가 되어 버리는 거.
ArrayList를 통해서 간접적으로 다루는 거
• 배열이 꽉 차면 자동으로 배열을 확장한다.
배열 크기는 고정된 거 아닙니까..?
기존보다 더 큰 새 배열을 생성
• 배열에서 값 찾기
contains()
• 배열의 항목을 삭제할 때 다음 항목을 자동으로 앞으로 옮긴다.
• 배열의 특정 부분을 추출
⇒ 배열을 사용할 때 유용한 기능을 제공
이런 목록을 다루는 클래스를 "컬렉션 API"라 부른다.
배열은 같은 타입의 값만 보관할 수 있지만 컬렉션은 다른 타입의 값도 보관할 수 있다.
배열은 크기가 고정되지만, 컬렉션은 크기가 가변적이다.
System.out.println(list.size());
length 대신 size()
for (int i = 0; i < list.size(); i++)
System.out.println(list.get(i));list[i] → list.get(i)
배열도 object 타입으로 선언하면 다양한 타입 담을 수 있음
for (Object value : list)
470번, 471번은 제네릭인데 아직 할 때가 아님
MyList 프로젝트
프로그램을 짤 때 어떻게 적용하는지
문법 활용 연습
하나의 프로젝트를 만들면서
첫 번째 프로젝트 주제는 MyList 프로젝트
변수, 배열 활용
개발 내용
연락처 관리 구현
이름
이메일
전화
팩스
직책
회사명
1단계 - 연락처 목록 화면 구현 (HTML)
/static/contact/index.html
2단계 - 연락처 목록 REST API 서비스 구현 (Java)
com.eomcs.mylist.Contact
3단계 - 화면과 서비스를 연동 (HTML, JavaScript, AJAX, DOM API, 이벤트 처리)
App.java 실행시키고
http://localhost:8080/index.html 되는지 확인하기
이클립스에서 Refresh 하고
http://localhost:8080/contact/index.html
수정할 때마다 이클립스에서 Refresh 하고 브라우저에서 새로고침 하기
anchor
<li><a href="contact/index.html">연락처</a></li>
상대경로
<script type="text/javascript">에서 type="text/javascript" 생략 가능
table → tbl
id="x-contact-tbl"
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>연락처</title>
</head>
<body>
<h1>연락처</h1>
<table id="x-contact-tbl" border="1">
<thead>
<tr>
<th>이름</th>
<th>이메일</th>
<th>전화</th>
<th>회사</th>
</tr>
</thead>
<tbody>
<tr>
<td>홍길동</td>
<td>hong@test.com</td>
<td>010-1111-2222</td>
<td>비트캠프</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var contacts = [
"홍길동1,hong@test.com,010-1111-2222,비트캠프",
"홍길동2,hong@test.com,010-1111-2222,비트캠프",
"홍길동3,hong@test.com,010-1111-2222,비트캠프"
];
var tbody = document.querySelector("#x-contact-tbl tbody");
var tr = document.createElement("tr");
tr.innerHTML = "<td>임꺽정</td><td>leem@test.com</td><td>010-1111-2222</td><td>비트캠프</td>"
tbody.appendChild(tr);
</script>
</body>
</html>
<script type="text/javascript">
var contacts = [
"홍길동1,hong@test.com,010-1111-2222,비트캠프",
"홍길동2,hong@test.com,010-1111-2222,비트캠프",
"홍길동3,hong@test.com,010-1111-2222,비트캠프"
];
var tbody = document.querySelector("#x-contact-tbl tbody");
for (var i = 0; i < 3; i++) {
var tr = document.createElement("tr");
tr.innerHTML = "<td>임꺽정</td><td>leem@test.com</td><td>010-1111-2222</td><td>비트캠프</td>"
tbody.appendChild(tr);
}
</script>
for (var contact of contacts) {
var tr = document.createElement("tr");
tr.innerHTML = "<td>임꺽정</td><td>leem@test.com</td><td>010-1111-2222</td><td>비트캠프</td>"
tbody.appendChild(tr);
} for (var contact of contacts) {
console.log(contact.split(","));
var tr = document.createElement("tr");
tr.innerHTML = "<td>임꺽정</td><td>leem@test.com</td><td>010-1111-2222</td><td>비트캠프</td>"
tbody.appendChild(tr);
}
for (var contact of contacts) {
var arr = contact.split(",");
var tr = document.createElement("tr");
tr.innerHTML = "<td>" + arr[0] + "</td><td>" + arr[1] + "</td><td>" + arr[2] + "</td><td>" + arr[3] + "</td>"
tbody.appendChild(tr);
}
백틱으로 바꾸기 ↓
for (var contact of contacts) {
var arr = contact.split(",");
var tr = document.createElement("tr");
tr.innerHTML = `<td>${arr[0]}</td><td>${arr[1]}</td><td>${arr[2]}</td><td>${arr[3]}</td>`
tbody.appendChild(tr);
}이클립스 가서 New - Class 클릭
ContactController 만들기
@RestController : 클라이언트 요청을 처리하는 역할
그런 역할을 하는 클래스에 대해서는 RestController를 붙여야 한다
저장하면 import가 자동으로 된다
package com.eomcs.mylist;
import org.springframework.web.bind.annotation.RestController;
@RestController // 클라이언트 요청을 처리하는 역할
public class ContactController {
}@GetMapping()
클라이언트가 뭐라고 요청했을 때 얘를 실행할 건지 적어줘야 됨
클라이언트가 /contact/list 달라고 요청했을 때 이 메소드를 호출해라
package com.eomcs.mylist;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController // 클라이언트 요청을 처리하는 역할
public class ContactController {
@GetMapping("/contact/list")
public Object list() {
String[] contacts = {
"홍길동11,hong@test.com,010-1111-2222,비트캠프",
"홍길동22,hong@test.com,010-1111-2222,비트캠프",
"홍길동33,hong@test.com,010-1111-2222,비트캠프"
};
return contacts;
};
};정확하게 배열이 넘어가는지 확인해보기
브라우저로 확인해보기
http://localhost:8080/contact/list
for (var contact of contacts) {
console.log(contact);
var arr = contact.split(",");
var tr = document.createElement("tr");
tr.innerHTML = `<td>${arr[0]}</td><td>${arr[1]}</td><td>${arr[2]}</td><td>${arr[3]}</td>`
tbody.appendChild(tr);
}
반복문이 돌 때마다 문자열 한 개를 꺼내서 출력함
자바스크립트 배열
서버에서 "배열 받아가세요"
서버 개발팀에서 알려준 주소가 있음 /contact/list
fetch("/contact/list")
서버 개발팀에서 알려준 주소 직접 눈으로 확인하기
브라우저로 확인해보기
http://localhost:8080/contact/list
응답이 온 결과는 파라미터로 넘겨준다
서버에서 응답이 오면
response
json을 자바스크립트 객체로 바꾸는 작업
response.json();
var arr = response.json();
자바스크립트 arr → contacts
반복문 돌린다
arr에서 하나의 스트링을 받아
그 스트링이 바로
그 스트링을 콤마로 쪼개
한 사람의 연락처 정보
<script type="text/javascript">
var tbody = document.querySelector("#x-contact-tbl tbody");
fetch("/contact/list").then(function(response){
return response.json();
}).then(function(arr){
for (var str of arr) {
console.log(str); // "홍길동1,hong@test.com,010-1111-2222,비트캠프"
var contact = str.split(","); // ["홍길동1","hong@test.com","010-1111-2222","비트캠프"]
var tr = document.createElement("tr");
tr.innerHTML = `<td>${contact[0]}</td><td>${contact[1]}</td><td>${contact[2]}</td><td>${contact[3]}</td>`
tbody.appendChild(tr);
}
});
</script>
홍길동11, 홍길동22, 홍길동33
서버와 연동했다
서버에서 준 데이터로 화면에 출력됨
클라이언트가 데이터를 보내면 그 데이터를 보관하는 메소드를 만들자
클라이언트가 어떤 경로로 요청할지 정해줘야 됨
@GetMapping("/contact/add")라고 요청해라
클라이언트에서 값이 넘어올 건데
String name, String email, String tel, String company
값을 받아서 저장해야 됨
String contact = name + "," + email + "," + tel + "," + company;
package com.eomcs.mylist;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController // 클라이언트 요청을 처리하는 역할
public class ContactController {
@GetMapping("/contact/list")
public Object list() {
String[] contacts = {
"홍길동11,hong@test.com,010-1111-2222,비트캠프",
"홍길동22,hong@test.com,010-1111-2222,비트캠프",
"홍길동33,hong@test.com,010-1111-2222,비트캠프"
};
return contacts;
};
@GetMapping("/contact/add")
public Object add(String name, String email, String tel, String company) {
String contact = name + "," + email + "," + tel + "," + company;
return contact;
};
};브라우저에서 확인해보기
http://localhost:8080/contact/add
데이터를 안 넘겨서 null로 뜸
쿼리스트링으로 넘긴다
쿼리 스트링으로 값을 보낸다.
클라이언트에서 데이터를 넘기면 서버쪽에서 잘 받았다는 의미에서 그대로 리턴해준다.
서버쪽에서 잘 받은 거 확인함.
form.html
form.html 만들기
mylist-boot\app\src\main\resources\static\contact\form.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>연락처</title>
</head>
<body>
<h1>새 연락처</h1>
<form>
이름:<br>
이메일:<br>
전화:<br>
회사:<br>
</form>
<script type="text/javascript">
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>연락처</title>
</head>
<body>
<h1>새 연락처</h1>
<form>
이름: <input type="text"><br>
이메일: <input type="email"><br>
전화: <input type="tel"><br>
회사: <input type="text"><br>
<button type="button">추가</button>
<button type="button">취소</button>
</form>
<script type="text/javascript">
</script>
</body>
</html>
버튼 눌렀을 때 동작하게 하기
버튼에 id 부여하기
<button id="x-add-btn" type="button">추가</button>
<button id="x-cancel-btn" type="button">취소</button><script type="text/javascript">
document.querySelector("#x-add-btn").onclick = function() {
console.log("추가!")
};
document.querySelector("#x-cancel-btn").onclick = function() {
console.log("취소!")
};
</script>
취소 버튼 누르면 목록 화면으로 돌아가게 하자
window.location.href = "index.html"
window 생략 가능
document.querySelector("#x-cancel-btn").onclick = function() {
window.location.href = "index.html"
};입력폼에 입력된 값을 꺼내와야 한다
tag를 찾기 위한 id를 부여한다
<form>
이름: <input id="x-name" type="text"><br>
이메일: <input id="x-email" type="email"><br>
전화: <input id="x-tel" type="tel"><br>
회사: <input id="x-company" type="text"><br>
<button id="x-add-btn" type="button">추가</button>
<button id="x-cancel-btn" type="button">취소</button>
</form>var xName = document.querySelector("#x-name");
var xEmail = document.querySelector("#x-email");
var xTel = document.querySelector("#x-tel");
var xCompany = document.querySelector("#x-company");.value
document.querySelector("#x-add-btn").onclick = function() {
console.log(xName.value);
console.log(xEmail.value);
console.log(xTel.value);
console.log(xCompany.value);
};
var result = response.text();
일을 시켜놓고 일이 끝날 때까지 기다리는 거
옛날 방식
옛날에는 프로그램을 작성하는 데
PC에 Application이 돌아감
이 Application이 다른 거랑 연결될 일이 없음
response.text().then(function(result) {});
텍스트를 가져온 순간 내가 등록한 함수를 호출
내가 일을
얘랑 연결하고
여기서 답을 줄 때까지 기다려야 되는데 언제 답이 오는지 모름
작업이 언제 끝나는지 알 수가 없음
1년까지는 거래내역을 즉시 뽑을 수 있음
1년 이전의 거래내역은 따로 백업되어 있음
최근 거래내역을 뽑고 싶으면 몇 년도부터 몇 년도까지 신청
신청 결과 화면 보면 언제부터 언제까지 거래 내역
처리중
그 상태에서 웹 페이지에서 빠져나왔다가 다시 웹 페이지 들어가서 아까 신청했던 내역으로 들어가서
요청하면 바로 응답하는 일이 있고
어떤 일은 얼마나 걸릴지 모르는
예전에는 예측이 불가능한 정도는 아니었음
요즘은 단독적으로 돌아가는 게 아니라 서로 합을 맞추면서
서버에서 응답을
var xName = document.querySelector("#x-name");
var xEmail = document.querySelector("#x-email");
var xTel = document.querySelector("#x-tel");
var xCompany = document.querySelector("#x-company");
document.querySelector("#x-add-btn").onclick = function() {
fetch(`/contact/add?name=${xName.value}&email=${xEmail.value}&tel=${xTel.value}&company=${xCompany.value}`)
.then(function(response) {
return response.text();
})
.then(function(result) {
console.log(result);
});
};
document.querySelector("#x-cancel-btn").onclick = function() {
window.location.href = "index.html"
};response.text()
서버에서 보낸 데이터를 그냥 그대로 텍스트로 리턴해줘!
JSON 문자열로 인식해서 파싱하는 일을 하지 말라!
@GetMapping("/contact/add")
public Object add(String name, String email, String tel, String company) {
String[] contacts = new String[5];
int i = 0;
contacts[i] = name + "," + email + "," + tel + "," + company;
return contacts.length;
};인스턴스 변수
로컬 변수는 메소드 호출(실행)될 때 생성되고 호출이 끝난 후 삭제된다.
따라서 다른 메소드에 있는 로컬 변수를 사용할 수 없다.
contacts[size++] = name + "," + email + "," + tel + "," + company;
-------------------------------------------------------------------
int temp = size;
size = size + 1;
contacts[temp] = name + "," + email + "," + tel + "," + company; String[] contacts = new String[5];
int size = 0;
@GetMapping("/contact/list")
public Object list() {
String[] records = new String[size];
for (int i = 0; i < size; i++) {
records[i] = contacts[i];
}
return records;
};
@GetMapping("/contact/add")
public Object add(String name, String email, String tel, String company) {
contacts[size++] = name + "," + email + "," + tel + "," + company;
return size;
};http://localhost:8080/contact/add?name=aaa&email=bbb&tel=010-1111-2222&company=ddd
http://localhost:8080/contact/list
window.location.href = "list.html"
location.href = "list.html"
view.html 파일 만들기
mylist-boot\app\src\main\resources\static\contact\view.html
연락처 목록에서 '이름' 클릭하면 상세 페이지로 이동하게 하기
index.html에서 한다.
// index.html
tr.innerHTML = `<td><a href="view.html?email=${contact[1]}">${contact[0]}</a></td>
<td>${contact[1]}</td>
<td>${contact[2]}</td>
<td>${contact[3]}</td>`;
if (location.href.indexOf('?') == -1) {
window.alert("요청이 올바르지 않습니다!")
location.href = "index.html"
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>연락처</title>
</head>
<body>
<h1>연락처 상세정보</h1>
<form>
이름: <input id="x-name" type="text"><br>
이메일: <input id="x-email" type="email"><br>
전화: <input id="x-tel" type="tel"><br>
회사: <input id="x-company" type="text"><br>
<button id="x-update-btn" type="button">변경</button>
<button id="x-cancel-btn" type="button">취소</button>
</form>
<script type="text/javascript">
var xName = document.querySelector("#x-name");
var xEmail = document.querySelector("#x-email");
var xTel = document.querySelector("#x-tel");
var xCompany = document.querySelector("#x-company");
// console.log(location.href.indexOf('?'))
// console.log(window.location.search)
// 요청 유효성 검사
if (location.href.indexOf('?') == -1) {
window.alert("요청이 올바르지 않습니다!")
location.href = "index.html"
}
// URL에서 쿼리스트링을 추출하여 파라미터의 이름과 값을 분리한다.
var params = new URLSearchParams(location.href.split('?')[1]);
// 쿼리스트링에서 이메일 값을 추출한다.
var email = params.get("email");
if (email == null) {
window.alert("이메일이 없습니다.");
location.href = "index.html";
}
document.querySelector("#x-update-btn").onclick = function() {
fetch(`/contact/add?name=${xName.value}&email=${xEmail.value}&tel=${xTel.value}&company=${xCompany.value}`)
.then(function(response) {
return response.text(); // 서버에서 보낸 데이터를 그냥 그대로 텍스트로 리턴해줘! JSON 문자열을 처리하지마!
})
.then(function(result) {
console.log(result);
location.href = "index.html";
});
};
document.querySelector("#x-cancel-btn").onclick = function() {
window.location.href = "index.html"
};
</script>
</body>
</html>
@GetMapping("/contact/get")
public Object get(String email) {
for (int i = 0; i < size; i++) {
if (email.equals(contacts[i].split(",")[1])) {
return contacts[i];
}
}
return "";
};
변경, 삭제 남음
배열에서 삭제하면 그 뒤에거 당겨와야 됨
