메모는 1) 익명의 작성자 이름(username), 2) 메모 내용(contents) 으로 이루어져 있습니다.
domain 패키지 테이블과 연동되는 클래스랑 , Repository는 domain 패키지에서 만든다.
자유롭게 Query를 만들고 싶을때
Query = SQL / Repository(인터페이스) 변형하고 싶을때
그냥 findAll하는게 아니라, findAll 전부다 찾을건데 생성시간의 최신순으로 정렬 한다고 과정한다면.
니가 만약에 어떤 user가 있고 userRepository를 만들었는데
이메일어드레스 기준으로 하고싶으면 아래 사진과 같이 쓰면 된다.
ex Keyword and 조건
Keyword = 조건 ex) and , or 등등...
sample에서 find는 기본적으로 다 들어가 있다. 왜? 찾는거니까
By = 뭐에서 찾을거냐? Lastname 멤버변수가 존재 해야되고 정확하게 이름이 같아야 된다.
Lastname이라는 멤버변수가 있을때 그거 가지고 찾고있을때 By라고 써라 첫글짜 대문자를 써서 멤버변수를 써라
그리고 Lastname과 Firstname으로 둘다 찾고싶으면 LastnameAndFirstname으로 써라 그 뒤로는 JPA가 알아서 해줌.
Memo API = 생성, 조회, 변경, 삭제 중 Service update(변경) 기능 할때 필요.
UPdate는 Service가 필요하고
생성 조회 삭제는 Repository가 필요하다.
(O) <h1><span>타이틀</span>입니다.</h1>
(X) <span><h1>타이틀</span>입니다.</h1>
- head, body 태그로 구분됩니다.
- head 태그는 CSS, Javascript 코드를 포함하고,
- body 태그는 뼈대 전체를 포함합니다.
- h1~h6
→ headline의 약자, 신문 제목 같은 녀석이에요.- div
→ divison, 나누는 녀석이에요. 투명 비닐봉투!- p
→ paragraph, 신문 기사 단락과 같은 텍스트 내용을 담습니다.- ul, ol, li
→ (un)ordered list, list에 해당합니다. bullet point.- span
→ 글을 중간중간 잘라내서 색을 입혀준다든지 할 때 사용합니다.- table, th, tr, td
→ 표 입니다! 엑셀 같은 표를 그릴 때 사용합니다.- img
→ 이미지를 나타낼 때 사용합니다.
https://www.codecademy.com/learn/learn-html
https://opentutorials.org/course/2039
.wrap {
width: 538px;
margin: 10px auto;
}
#contents {
width: 538px;
}
.area-write {
position: relative;
width: 538px;
}
let a = 3; // 변수를 처음 선언할 때 let을 써줍니다. 자료형은 써주지 않아도 되어요.
let b = 2;
console.log(a + b); // System.out.println()과 같은 녀석입니다.
b = 7;
console.log(a + b);
5
10
let name = 'bknam';
let course = "웹개발의 봄 Spring" // 자바와 다르게 홑/쌍따옴표 상관없습니다.
let num = 10;
console.log(num + name); // 문자 + 숫자 하면 둘 모두를 문자로 묶습니다.
10bknam
let age1 = 18;
let age2 = 20;
let isAdult = age1 > 19;
console.log(isAdult); // false
isAdult = age2 > 19;
console.log(isAdult); // true
false
true
let fruits = ['사과', '딸기', '수박']; // List 보다 편하게 사용할 수 있습니다.
console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);
사과
딸기
수박
Javascript 딕셔너리 = Json = class
let course = {
'title': '웹개발의 봄, Spring',
'tutor': '남병관'
}
console.log(course);
{title: '웹개발의 봄, Spring', tutor: '남병관'}
let fruits = ['사과', '딸기', '수박']; // List 보다 편하게 사용할 수 있습니다.
for (let i=0; i<fruits.length; i++) {
let fruit = fruits[i];
console.log(fruit);
}
사과
딸기
수박
let fruits = ['사과', '딸기', '수박']; // List 보다 편하게 사용할 수 있습니다.
for (let i=0; i<fruits.length; i++) {
let fruit = fruits[i];
console.log(fruit == '수박');
}
false
true
java 메소드랑 비슷한 개념
// 함수 함수 이름
function sample() {
alert('얼럿!'); // sample실행하면 얼럿을 띄어줘라
}
let name = '내 이름';
let text = `${name}님의 스프링 5주 완주를 축하합니다!`;
console.log(text);
// 내 이름님의 스프링 5주 완주를 축하합니다!
Javascript 배열 안에서 과일이 몇 개인지 세는 함수를 만들어보겠습니다.
다음 실행 결과를 만들 수 있으면 됩니다.
let count = countFruit('감');
console.log(count); // 배열에 들어있는 감의 개수 인쇄
let fruits = ['사과', '딸기', '수박', '감', '배', '딸기', '감'];
function countFruit(name) {
let result = 0;
for (let i=0; i<fruits.length; i++) {
let fruit = fruits[i];
if (fruit == name) {
result += 1; // result ++;
}
}
return result;
}
let count = countFruit('감');
console.log(count); // 배열에 들어있는 감의 개수 인쇄
2
- jQuery는, 미리 작성된 자바스크립트 함수 모음집입니다.
- 되게 많이들 쓰는 HTML, CSS 조작 함수를 미리 만들어서 제공해주는 것이죠!
- 우리는 다 스스로 만들 필요 없이 사용법만 알면 됩니다.
- https://www.w3schools.com/jquery/jquery_get_started.asp
// 아이디가 contents인 것을 보이지 않게 숨겨줘
$('#contents').hide();
$('#post-box').show();
$('#post-box').hide();
$('#post-url').val();
$('#post-url').val('new text');
$('#cards-box').empty();
$('#cards-box').append(`<div class="card"> // cards-box에 append card를 붙이겠다
<img class="card-img-top"
src="https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg"
alt="Card image cap">
<div class="card-body">
<a href="#" class="card-title">여기 기사 제목이 들어가죠</a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>`);
- 사용자가 입력한 메모 내용 확인하기
- POST API 사용해서 메모 신규 생성하기
- 화면 새로고침하여 업데이트 된 메모 목록 확인하기
isValidContents 복사 → ctrl + f
JSON.stringify 란? JSON을 문자열로 만들어주는 것입니다!
코드
// 메모를 생성합니다.
function writePost() {
// 1. 작성한 메모를 불러옵니다.
let contents = $('#contents').val();
// 2. 작성한 메모가 올바른지 isValidContents 함수를 통해 확인합니다.
if (isValidContents(contents) == false) {
return;
}
// 3. genRandomName 함수를 통해 익명의 username을 만듭니다.
let username = genRandomName(10);
// 4. 전달할 data JSON으로 만듭니다.
let data = {'username': username, 'contents': contents};
// 5. POST /api/memos 에 data를 전달합니다.
// jQuery를 이용한다
$.ajax({
// type 메소드 post 형식
type: "POST",
// 주소
url: "/api/memos",
contentType: "application/json", // JSON 형식으로 전달함을 알리기
// API간 정보 교환은 문자열로 정보를 못받는다.
// contentType 받을 정보는 JSON 형태
data: JSON.stringify(data), // ACI body = data
// 성공적으로 응답이 왔을때 알림창 띄움
success: function (response) {
alert('메시지가 성공적으로 작성되었습니다.');
// 새로고침침 window.location.reload();
}
});
}
- 기존 메모 제거하기
- GET API 사용해서 메모 목록 불러오기
- 메모마다 HTML 만들고 붙이는 함수 만들기
$(document).ready(function () {
// HTML 문서를 로드할 때마다 실행합니다.
// 새로고침할 떄마다 실행
getMessages();
})
// 메모를 불러와서 보여줍니다.
function getMessages() {
// 1. 기존 메모 내용을 지웁니다.
$('#cards-box').empty();
// 2. 메모 목록을 불러와서 HTML로 붙입니다.
// jQuery를 이용한다
$.ajax({
// type 메소드 GET 형식
type: 'GET',
// 주소
url: '/api/memos',
// 요청이 잘되면 응답값이 response 저장
success: function (response) {
console.log(response);
}
})
}
- 뭔가 이상하지 않으셨나요? 왜 created_at, modified_at 데이터는 안 오는 것일까요?
- 바로 Getter 가 없기 때문입니다.
- 거기에, 스프링에게 Auditing 기능을 사용하고 있다고 알려주어야 해요!
- 이렇게 중간중간 어노테이션을 빼먹으면 작동이 의도대로 안될 때가 많답니다.
// 메모를 불러와서 보여줍니다.
function getMessages() {
// 1. 기존 메모 내용을 지웁니다.
$('#cards-box').empty();
// 2. 메모 목록을 불러와서 HTML로 붙입니다.
// jQuery를 이용한다
$.ajax({
// type 메소드 GET 형식
type: 'GET',
// 주소
url: '/api/memos',
// 요청이 잘되면 응답값이 response 저장
success: function (response) {
for (let i=0; i<response.length; i++) {
let memo = response[i];
// 메모 하나를 HTML로 만들어서 body 태그 내 원하는 곳에 붙입니다.
// id, username, contents, modifiedAt
let id = memo.id;
let username = memo.username;
let contents = memo.contents;
let modifiedAt = memo.modifiedAt;
addHTML(id, username, contents, modifiedAt);
}
// console.log(response);
}
})
}
// 메모 하나를 HTML로 만들어서 body 태그 내 원하는 곳에 붙입니다.
function addHTML(id, username, contents, modifiedAt) {
// 1. HTML 태그를 만듭니다.
let tempHtml = `<div class="card">
<!-- date/username 영역 -->
<div class="metadata">
<div class="date">
${modifiedAt}
</div>
<div id="${id}-username" class="username">
${username}
</div>
</div>
<!-- contents 조회/수정 영역-->
<div class="contents">
<div id="${id}-contents" class="text">
${contents}
</div>
<div id="${id}-editarea" class="edit">
<textarea id="${id}-textarea" class="te-edit" name="" id="" cols="30" rows="5"></textarea>
</div>
</div>
<!-- 버튼 영역-->
<div class="footer">
<img id="${id}-edit" class="icon-start-edit" src="images/edit.png" alt="" onclick="editPost('${id}')">
<img id="${id}-delete" class="icon-delete" src="images/delete.png" alt="" onclick="deleteOne('${id}')">
<img id="${id}-submit" class="icon-end-edit" src="images/done.png" alt="" onclick="submitEdit('${id}')">
</div>
</div>`;
// 2. #cards-box 에 HTML을 붙인다.
$('#cards-box').append(tempHtml);
}
- 작성 대상 메모의 username과 contents 를 확인
- 작성한 메모가 올바른지 확인
- 전달할 data 를 JSON으로 바꾸기
- PUT /api/memos/{id} 에 data를 전달
// 메모를 수정합니다.
function submitEdit(id) {
// 1. 작성 대상 메모의 username과 contents 를 확인합니다.
let username = $(`#${id}-username`).text().trim();
let contents = $(`#${id}-textarea`).val().trim();
// 2. 작성한 메모가 올바른지 isValidContents 함수를 통해 확인합니다.
if (isValidContents(contents) == false) {
return;
}
// 3. 전달할 data JSON으로 만듭니다.
let data = {'username': username, 'contents': contents};
// 4. PUT /api/memos/{id} 에 data를 전달합니다.
// jQuery를 이용한다
$.ajax({
// type 메소드 pup 형식
type: "PUT",
// 주소 아디값
url: `/api/memos/${id}`,
// JSON 형식으로 전달함을 알리기
contentType: "application/json",
// contentType 받을 정보는 JSON 형태
data: JSON.stringify(data),
// 응답이 잘오면 response값으로 알림 띄우기
success: function (response) {
alert('메시지 변경에 성공하였습니다.');
// 새로고침
window.location.reload();
}
});
}
// 메모 하나를 HTML로 만들어서 body 태그 내 원하는 곳에 붙입니다.
function addHTML(id, username, contents, modifiedAt) {
// 1. HTML 태그를 만듭니다.
let tempHtml = `<div class="card">
<!-- date/username 영역 -->
<div class="metadata">
<div class="date">
${modifiedAt}
</div>
<div id="${id}-username" class="username">
${username}
</div>
</div>
<!-- contents 조회/수정 영역-->
<div class="contents">
<div id="${id}-contents" class="text">
${contents}
</div>
<div id="${id}-editarea" class="edit">
<textarea id="${id}-textarea" class="te-edit" name="" id="" cols="30" rows="5"></textarea>
</div>
</div>
<!-- 버튼 영역-->
<div class="footer">
<img id="${id}-edit" class="icon-start-edit" src="images/edit.png" alt="" onclick="editPost('${id}')">
<img id="${id}-delete" class="icon-delete" src="images/delete.png" alt="" onclick="deleteOne('${id}')">
<img id="${id}-submit" class="icon-end-edit" src="images/done.png" alt="" onclick="submitEdit('${id}')">
</div>
</div>`;
// 2. #cards-box 에 HTML을 붙인다.
$('#cards-box').append(tempHtml);
}
- DELETE API 사용해서 메모 삭제하기
// 메모를 삭제합니다.
function deleteOne(id) {
// jQuery를 이용한다
$.ajax({
// type 메소드 DELETE 형식
type: "DELETE",
// 주소 아디값
url: `/api/memos/${id}`,
// 응답이 잘오면 response값으로 알림 띄우기
success: function (response) {
alert('메시지 삭제에 성공하였습니다.');
// 새로고침
window.location.reload();
}
})
}