[Timeline Service] 타임라인 서비스 만들기 4. 메모 작성 (writePost)

1. 작성한 메모 불러오기

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

 

 

2. 올바르게 입력되었는지 확인하기

        function isValidContents(contents) {
            if (contents == '') {
                alert('내용을 입력해주세요');
                return false;
            }

            if (isValidContents(contents) == false) {
                return;
            }

isValidContents 로 확인했을 때, 타당하지 않으면(false) 그냥 return 해버림. 

 

 

 

3. 익명의 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;
        }

let username = genRandomName(10);

*Math.random() ? 

 

 

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),
                success: function (response) {
                    alert('메시지가 성공적으로 작성되었습니다.');
                    window.location.reload();
                }
            });

$.ajax ▷ jQuery를 이용

 type: "POST"  ▷ post 방식으로 데이터 전달

data ▷ (ARC에서의 body) JSON.stringify ? 아래에 ▼

contentType ▷ 제약 있으니까 문자열로 보내긴 하는데 이거 사실 JSON이야 를 알려줌

success: function (response) ▷ 문자열 생성해서 데이터가 성공적으로 들어왔을때 서버의 응답을 response에 넣어주겠다는 약속 

---

▼ JSON.stringify ? 

 

JavaScript 값이나 객체를 JSON 문자열로 변환 (stringify -> string이 되도록 만든다.)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

---

 

여기까지 하고 메모를 작성해보면, 성공적으로 작성된다는 알림이 뜸. 

근데 조회가 안된다. 메모는 성공적으로 작성이 됐지만 불러와서 표시해주는 html이 없어서 그렇다.

고거는 다음 글에