메모 생성하기 - WritePost 함수 생성

개발 스펙 확인

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

- POST API를 사용하여 메모 신규 생성

 

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

- 미리 구성해놓은 Html 페이지에서, 사용자가 입력한 메모를 가져와야 한다.

- 크롬의 개발자 도구를 통해 텍스트 박스의 id를 가져와서 val을 통해 메모를 가져와보자

크롬의 개발자 도구를 통해 id가 contents 임을 알 수 있다.

 

POST API를 사용하여 메모 신규 생성

 

1. jQuery를 사용하여 값을 가져오기

let contents = $('#contents').val();

 

2. 메모가 올바른지 판단

if (isValidContents(contents) == false) {
    // return을 통해 function의 아래 내용을 진행되지 않게 함.
    return;
}

 

3. genRandomName을 통해 username 부여

- username / contents를 서버에 전달해주어야 함.

- 따라서 임의의 username을 생성

let username = genRandomName(10);

 

4. 전달할 데이터를 json 형식으로 만들어줌

let data = {'username': username, 'contents': contents};

 

5. Ajax를 사용해서 POST 작성

	$.ajax({
                type: "POST",
                url: "/api/memos",
                contentType: "application/json", // JSON 형식으로 전달함을 알리기
                data: JSON.stringify(data),
                success: function (response) {
                    alert('메시지가 성공적으로 작성되었습니다.');
                    window.location.reload();
                }
            });

- data는 ARC의 Body 부분이다.

- json.stringify는 data를 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를 전달.
            $.ajax({
                type: "POST",
                url: "/api/memos",
                contentType: "application/json", // JSON 형식으로 전달함을 알리기
                data: JSON.stringify(data), // ARC의 Body 부분
                success: function (response) {
                    alert('메시지가 성공적으로 작성되었습니다.');
                    window.location.reload();
                }
            });
        }

 

 

사용한 함수

* isValidContents 함수

- <script>에 위치한 미리 구성한 함수

- 사용자가 내용을 올바르게 입력하였는지 확인

        // 사용자가 내용을 올바르게 입력하였는지 확인
        function isValidContents(contents) {
            if (contents == '') {
                alert('내용을 입력해주세요');
                return false;
            }
            // trim은 입력값의 맨 앞 글자와 맨 뒤 글자의 공백을 제거
            if (contents.trim().length > 140) {
                alert('공백 포함 140자 이하로 입력해주세요');
                return false;
            }
            return true;
        }

 

* genRandomName 함수

// 익명의 username을 만듬.
        function genRandomName(length) {
            let result = '';
            let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            let charactersLength = characters.length;
            for (let i = 0; i < length; i++) {
                let number = Math.random() * charactersLength;
                let index = Math.floor(number);
                result += characters.charAt(index);
            }
            return result;
        }

 

 

업데이트 된 메모 메시지 확인

 

- 메시지는 성공적으로 작성되었다고 하지만 새로고침 해도 메모가 불러와지지 않음

- 메모를 불러오는 function을 작성해야함.