[코스파] 스프링 기초 3주차

3주차 내용

메모 프로젝트를 만들어 본다.

메시지의 작성 시간을 나타내고, 수정을 가능하게 한다.

1.     서버를 먼저 만든다 > 스프링을 이용해서 CRUD 기능을 가진 Memo API 를 만든다.

                         i.         Restcontroller : json 으로 응답하는 자동응답기

                        ii.         Service : 업데이트,

                       iii.         Repository : 생성, 삭제, 조회,

                       iv.         RequestDto : 변경, 데이터를 들고 다니는 친구, (정보 옮김이)

2.     HTML (뼈대), CSS(꾸미기)

3.     Javascript : 움직이게 해주는 것, jQuery : 화면을 숨기고 나타내는 방법

4.     클라이언트를 완성하고 서버와 연결하기 >> 완성된 페이지를 로컬에서 확인하기

[ 컨트롤러 : 클라이언트와 붙어서 요청, 응답을 처리함

 서비스 : 중간에서 실제로 중요한 작동이 이루어짐 : update

 Repository : 가장 안쪽에서 DB와 닿아있음, ]

만들어야 하는 API

	Method	URL	Return
생성	POST	/api/memos	Memo	메모 값을 리턴
조회	GET	/api/memos	List<Memo>	메모의 리스트
변경	PUT	/api/memos/{id}	Long	변경, 삭제한   값의 ID
삭제	DELETE	api/memos/{id}	Long

 

Repository 만들기

1.     Memo 클래스 만들기 : 작성자 이름과 메모내용으로 이루어짐

       A.     Domain 패키지 생성 후 메모 클래스 생성 com.sparta.week03.domain / Memo.java Timestamped.java

              MappedSuperclass / 자동으로 생성시간과 수정시간을 잡도록

             EntityListers(AuditingEntityLister ) 생성 수정시간을 자동으로

             Ø  Timestamped 클래스는 abstract 클래스로 : 추상클래스 = new 로 할수 없게, 상속만 될 수 있도록 하는 것.

2.     MemoRepository 인터페이스 만들기

       A.     인터페이스 : 클래스에서 멤버변수가 없는, 메소드만 있는 것

       B.      Find All  ByOrderBy  ModifiedAt  Desc  :    전부 찾아라 / 정렬해라 / 수정된날짜 기준으로 / 내림차순으로

3.     MemoRequestDto 만들기

       A.     유저내임과 수정된 날짜가 필요함

       B.      Private 형으로 생성 > @Getter 필요!

Servie 만들기 : 업데이트 기능

1.     MemoService 클래스 만들기

       A.     Com.sparta.week03.sevice // MemoService.java

       B.      메소드 형식 : public 반환타입 메소드이름 (재료) { }

 

public class MemoService {
    private final MemoRepository memoRepository;    //final : 꼭 필요한 것을 알려준다.

    @Transactional                                  // updatd를 할 때 db에 반영이 될 것을 한번 더 얘기해야 함
    public Long update(Long id, MemoRequestDto requestDto) {
        Memo memo = memoRepository.findById(id).orElseThrow(    //id를 기준으로 찾고.없으면 오류 발생 시켜라
                () -> new IllegalArgumentException("아이디가 존재하지 않습니다.")   // 오류발생 시
        );
        memo.update(requestDto);
        return memo.getId();
    }
}

 

Controller 만들기

새로운 패키지 생성 > com.sparta.controller >> MemoController.java

Private 형식으로 필수(fianl ) MemoRepositroy, MemoService 생성

       >> @Restcontroller : MemoController 는 new MemoController 로 생성되야 함. 이를 해주는 역할  

       >> @RequiredArgsConstructor : new MemoRepository 와 new MemoService 를 해주는 역할

1.     생성 POST

@PostMapping("/api/memos")          // 스프링에 post 방식임을 선언
public Memo createMemo(MemoRequestDto requestDto){
    Memo memo = new Memo(requestDto);   // requestDto 에 있는 데이터가 알아서 memo로 들어감
    return memoRepository.save(memo);   // 방금 만든 memo 를 memoRepository 에 save 하고 return
}

Ø  createMemo 에서 날라오는 데이터를 그대로 넣어줘

( @RequestBody MemoRequestDto requestDto )

 

2.     읽기 GET

 @GetMapping                         // get 방식으로 요청이 왔을 때!
public List<Memo> readMemo(){
    return memoRepository.findAllByOrderByModifiedAtDesc();    // MemoRepositroy.java 에 만들어 놨던 것 jpa 가 sql 문을 알아서 해 줌
}

 

3.     삭제하기 DELETE

 @DeleteMapping("api/memos/{id}")
public Long deleteMemo(@PathVariable Long id){
    memoRepository.deleteById(id);      // 주소에 있는 아이디를 변수로 받아야 함. @PathVariable
    return id;
}

 

4.     업데이트 PUT

 @PutMapping("api/memos/{id}")
public Long updateMemo(@PathVariable Long id, @RequestBody MemoRequestDto requestDto){
    memoService.update(id, requestDto);
    return id;
}

 

HTML. CSS

뼈대와 꾸며주는 것.

1.     HTML

여는 태그와 닫는 태그가 쌍으로 존재한다.

head 태그는 CSS, Javascript 코드를 포함

body 태그는 뼈대 전체를

       A.     h1~h6 : headline

       B.      div : 나누는 것

       C.      p : 단락과 같은 텍스트 내용

       D.     ul, ol, li :  리스트

       E.      span : 중간중간 잘라서 색을 입힐 때

       F.      table, th, tr, td : 표를 그릴 때

       G.     img : 이미지 … 등등

2.     CSS

head > style 태그 내에 작성되고, 세미콜론으로 마무리 됨

id :  하나만 존재, #으로 표시

class : 중복 적응이 가능 . 으로 표시함

Javascript

브라우저를 살아 숨쉬게 만들어 주는 것.

클릭, 마우스 이동 등에 따른 변화 등 수 많은 일을 할 수 있게 해주는 것

       A.     변수

let a = 3;          // 변수를 처음 선언할 때 let을 써줍니다. 자료형은 써주지 않아도 됨

let b = 2;

console.log(a + b);         // System.out.println()과 같은 녀석

b = 7;

console.log(a + b);

 

       B.      자료형

문자열에 ‘, “ 상관 없음 , 문자+숫자하면 모두 문자로

boolean 은 똑같음

 

       C.      리스트

let fruits = ['사과', '딸기', '수박'];    // List 보다 편하게 사용할 수 있습니다.

console.log(fruits[0]);

console.log(fruits[1]);

console.log(fruits[2]);

 

       D.     딕셔너리

JSON : 자바스크립트에서 사용하는 딕셔너리

let course = {

'title': '웹개발의 봄, Spring',                    // : 기준으로 왼쪽은 key 오른쪽은 value

 'tutor': '남병관' };

console.log(course);

 

       E.      반복문

let fruits = ['사과', '딸기', '수박']; // List 보다 편하게 사용할 수 있습니다.

for (let i=0; i<fruits.length; i++) {

 let fruit = fruits[i];

 console.log(fruit); }

 

       F.      조건문 : 자바와 동일, 줄띄우기 : Shift + Enter

 

       G.     함수 : function 함수이름 (파라미터) {}

function sample() { alert('얼럿!'); }

 

       H.     백틱 ` : 숫자 1 키 왼쪽

       let name = '내 이름'; let text = `${name}님의 스프링 5주 완주를 축하합니다!`; console.log(text);

           >> ${ 문자열 } 중간에 문자값을 넣을 떄 백틱 사용, 내용 앞뒤에는 ` 사용

jQuery

jQuery 는 미리 작성된 자바스크립트 함수 모음집

HTML, CSS 조작 함수를 미리 만들어서 제공해 주는 것.

jQuery 임포트  : head 태그 사이에

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

jQuery 사용법 : $ 후 ( 따옴표가 아니라 백틱! ). 명령어();

$('#contents').hide();                  > 아이디가 contents 인 녀석을 숨겨라

$('#post-box').show();                 > 보여줘

$('#post-url').val();                      > input 값을 가져와

$('#post-url').val('new text');          > new text 로 imput 값을 넣어

$('#cards-box').empty();               > html 없애기

클라이언트 설계하기

1.     접속하자마자 메모 전체 목록 조회

       A.     GET API 로 불러오기

       B.      메모마다 HTML 만들고 붙이기

2.     메모 생성하기

       A.     입력한 내용 확인하기

       B.      POST API 로 신규 메모 생성하기

       C.      새로고침으로 업데이트 된 목록 확인

3.     메모 변경하기

       A.     클릭한 메모가 어떤 메모인지 확인

       B.      변경한 메모 내용 확인

       C.      PUT API 통해 내용 변경하기

       D.     새로고침해서 업데이트 된 메모 목록 확인

4.     메모 삭제하기

       A.     클릭한 메모가 어떤 메모인지 확인

       B.      DELETE API 이용해서 메모 삭제하기

       C.      새로고침해서 업데이트 된 메모 목록 확인하기

생성하기 writePost

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를 전달합니다.
    $.ajax({
        type: "POST",
        url: "/api/memos",
        contentType: "application/json", // JSON 형식으로 전달함을 알리기
        data: JSON.stringify(data),      // body = data : JSON 문자열로 변환
        success: function (response) {   // 응답값을 response 에 넣는다. 
            alert('메시지가 성공적으로 작성되었습니다.');
            window.location.reload();    // 새로고침
        }
    });
}

POST 방식의 경우

       HEADERS : Content-Type : application/json

           BODY : "username" :  "이름", "contents" : "내용"

조회하기 getMessages

1.     기존 메모 제거하기

       기존에 HTML 로 작성된 부분만 지우고 새로 그린다 (화면에 있는 메모만 제거)

2.     GET API 로 메모 목록 불러오기

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

 

Timestamped  > @Getter 추가하기

Week03Application 에 JPA 반영한다고 알려주는 @EnableJpaAuditing 추가하기

$(document).ready(function () {
        // HTML 문서를 로드할 때마다 실행합니다.
        getMessages();
    })

    // 메모를 불러와서 보여줍니다.
    function getMessages() {
    
        // 1. 기존 메모 내용을 지웁니다.
        $('#cards-box').empty();
        
        // 2. 메모 목록을 불러와서 HTML로 붙입니다.
        $.ajax({
            type: 'GET',
            url: '/api/memos',
            success: function (response) {
                for (let i = 0; i < response.length; i++) { // response 내에 들어있는 메모 목록을 for 문을 통해 돌면서 addHTML
                    let memo = response[i];
                    let id = memo.id;
                    let username = memo.username;
                    let contetnts = memo.contents;
                    let modifiedAt = memo.modifiedAt;
                    addHTML(id, username, contetnts, 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

1.     작성 대상 메모의 username contents 를 확인

2.     메모가 올바른지 확인 > 길이 등을 isValidContents 함수 이용해서

3.     전달할 data 를 JSON 으로 바꾸기

4.     PUT /api/memos/{id} 에 data 전달

contents 는 변경할 경우 id 가 textarea 의 값을 가져와야 함

삭제하기 deleteOne

function deleteOne(id) {
    $.ajax({
        type: "DELETE",
        url: `/api/memos/${id}`,
        success: function (response) {
            alert('메시지 삭제에 성공하였습니다.');
            window.location.reload();
        }
    })

}

 

spring data jpa 날짜 between

https://krksap.tistory.com/959