본문 바로가기
코드 정리/Javascript

[자바스크립트 14일 완전정복] 10일차 - 브라우저 API 및 로컬 스토리지

by rien_d 2025. 3. 12.

자바스크립트 14일 완전정복

 

 

자바스크립트는 단순히 웹 페이지의 요소를 조작하는 것뿐만 아니라, 브라우저의 다양한 기능을 활용할 수도 있어요.
오늘은 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage), JSON 데이터 처리, Fetch API를 이용한 HTTP 요청, 그리고 에러 처리 방법을 배워보겠습니다.

 

 

1. 로컬 스토리지(LocalStorage)와 세션 스토리지(SessionStorage)

1.1 스토리지 개념

브라우저는 데이터를 저장할 수 있는 웹 스토리지(Web Storage) 기능을 제공합니다.

  • localStorage: 데이터를 영구적으로 저장 (브라우저를 닫아도 유지됨)
  • sessionStorage: 데이터를 세션 동안만 유지 (브라우저를 닫으면 삭제됨)

✔ 쿠키보다 사용이 간편하고 저장할 수 있는 데이터 용량이 큼 (약 5MB까지 가능)

 

1.2 localStorage 활용법

데이터 저장

localStorage.setItem("username", "이예나");

데이터 가져오기

let username = localStorage.getItem("username");
console.log(username); // "이예나"

데이터 삭제

localStorage.removeItem("username"); // 특정 데이터 삭제
localStorage.clear(); // 전체 데이터 삭제

✔ 문자열(String) 데이터만 저장 가능, 객체를 저장하려면 JSON 변환이 필요

 

1.3 sessionStorage 활용법

세션 스토리지는 브라우저를 닫으면 데이터가 사라짐을 제외하면 localStorage와 동일해요.

sessionStorage.setItem("sessionData", "임시 데이터");
console.log(sessionStorage.getItem("sessionData")); // "임시 데이터"

sessionStorage.removeItem("sessionData");
sessionStorage.clear();

 

 

 

 

2. JSON.stringify()와 JSON.parse()

자바스크립트에서 객체를 localStorage에 저장할 때는 JSON 형식으로 변환해야 합니다.

2.1 객체를 JSON으로 변환 (JSON.stringify())

let user = { name: "이예나", age: 28 };
localStorage.setItem("user", JSON.stringify(user));

✔ 객체를 문자열(JSON) 형식으로 변환 후 저장

 

2.2 JSON을 객체로 변환 (JSON.parse())

let userData = localStorage.getItem("user");
let userObj = JSON.parse(userData);

console.log(userObj.name); // "이예나"
console.log(userObj.age); // 28

✔ 저장된 JSON 데이터를 다시 객체로 변환

 

 

 

3. Fetch API로 서버 데이터 가져오기

3.1 Fetch API란?

fetch()는 자바스크립트에서 HTTP 요청을 보내고 응답을 처리하는 최신 방식이에요.
✔ 기존의 XMLHttpRequest보다 훨씬 간결하고 직관적

 

3.2 fetch() 기본 사용법 (then() 활용)

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json()) // 응답을 JSON으로 변환
  .then(data => console.log(data)) // 데이터 출력
  .catch(error => console.log("에러 발생:", error));

✔ then()을 사용해 응답 데이터를 순차적으로 처리
✔ catch()를 사용해 오류 처리 가능

 

3.3 async/await을 사용한 fetch()

async/await을 활용하면 더 직관적인 코드 작성이 가능해요.

async function getPost() {
  try {
    let response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.log("에러 발생:", error);
  }
}

getPost();

✔ await 키워드를 사용하면 then() 없이도 비동기 코드 작성 가능
✔ try...catch를 활용해 오류 발생 시 처리 가능

 

3.4 POST 요청 보내기

서버에 데이터를 보낼 때는 fetch()의 두 번째 인자로 method: "POST"를 지정해야 해요.

async function createPost() {
  let postData = {
    title: "새로운 게시글",
    body: "이것은 새로운 게시글입니다.",
    userId: 1
  };

  try {
    let response = await fetch("https://jsonplaceholder.typicode.com/posts", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(postData)
    });

    let result = await response.json();
    console.log("응답 데이터:", result);
  } catch (error) {
    console.log("에러 발생:", error);
  }
}

createPost();

✔ POST 요청 시 body에 데이터를 JSON.stringify()로 변환하여 전송
✔ 응답 데이터는 await response.json()으로 처리

 

 

 

4. try-catch를 활용한 에러 처리

4.1 try-catch 기본 사용법

try {
  let result = JSON.parse("잘못된 JSON 문자열");
  console.log(result);
} catch (error) {
  console.log("에러 발생:", error.message);
}

✔ try 블록에서 오류 발생 시, catch 블록이 실행됨

 

4.2 fetch()와 try-catch를 활용한 네트워크 오류 처리

async function fetchData() {
  try {
    let response = await fetch("https://jsonplaceholder.typicode.com/invalid-url");
    
    if (!response.ok) {
      throw new Error("HTTP 오류 발생: " + response.status);
    }

    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.log("에러 발생:", error);
  }
}

fetchData();

✔ 응답 상태(response.ok)를 확인하여 HTTP 오류도 감지 가능

 

 

5. 예제: 사용자의 이름을 로컬 스토리지에 저장하고 불러오기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>로컬 스토리지 예제</title>
</head>
<body>

  <input type="text" id="username" placeholder="이름 입력">
  <button id="save">저장</button>
  <button id="load">불러오기</button>
  <p id="result"></p>

  <script>
    let saveButton = document.getElementById("save");
    let loadButton = document.getElementById("load");
    let usernameInput = document.getElementById("username");
    let result = document.getElementById("result");

    saveButton.addEventListener("click", function() {
      let username = usernameInput.value;
      localStorage.setItem("username", username);
      alert("저장되었습니다!");
    });

    loadButton.addEventListener("click", function() {
      let storedName = localStorage.getItem("username");
      result.textContent = storedName ? `저장된 이름: ${storedName}` : "저장된 데이터가 없습니다.";
    });
  </script>

</body>
</html>

✔ 사용자가 입력한 이름을 localStorage에 저장하고 불러오는 간단한 예제

 

 

 

 

오늘은 브라우저 API와 로컬 스토리지 활용법을 배웠어요.
✅ localStorage와 sessionStorage를 이용해 브라우저에 데이터 저장 가능
✅ JSON.stringify()와 JSON.parse()를 활용해 객체 데이터를 저장하고 변환 가능
✅ fetch()를 사용해 서버에서 데이터를 가져오거나 보낼 수 있음
✅ try-catch를 활용해 에러가 발생했을 때 프로그램이 중단되지 않도록 처리 가능

 

다음 강좌에서는 모듈과 웹팩(Webpack) 기초에 대해 배워볼 예정이에요! 🚀

 

저작자표시 비영리 동일조건

'코드 정리 > Javascript' 카테고리의 다른 글

[자바스크립트 14일 완전정복] 12일차 - 객체 지향 프로그래밍(OOP) 기초  (0) 2025.03.14
[자바스크립트 14일 완전정복] 11일차 - 모듈과 웹팩(Webpack) 기초  (0) 2025.03.13
[자바스크립트 14일 완전정복] 9일차 - DOM 조작과 이벤트 핸들링  (1) 2025.03.11
[자바스크립트 14일 완전정복] 8일차 - 비동기 처리 (Async & Await, Promise)  (1) 2025.03.10
[자바스크립트 14일 완전정복] 7일차 - ES6+ 문법과 최신 자바스크립트  (0) 2025.03.09

관련글

티스토리툴바