Day-3

프로젝트 만들고 API 설계하기

• Controller - Service - Repository 3계층이 존재한다는 것
• 우리는 안에서 바깥으로, 즉 Repository 쪽부터 Service, Controller 방향으로 만들어갈 예정.

API 설계하기 (CRUD)

Repository 만들기

Memo

메모는 1) 익명의 작성자 이름(username), 2) 메모 내용(contents) 으로 이루어져 있습니다.
domain 패키지 테이블과 연동되는 클래스랑 , Repository는 domain 패키지에서 만든다.

Memo.java

MemoRepository.java

Timestamped.java

JPA 공식 홈페이지 살펴보기

자유롭게 Query를 만들고 싶을때
Query = SQL / Repository(인터페이스) 변형하고 싶을때
그냥 findAll하는게 아니라, findAll 전부다 찾을건데 생성시간의 최신순으로 정렬 한다고 과정한다면.

ex)

니가 만약에 어떤 user가 있고 userRepository를 만들었는데
이메일어드레스 기준으로 하고싶으면 아래 사진과 같이 쓰면 된다.

ex Keyword and 조건
Keyword = 조건 ex) and , or 등등...
sample에서 find는 기본적으로 다 들어가 있다. 왜? 찾는거니까
By = 뭐에서 찾을거냐? Lastname 멤버변수가 존재 해야되고 정확하게 이름이 같아야 된다.
Lastname이라는 멤버변수가 있을때 그거 가지고 찾고있을때 By라고 써라 첫글짜 대문자를 써서 멤버변수를 써라
그리고 Lastname과 Firstname으로 둘다 찾고싶으면 LastnameAndFirstname으로 써라 그 뒤로는 JPA가 알아서 해줌.

MemoRequestDto.java

Service 만들기

Memo API = 생성, 조회, 변경, 삭제 중 Service update(변경) 기능 할때 필요.

MemoService.java

Memo.java

Controller(자동응답기) 만들기

API 완료하기 (CRUD)

UPdate는 Service가 필요하고
생성 조회 삭제는 Repository가 필요하다.

MemoController.java

ARC로 기능 확인하기

빈 목록 반환

신규 메모 생성

신규 메모 조회

신규 메모 삭제

빈 목록 반환

Update API 만들어보기

MemoController.java

HTML, CSS 기초

HTML의 기초

HTML의 특징

• 여는 태그, 닫는 태그가 쌍으로 존재합니다.
• 교차가 불가능합니다.

(O) <h1><span>타이틀</span>입니다.</h1> 

(X) <span><h1>타이틀</span>입니다.</h1>

대표적인 HTML 태그들

• 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
  → 이미지를 나타낼 때 사용합니다.

코드카데미 HTML

https://www.codecademy.com/learn/learn-html

생활코딩 HTML

https://opentutorials.org/course/2039

CSS의 기초

문법

• head > style 태그 안에 작성합니다.
• 세미콜론(;)으로 마무리합니다.

.wrap {
    width: 538px;
    margin: 10px auto;
}

#contents {
    width: 538px;
}

.area-write {
    position: relative;
    width: 538px;
}

선택자(id, class)

• 꾸미려면 가리켜야 하겠죠? 가리키는 방법은 두 가지가 있습니다.
• id: HTML 파일을 통틀어 단 하나만 존재합니다. #으로 표시합니다. (#contents)
• class: 중복 적용이 가능합니다. .으로 표시합니다. (.area-write)

Javascript 기초 - 1

Javascript 란?

• 브라우저를 살아 숨쉬게 만드는 친구입니다.
• 클릭, 마우스 오버 시 색 변화, 숨기기, 나타내기, 등등 수많은 일을 할 수 있답니다

크롬 개발자 도구

• Javascript 공부, 아니 웹서비스 개발을 하는데 필수적인 녀석입니다.
• F12 키를 누르면 개발자 도구가 뜹니다! console 탭을 눌러볼게요.

- Javascript 기초 문법

Javascript 변수

let a = 3; // 변수를 처음 선언할 때 let을 써줍니다. 자료형은 써주지 않아도 되어요.
let b = 2;
console.log(a + b); // System.out.println()과 같은 녀석입니다.
b = 7;
console.log(a + b);
5
10

Javascript 자료형 문자, 숫자

let name = 'bknam';
let course = "웹개발의 봄 Spring" // 자바와 다르게 홑/쌍따옴표 상관없습니다.
let num = 10;
console.log(num + name); // 문자 + 숫자 하면 둘 모두를 문자로 묶습니다.
10bknam

Javascript boolean

let age1 = 18;
let age2 = 20;
let isAdult = age1 > 19;
console.log(isAdult); // false
isAdult = age2 > 19;
console.log(isAdult); // true
false
true

Javascript 리스트

let fruits = ['사과', '딸기', '수박']; // List 보다 편하게 사용할 수 있습니다.
console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);
사과
딸기
수박

Javascript 딕셔너리

Javascript 딕셔너리 = Json = class

let course = {
	'title': '웹개발의 봄, Spring',
	'tutor': '남병관'
}
console.log(course);
{title: '웹개발의 봄, Spring', tutor: '남병관'}

Javascript 반복문

let fruits = ['사과', '딸기', '수박']; // List 보다 편하게 사용할 수 있습니다.
for (let i=0; i<fruits.length; i++) {
	let fruit = fruits[i];
	console.log(fruit);
}
사과
딸기
수박

Javascript 기초 - 2

Javascript 조건문

let fruits = ['사과', '딸기', '수박']; // List 보다 편하게 사용할 수 있습니다.
for (let i=0; i<fruits.length; i++) {
	let fruit = fruits[i];
	console.log(fruit == '수박');
}
false
true

Javascript 함수

java 메소드랑 비슷한 개념

// 함수    함수 이름
function sample() {
	alert('얼럿!'); // sample실행하면 얼럿을 띄어줘라
}

Javascript 백틱

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 기초 - 1

Query 란?

• jQuery는, 미리 작성된 자바스크립트 함수 모음집입니다.
• 되게 많이들 쓰는 HTML, CSS 조작 함수를 미리 만들어서 제공해주는 것이죠!
• 우리는 다 스스로 만들 필요 없이 사용법만 알면 됩니다.
• https://www.w3schools.com/jquery/jquery_get_started.asp

jQuery 임포트

jQuery 사용하는 법

// 아이디가 contents인 것을 보이지 않게 숨겨줘
$('#contents').hide();

HTML 나타내기

$('#post-box').show();

HTML 숨기기

$('#post-box').hide();

jQuery 기초 - 2

input 값 가져오기

$('#post-url').val();

input 값 넣기

$('#post-url').val('new text');

HTML 없애기

$('#cards-box').empty();

HTML 추가하기

$('#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>`);

메모 생성하기 - writePost 함수

개발 스펙

• 사용자가 입력한 메모 내용 확인하기
• POST API 사용해서 메모 신규 생성하기
• 화면 새로고침하여 업데이트 된 메모 목록 확인하기

사용자가 입력한 메모 내용 확인하기

isValidContents 복사 → ctrl + f

랜던한 username 만들기

POST API 사용해서 메모 신규 생성하기

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();
                }
            });
        }

결과

메모 조회하기 - getMessages 함수 - 1

개발 스펙

• 기존 메모 제거하기
• 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);
                }
            })
        }

메모 조회하기 - getMessages 함수 - 2

메모 마다 HTML 만들고 붙이는 함수 만들기

Timestamped, Week03Application 수정하기

• 뭔가 이상하지 않으셨나요? 왜 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);
        }

메모 변경하기 - submitEdit 함수

개발 스펙

• 작성 대상 메모의 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);
        }

메모 삭제하기 - deleteOne 함수

개발 스펙

• DELETE API 사용해서 메모 삭제하기

 // 메모를 삭제합니다.
        function deleteOne(id) {
            // jQuery를 이용한다
            $.ajax({
                // type 메소드 DELETE 형식
                type: "DELETE",
                //  주소 아디값
                url: `/api/memos/${id}`,
                // 응답이 잘오면 response값으로 알림 띄우기
                success: function (response) {
                    alert('메시지 삭제에 성공하였습니다.');
                    // 새로고침
                    window.location.reload();
                }
            })
        }