팀게시판 새글 작성에 TOAST UI Editor 적용 - 취소

register.jsp

0.00MB

수정 전 register 첨부

기존에 form태그로만 이루어진 단순한 형태를 개선하고자 web editor를 알아보던 중 좋은 형태를 발견했다.

 

https://congsong.tistory.com/67

[TOAST UI Editor] - 5분 안에 게시판에 토스트 UI 에디터 적용하기

 

  const editor = new toastui.Editor({  
        el: document.querySelector('#editor'),  
        previewStyle: 'vertical',  
        height: '500px',  
        initialEditType : 'wysiwyg',  
        initialValue: 'content',  
        hideModeSwitch: 'true'  
      });  

markdown형식은 숨기고 표시하도록 설정했다.

작성 후

editor.getHTML();

을 이용해서 HTML로 editor content를 얻을 수 있다.

 

나는 기존에 form형식으로 게시글 작성 화면을 만들어놓았는데,

form태그를 사용하여 AJAX처리를 할 수 있다는 것을 알게되었다.

그리고 AJAX에서 그걸 formData 타입으로 받는다니!!!

 

우선 String type변수에 HTML을 문자열로 저장한다.

-> Fetch API를 사용한다.

// HTML 문서를 가져와서 문자열로 저장하는 예시
fetch('URL_또는_경로')
  .then(response => response.text())
  .then(htmlString => {
    // htmlString 변수에 HTML 문서가 문자열로 저장됨
    console.log(htmlString);
  })
  .catch(error => {
    console.error('Error fetching HTML:', error);
  });

form태그를 사용하여 AJAX 처리시 submit 이벤트를 무효화한다.

form 태그에 id값을 부여하고

$("#id").addEventListener("submit",function(){

이벤트 무효화.

그리고 const formData = new FormData(event.target);

AJAX에 요청 보내기

)

<script>
document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault(); // 기본 폼 제출 동작을 막음

  // FormData 객체를 사용하여 폼 데이터 수집
  const formData = new FormData(event.target);

  // AJAX 요청 보내기
  fetch("서버_URL", {
    method: "POST",
    body: formData
  })
  .then(response => response.text())
  .then(data => {
    // 서버로부터 받은 응답을 처리
    document.getElementById("result").textContent = data;
  })
  .catch(error => {
    console.error("Error:", error);
  });
});
</script>

</body>
</html>

Fetch API에 대해서 알아보자 (jQuery 를 대체할 수 있다. 번들파일 크기 줄일 수 있음)

: REST API를 호출할 때 사용되는 브라우저 내장함수이다. 

API의 URL을 인자로 받고, 미래시점에 얻게될 API 호출 결과를 Promise 객체로 리턴한다.

디폴트는 GET 방식. 응답객체는 json()메서드를 제공함.

response.json() : response 객체로부터 JSON 포맷의 응답 전문을 자바스트립트 객체로 받는다.

 

 

Promise에 대해서 알아보자

Promise : 현재에는 당장 얻을 수는 없지만 가까운 미래에는 얻을 수 있는 어떤 데이터에 접근하기 위한 방법을 제공합니다. 당장 원하는 데이터를 얻을 수 없다는 것은 데이터를 얻는데까지 지연 시간(delay, latency)이 발생하는 경우를 말합니다

findUser(1).then(function (user) {
  console.log("user:", user);
});

function findUser(id) {
  return new Promise(function (resolve) {
    setTimeout(function () {
      console.log("waited 0.1 sec.");
      const user = {
        id: id,
        name: "User" + id,
        email: id + "@test.com",
      };
      resolve(user);
    }, 100);
  });
}

결과값  :

waited 0.1 sec.
user: {id: 1, name: "User1", email: "1@test.com"}

 

콜백함수와의 차이점은 함수를 호출하면 Promise 타입의 결과값이 리턴되고, 이를 가지고 다음에 수행할 작업을 진행함.

 

Promise는 resolve, reject 2개의 함수형 파라미터를 받는다.

 

function returnPromise() {
  return new Promise((resolve, reject) => { ... } );
}

resolve()함수의 인자로는 미래 시점에 얻게될 결과를 넘긴다.

reject()함수의 인자로는 미래시점에 발생할 예외를 넘긴다.

 

정상적인 인자를 넘긴 경우 then() 메서드 호출(결과값을 가지고 수행할 로직을 담은 콜백함수)(중첩사용가)

/ 비정상적인 인자를 넘긴경우 catch()메서드가 호출됨. (예외처리로직)

try-catch와 비슷함!

 

할일 1. 이미지 업로드 처리

2. https://congsong.tistory.com/67

https://velog.io/@io_/Toast-UI-Editor-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%85%EB%A1%9C%EB%93%9C

참고하기

 

https://www.daleseo.com/js-async-promise/

promise 관련 참고글

 

https://www.daleseo.com/js-window-fetch/

자바스크립트의 fetch() 함수로 원격 API 호출하기