타임라인 프로젝트 만들기 - 메모생성하기(writePost 함수)

* 개발 순서 확인

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

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

3. 새로고침하여 업데이트된 메모 목록 확인하기

 

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

이떄, .val() .text() .html() 에 차이점을 알아두자.

- $(셀렉터).val()  → input태그에 정의된 value속성의 값 or input태그에 입력된 값 

- $(셀렉터).text()  → 셀렉터 하위에 있는 자식 태그들의 문자열만 출력

- $(셀렉터).html()  → 셀렉터 하위에 있는 자식 태그들을 태그나 문자열 따질 것 없이 전부 가져온다.

 

2. 작성한 내용 확인하기

미리 작성된 코드를 활용해서 작성한 내용에 대한 검증을 해보자!

위에 작성된 스크립트는 "빈값 or 140이상" 일경우에는 false 를 리턴하도록 작성된 코드이며, 사전에 작성을 했기때문에

아래와같이 작성을 하면 검증을 할 수 있다.(빈값, 140자 이하 모두 만족해야 true를 반환한다.)

3. 랜덤한 username 만들기

이부분도 사전에 작성한 스크립트 코드를 참고하여 만들어보자.

미리 작성된 코드를 바탕으로 아래와같이 genRandomName 에 길이(length)를 입력하면 랜덤한 username을 생성할 수 있다.

Math.random() : 두 값 사이의 난수 생성 (0.0 ~ 1 사이의 난수 생성)

Math.floor() : 소수값이 있을때 소수점이하를 버린다.(내림)

Math.ceil( ) : 소수값이 있을때 소수점 올림 

CharAt() : 입력받은 index에서 문자열을 반환한다. 

4. 전달할 데이터를 JSON 형태로 만들기

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

이떄, JSON.stringify 는 JSON 을 문자열로 만들어주는것.

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

JSON.stringify() - JavaScript | MDN