개발자

Api로 간단하게 데이터 저장

2023년 05월 03일•조회 277

회사에서 카페24를 사용하는데 저는 퍼블리셔라 개발쪽은 진짜 기초적인것만 할 줄 아는 js초보라 Firebase나 httpxmlrequest, WebSocket 이런거 사용법을 잘몰라서 그러는지 검색해도 영상을 봐도 이해가 너무 어렵더라구요.. 혹시 간단한 예제로 사용자가 데이터 이를테면 문자열을 입력하면 데이터가 저장되어서 목록에 추가되고 새로고침해도 유지되려면 어떻게 해야하나요?

javascript

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 2

강서지님의 프로필 사진

웹소켓(WebSocket)은 실시간 대화창 등을 구현할 때 필요한 스펙이라 지금 당장 볼 필요는 없을 것 같습니다. 카페24를 사용해 본 적은 없지만 추측하건대 카페24 쪽에서 DB를 제공하고 있을 가능성이 있어서 그 부분 확인이 먼저일 것 같아요. 만약에 제공되는 DB가 없다면 DB를 구축하는 작업부터 하셔야 할 거고요. 혼자서 하셔야 하고 js가 가능하시다고 하니, 일단은 node.js 기반으로 서버 구축이 가능한 express(https://expressjs.com/) 같은 프레임워크를 추천 드립니다. 기본적으로 제공되는 메서드 덕에 초보자에게도 허들이 낮다고 생각됩니다. API는 심플하게 생각하면 두 개의 엔드포인트가 필요하겠네요. 유저가 데이터를 입력해서 저장 버튼을 누르면 서버로 POST하는 것과, 그 목록을 GET하는 api가 필요합니다. 서버에 저장할 데이터를 보낼 때는 form 태그와 submit 버튼을 주로 이용하실 거고요. 이 최소한의 스펙을 토이 프로젝트로 간단하게, 최대한 빠르게 구현해보시면 실무에서도 어떤 방향으로 작업할지 갈피가 조금 잡히지 않을까 싶습니다.

커리어리 AI 봇님의 프로필 사진

간단하게 사용자가 입력한 문자열을 저장하고, 이를 목록에 추가하며 새로고침해도 유지되도록 하기 위해서는 다음과 같은 방법이 있습니다. 1. 서버 측 데이터베이스를 사용하는 방법 - 사용자가 입력한 데이터를 서버에 전송합니다. - 서버에서는 데이터베이스에 데이터를 저장합니다. - 저장된 데이터를 클라이언트에 전송하여 목록에 추가합니다. - 클라이언트는 새로고침해도 이전에 추가된 목록이 유지됩니다. - 이 방법은 서버 측에서 데이터베이스를 관리하므로 보안에 더 강력합니다. 2. 클라이언트 측 로컬 스토리지를 사용하는 방법 - 사용자가 입력한 데이터를 클라이언트 측 로컬 스토리지에 저장합니다. - 저장된 데이터를 클라이언트에서 읽어와 목록에 추가합니다. - 클라이언트는 새로고침해도 이전에 추가된 목록이 유지됩니다. - 이 방법은 서버 측에서 데이터를 관리하지 않기 때문에 보안에 취약합니다. 클라이언트 측 로컬 스토리지를 사용하는 방법은 다음과 같이 구현할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>간단한 데이터 저장 예제</title>
</head>
<body>
  <input type="text" id="input-text">
  <button onclick="addData()">추가</button>
  <ul id="list"></ul>

  <script>
    function addData() {
      // 사용자가 입력한 데이터를 가져옵니다.
      const text = document.getElementById("input-text").value;
      if (!text) {
        alert("데이터를 입력해주세요.");
        return;
      }

      // 로컬 스토리지에서 데이터 목록을 가져옵니다.
      const list = JSON.parse(localStorage.getItem("dataList")) || [];

      // 새로운 데이터를 목록에 추가합니다.
      list.push(text);

      // 로컬 스토리지에 목록을 저장합니다.
      localStorage.setItem("dataList", JSON.stringify(list));

      // 목록을 화면에 출력합니다.
      const listElement = document.getElementById("list");
      listElement.innerHTML = "";
      for (const data of list) {
        const li = document.createElement("li");
        li.innerText = data;
        listElement.appendChild(li);
      }
    }

    // 초기화: 저장된 데이터 목록을 화면에 출력합니다.
    const list = JSON.parse(localStorage.getItem("dataList")) || [];
    const listElement = document.getElementById("list");
    for (const data of list) {
      const li = document.createElement("li");
      li.innerText = data;
      listElement.appendChild(li);
    }
  </script>
</body>
</html>

커리어리 AI 봇의 답변을 평가해 주세요!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기
#javascript

더 많은 질문

답변을 기다리는 질문모든 질문

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!