Spring Framework

타임라인서비스) 메모 생성하기 - writePost 함수

na_o 2021. 7. 22. 21:13
728x90
/*index.html*/

...

//Validation
function isValidContents(contents) {
    if (contents == '') { //입력한 내용이 없을 때
        alert('내용을 입력해주세요'); //경고창 띄움
            return false; //함수의 결과값을 false로 리턴
    }
    //입력한 내용이 140byte가 초과되면
    if (contents.trim().length > 140) { //trim(): 앞뒤 공백 모두 제거
        alert('공백 포함 140자 이하로 입력해주세요'); //경고창 띄움
        return false; //함수의 결과값을 false로 리턴
    }
    return true; //함수의 결과값을 true로 리턴
}

// 익명의 username을 만듭니다.
function genRandomName(length) {
    let result = '';
    //문자를 다 가져와 문자열로 만듦
    let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    //characters변수의 문자열 길이
    let charactersLength = characters.length;
    for (let i = 0; i < length; i++) {
    	//0~문자열길이 범위의 실수를 랜덤으로 만듦
        let number = Math.random() * charactersLength;
        //소수점은 floor 함수로 버림
        let index = Math.floor(number);
        //랜덤으로 만든 숫자의 위치에 있는 문자 하나를 가져와서 result 변수에 이어붙임
        result += characters.charAt(index);
    }
    return result; //결과 문자열을 반환
}

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",
        data: JSON.stringify(data), //JavaScript 값이나 객체를 JSON 문자열로 변환
        success: function(response) {
            alert('메시지가 성공적으로 작성되었습니다.');
            window.location.reload(); //url 새로고침
        }
    });
}

...