---

📝 JavaScript Web API + 프로젝트 학습 정리

1. API 개념

• API: Application Programming Interface

  • 프로그램 간 소통을 돕는 인터페이스
  • 비유: 식당의 웨이터(클라이언트 요청 → 서버 전달 → 결과 응답)

구성 요소

1. 명세(Specification): 제공 기능과 사용 방법 정의
2. 인터페이스(Interface): 실제 통신 규칙 (주로 HTTP 사용)

---

2. Web API

• 웹 애플리케이션 개발에 활용되는 API
• 서버 ↔ 클라이언트 통신 지원

특징

1. HTTP 프로토콜 기반
2. RESTful API: HTTP 메서드 활용 (GET, POST, PUT, DELETE)
3. 데이터 형식: JSON(주로), XML(과거)

---

3. Web Storage API

브라우저 자체 저장소. Key-Value 구조.

localStorage

• 영구 저장 (삭제 전까지 유지)
• 모든 value는 string으로 저장됨
• 객체/배열 → JSON.stringify() 필요
• 꺼낼 때 원래 형태 → JSON.parse()

주요 메서드

1. setItem(key, value)
2. getItem(key)
3. removeItem(key)

➡️ 같은 도메인 내의 다른 페이지에서도 데이터 공유 가능

localStorage.setItem('title', 'review : 파이팅');

// 배열 저장
const users = [{id:1, name:'김일'}, {id:2, name:'김이'}];
localStorage.setItem('users', JSON.stringify(users));

// 조회
const usersFromLocal = JSON.parse(localStorage.getItem('users'));
console.log(usersFromLocal);

// 삭제
localStorage.removeItem('title');

sessionStorage

• 브라우저 세션 동안만 유지
• 브라우저 닫으면 자동 삭제
• 사용법은 localStorage와 동일

---

4. TodoList 프로젝트

폴더: ch06_todolist

요구사항

• 할 일 추가: 입력 → 버튼/Enter → 목록에 추가
• 할 일 표시: 체크박스 + 내용 + 삭제 버튼
• 할 일 상태 변경: 체크 시 취소선 + 흐린 색
• 데이터 저장: localStorage 이용 → 새로고침해도 유지

기술 요구사항

• HTML / CSS / JavaScript (순수)
• DOM API (getElementById, createElement, …)
• 이벤트 (click, keydown, change)
• JSON / Array / String 객체 활용

CSS 명세

• 색상 변수
• 폰트 변수
• 레이아웃 간격 변수
• 그림자 효과

➡️ 01_todolist.html / 01_todolist.js / 01_todolist.css

---

5. ShoppingList 프로젝트

폴더: shoppinglist

요구사항

• 입력: 품목, 가격 두 개의 input
• 추가 시 목록에 항목 표시
• (확장 가능: 총합 표시, 삭제 기능, localStorage 저장)

CSS 관리 전략

1. CSS 분리

   • 01_shoppinglist.css 파일 생성
   • 01_todolist.css 그대로 복사 후 수정
   • 독립성 보장

2. 고급 CSS 기법 적용

   • @import 활용 → CSS 모듈화
   • 공통 스타일은 별도 파일(common.css)로 추출
   • 각 프로젝트 CSS에서 필요한 부분만 불러오기

예시:

/* 01_shoppinglist.css */
@import url('../common/common.css');

/* shoppinglist 전용 스타일 추가 */

➡️ 01_shoppinglist.html / 01_shoppinglist.js / 01_shoppinglist.css

---

정리하면 학습 흐름은
Web API 개념 → localStorage / sessionStorage 실습 → TodoList 프로젝트 → ShoppingList 프로젝트 (CSS 모듈화 실습 포함)