자바스크립트에서 JSON 데이터를 이용하여 텍스트 편집기 생성하기

15 Sep 2023

javascript

자바스크립트를 이용하여 텍스트 편집기를 생성하는 방법에 대해 알아보겠습니다. 이 예제에서는 JSON 데이터를 활용하여 텍스트 편집기를 만들어 보겠습니다.

1. HTML 구조 설정하기

먼저, HTML 파일을 생성하고 해당 파일에 다음과 같은 기본 구조를 설정합니다.

<!DOCTYPE html>
<html>
  <head>
    <title>텍스트 편집기</title>
  </head>
  <body>
    <textarea id="editor"></textarea>
    <button onclick="saveChanges()">변경 사항 저장</button>

    <script src="main.js"></script>
  </body>
</html>

위의 코드에서는 텍스트 편집기를 위한 <textarea> 요소와 변경 사항을 저장하기 위한 버튼이 포함되어 있습니다. 또한, main.js 파일을 로드하여 스크립트를 실행할 수 있도록 합니다.

2. JSON 데이터 로드하기

이제 자바스크립트 코드를 작성하여 JSON 데이터를 로드하고 텍스트 편집기 내용을 초기화하는 함수를 생성해 보겠습니다. main.js 파일을 생성하고 다음 코드를 추가합니다.

// JSON 데이터 로드
fetch('./data.json')
  .then(response => response.json())
  .then(data => {
    // 텍스트 편집기 초기화
    const editor = document.getElementById('editor');
    editor.value = data.text;
  });

위의 코드에서는 fetch 함수를 사용하여 data.json 파일을 가져온 후, 응답을 JSON 형식으로 변환합니다. 이후 로드된 데이터를 기반으로 텍스트 편집기를 초기화합니다.

3. 변경 사항 저장하기

마지막으로, 사용자가 텍스트를 편집한 후 변경 사항을 저장하는 함수를 추가해 보겠습니다. main.js 파일에 다음 코드를 추가합니다.

function saveChanges() {
  // 변경된 텍스트 가져오기
  const editor = document.getElementById('editor');
  const updatedText = editor.value;

  // JSON 데이터 업데이트
  fetch('./data.json', {
    method: 'POST',
    body: JSON.stringify({ text: updatedText }),
    headers: {
      'Content-Type': 'application/json'
    }
  })
    .then(response => response.json())
    .then(data => {
      // 변경 사항 저장 완료 메시지 표시
      console.log('변경 사항이 저장되었습니다.');
    });
}

위의 코드에서는 사용자가 변경한 텍스트를 가져온 후, 해당 텍스트를 JSON 형식으로 변환하여 서버에 업데이트 요청을 보냅니다. 업데이트가 완료되면 변경 사항이 저장되었음을 알리는 메시지를 콘솔에 출력합니다.

마무리

위의 예제를 통해 자바스크립트와 JSON 데이터를 활용하여 텍스트 편집기를 생성하는 방법을 알아보았습니다. 이를 기반으로 개발 환경에 맞게 코드를 수정하고 추가 기능을 구현할 수 있습니다.

#javascript #JSON