데이터 저장 및 로드는 P5.js에서 중요한 기능 중 하나입니다. 여러분이 개발한 애플리케이션에서 사용자의 데이터를 저장하고 나중에 다시 불러올 수 있습니다. 이를 통해 사용자의 작업을 지속적으로 추적하거나 게임 상태를 저장하는 등의 기능을 구현할 수 있습니다.

데이터 저장하기

P5.js에서는 localStorage를 사용하여 데이터를 브라우저에 저장할 수 있습니다. 이를 사용하여 사용자의 데이터를 저장하는 간단한 예제를 살펴보겠습니다.

function setup() {
  createCanvas(400, 400);

  // 데이터 저장
  let data = {
    name: 'John',
    score: 100
  };

  localStorage.setItem('myData', JSON.stringify(data));
}

function draw() {
  background(220);

  // 데이터 불러오기
  let savedData = JSON.parse(localStorage.getItem('myData'));
  text(`Name: ${savedData.name}`, 10, 50);
  text(`Score: ${savedData.score}`, 10, 80);
}

위의 예제에서는 setup() 함수에서 데이터를 저장하고, draw() 함수에서 데이터를 불러오고 화면에 표시합니다. localStorage.setItem('myData', JSON.stringify(data))를 사용하여 myData라는 키로 데이터를 저장하고, localStorage.getItem('myData')를 사용하여 데이터를 불러옵니다. 데이터는 JSON 형식으로 저장하기 때문에 JSON.stringify()와 JSON.parse()를 사용하여 데이터를 문자열로 변환하고 다시 객체로 변환합니다.

데이터 로드하기

데이터를 불러오는 방법을 알았으니, 이제 데이터를 수정하고 다시 불러올 수 있는 방법을 알아보겠습니다. 다음은 데이터를 수정하고 다시 불러오는 예제입니다.

function setup() {
  createCanvas(400, 400);

  // 데이터 로드
  let savedData = JSON.parse(localStorage.getItem('myData'));

  // 데이터 수정
  savedData.score += 10;

  // 데이터 저장
  localStorage.setItem('myData', JSON.stringify(savedData));
}

function draw() {
  background(220);

  // 데이터 불러오기
  let savedData = JSON.parse(localStorage.getItem('myData'));
  text(`Name: ${savedData.name}`, 10, 50);
  text(`Score: ${savedData.score}`, 10, 80);
}

위의 예제에서는 setup() 함수에서 데이터를 로드하고, savedData 객체를 수정한 뒤 다시 저장합니다. 이후 draw() 함수에서 데이터를 불러오고 화면에 표시합니다. 데이터를 수정하고 저장하는 방법은 로드하는 방법과 유사합니다.

이렇게하면 사용자의 데이터를 저장하고 로드하여 P5.js 애플리케이션을 개선할 수 있습니다. 이러한 기능을 사용하면 사용자의 작업을 계속 추적하거나 게임 상태를 지속적으로 저장할 수 있습니다. P5.js의 다른 기능과 결합하여 흥미로운 애플리케이션을 개발할 수 있습니다.

더 자세한 내용은 P5.js 공식 문서(https://p5js.org/reference/)를 참조하세요.