[웹개발] JavaScript 주요 메서드 2

Fetch API(비동기 요청)

메서드	설명
fetch(url)	GET 요청(기본)
fetch(url, { method: "POST", body })	POST 요청
fetch(url, { method: "PUT", body })	PUT 요청
fetch(url, { method: "DELETE" })	DELETE 요청
response.json()	JSON 데이터를 파싱
response.text()	텍스트 데이터로 변환
response.status	HTTP 상태 코드 반환
response.ok	응답 성공 여부(true/false)

fetch("https://api.example.com/data")
  .then((response) => response.json()) 
  .then((data) => console.log(data))
  .catch((error) => console.error("Error:", error));

Axios(더 쉬운 HTTP 요청)

메서드	설명
axios.get(url)	GET 요청
axios.post(url, data)	POST 요청
axios.put(url, data)	PUT 요청
axios.delete(url)	DELETE 요청
axios.defaults.headers.common	기본 헤더 설정

import axios from "axios";

axios.get("https://api.example.com/users")
  .then((response) => console.log(response.data))
  .catch((error) => console.error(error));

LocalStorage & SessionStorage(클라이언트 데이터 저장)

메서드	설명
localStorage.setItem(key, value)	로컬 저장소에 데이터 저장
localStorage.getItem(key)	데이터 가져오기
localStorage.removeItem(key)	데이터 삭제
localStorage.clear()	모든 데이터 삭제
sessionStorage.setItem(key, value)	세션 저장소에 데이터 저장
sessionStorage.getItem(key)	세션 데이터 가져오기

// LocalStorage
localStorage.setItem("username", "Alice");
console.log(localStorage.getItem("username")); // "Alice"
localStorage.removeItem("username");
localStorage.clear();

// SessionStorage
sessionStorage.setItem("token", "abcdef123456");
console.log(sessionStorage.getItem("token")); // "abcdef123456"

FormData(파일 업로드 및 폼 데이터 전송)

메서드	설명
new FormData(formElement)	폼 데이터 객체 생성
formData.append(key, value)	데이터 추가
formData.get(key)	데이터 가져오기
formData.delete(key)	데이터 삭제

let formData = new FormData();
formData.append("username", "Alice");
formData.append("profilePic", fileInput.files[0]);

fetch("https://api.example.com/upload", {
  method: "POST",
  body: formData,
})
  .then((response) => response.json())
  .then((data) => console.log(data));

WebSockets(실시간 데이터 통신)

메서드	설명
new WebSocket(url)	웹소켓 연결 생성
socket.send(data)	메시지 전송
socekt.onopen	연결이 열릴 때 실행
socket.onmessage	메시지 수신 시 실행
socket.onerror	오류 발생 시 실행
socket.onclose	연결이 닫힐 때 실행

let socket = new WebSocket("wss://example.com/socket");

socket.onopen = () => {
  console.log("웹소켓 연결됨");
  socket.send("Hello Server!");
};

socket.onmessage = (event) => {
  console.log("서버 메시지:", event.data);
};

socket.onerror = (error) => {
  console.error("WebSocket Error:", error);
};

socket.onclose = () => {
  console.log("웹소켓 연결 종료");
};

Geolocation API(위치 정보 가져오기)

메서드	설명
navigator.geolocation.getCurrentPosition(success, error)	현재 위치 가져오기
position.coords.latitude	위도 가져오기
positioncoords.longitude	경도 가져오기

navigator.geolocation.getCurrentPosition(
  (position) => {
    console.log("위도:", position.coords.latitude);
    console.log("경도:", position.coords.longitude);
  },
  (error) => console.error("위치 정보 가져오기 실패:", error)
);

Notification API(웹 알림)

메서드	설명
Notification.requestPermission()	알림 허가 요청
new Notification(title, options)	알림 생성

Notification.requestPermission().then((permission) => {
  if (permission === "granted") {
    new Notification("안녕하세요!", {
      body: "이것은 웹 알림입니다.",
    });
  }
});

Clipboard API(클립보드 복사/붙여넣기)

메서드	설명
navigator.clipboard.writeText(text)	클립보드에 텍스트 복사
navigator.clipboard.readText()	클립보드에서 텍스트 가져오기

navigator.clipboard.writeText("복사할 텍스트").then(() => {
  console.log("텍스트가 복사되었습니다!");
});

navigator.clipboard.readText().then((text) => {
  console.log("클립보드 내용:", text);
});