🎯 웹 브라우저, 생각보다 훨씬 똑똑하다!

야, 솔직히 말해서 예전에는 웹 브라우저가 그냥 문서 보는 용도였잖아? 그런데 지금은 완전 다르다고! 😮

요즘 브라우저는 네이티브 앱 못지않은 기능을 제공해. 카메라 접근, GPS 위치 추적, 푸시 알림, 심지어 블루투스 기기 연결까지 가능하다니까?

이 모든 게 가능한 이유는 바로 브라우저 API와 Web API 덕분이야. 이 친구들은 JavaScript를 통해 브라우저의 강력한 네이티브 기능들을 우리가 쉽게 사용할 수 있게 해주는 인터페이스야. 🎨

🔍 브라우저 API vs Web API, 뭐가 다른 거야?

이 둘을 헷갈려하는 사람들이 엄청 많아. 사실 나도 처음엔 그랬거든? 😅

간단하게 정리하면 이래:

🛡️ 보안과 권한 관리 - 안전하게 사용하기

강력한 API들은 보안 위험도 함께 가져와. 그래서 브라우저는 여러 보안 장치를 마련해뒀어! 🔒

// Permissions API로 권한 상태 확인
async function checkPermission(permissionName) {
  try {
    const result = await navigator.permissions.query({ name: permissionName });
    
    console.log(`${permissionName} 권한:`, result.state);
    // 'granted' (허용), 'denied' (거부), 'prompt' (물어볼 예정)
    
    // 권한 변경 감지
    result.addEventListener('change', () => {
      console.log('권한 상태 변경:', result.state);
    });
    
    return result.state;
  } catch (error) {
    console.error('권한 확인 실패:', error);
  }
}

// 사용 예시
await checkPermission('geolocation');
await checkPermission('notifications');
await checkPermission('camera');

// 권한 요청 전 사용자에게 설명하기 (UX 개선)
async function requestLocationWithExplanation() {
  const permissionStatus = await checkPermission('geolocation');
  
  if (permissionStatus === 'prompt') {
    // 권한 요청 전에 왜 필요한지 설명
    const userConfirmed = confirm(
      '주변 재능 공유자를 찾기 위해 위치 정보가 필요합니다. 허용하시겠어요?'
    );
    
    if (userConfirmed) {
      navigator.geolocation.getCurrentPosition(
        (position) => console.log('위치 획득 성공!'),
        (error) => console.error('위치 획득 실패:', error)
      );
    }
  } else if (permissionStatus === 'denied') {
    alert('위치 권한이 거부되었습니다. 브라우저 설정에서 변경해주세요.');
  }
}

🌐 CORS와 Same-Origin Policy

브라우저는 보안을 위해 다른 도메인의 리소스 접근을 제한해. 이게 바로 CORS(Cross-Origin Resource Sharing)야!

// CORS 에러 해결 방법

// 1. 서버에서 CORS 헤더 설정 (백엔드 작업)
// Access-Control-Allow-Origin: *
// Access-Control-Allow-Methods: GET, POST, PUT, DELETE
// Access-Control-Allow-Headers: Content-Type

// 2. 프록시 서버 사용
const proxyUrl = 'https://cors-anywhere.herokuapp.com/';
const targetUrl = 'https://api.example.com/data';

fetch(proxyUrl + targetUrl)
  .then(response => response.json())
  .then(data => console.log(data));

// 3. JSONP 방식 (구형 방법, 권장하지 않음)
function loadJSONP(url, callback) {
  const script = document.createElement('script');
  script.src = url + '?callback=' + callback;
  document.body.appendChild(script);
}

// 4. 개발 중에는 브라우저 CORS 비활성화 (프로덕션에서는 절대 금지!)
// Chrome: --disable-web-security 플래그로 실행

🚀 실전 프로젝트 예제 - 종합 활용

자, 이제 배운 API들을 조합해서 실제 프로젝트를 만들어보자! 💪
재능넷 같은 플랫폼에서 사용할 수 있는 실용적인 예제들이야.

class PhotoApp {
  constructor() {
    this.stream = null;
    this.canvas = document.getElementById('canvas');
    this.ctx = this.canvas.getContext('2d');
    this.video = document.getElementById('video');
  }
  
  // 카메라 시작
  async startCamera() {
    try {
      this.stream = await navigator.mediaDevices.getUserMedia({
        video: { facingMode: 'user', width: 1280, height: 720 },
        audio: false
      });
      
      this.video.srcObject = this.stream;
      await this.video.play();
      
      console.log('카메라 시작됨! 📷');
    } catch (error) {
      console.error('카메라 접근 실패:', error);
      alert('카메라를 사용할 수 없습니다.');
    }
  }
  
  // 사진 촬영
  capturePhoto() {
    this.canvas.width = this.video.videoWidth;
    this.canvas.height = this.video.videoHeight;
    this.ctx.drawImage(this.video, 0, 0);
    
    // 촬영 효과음 (Web Audio API)
    this.playShutterSound();
    
    return this.canvas.toDataURL('image/jpeg', 0.9);
  }
  
  // 필터 적용
  applyFilter(filterType) {
    const imageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
    const data = imageData.data;
    
    switch(filterType) {
      case 'grayscale':
        for (let i = 0; i < data.length; i += 4) {
          const avg = (data[i] + data[i+1] + data[i+2]) / 3;
          data[i] = data[i+1] = data[i+2] = avg;
        }
        break;
        
      case 'sepia':
        for (let i = 0; i < data.length; i += 4) {
          const r = data[i], g = data[i+1], b = data[i+2];
          data[i] = Math.min(255, r * 0.393 + g * 0.769 + b * 0.189);
          data[i+1] = Math.min(255, r * 0.349 + g * 0.686 + b * 0.168);
          data[i+2] = Math.min(255, r * 0.272 + g * 0.534 + b * 0.131);
        }
        break;
        
      case 'brightness':
        const brightness = 50;
        for (let i = 0; i < data.length; i += 4) {
          data[i] += brightness;
          data[i+1] += brightness;
          data[i+2] += brightness;
        }
        break;
    }
    
    this.ctx.putImageData(imageData, 0, 0);
  }
  
  // 사진 저장
  async savePhoto() {
    const dataURL = this.canvas.toDataURL('image/jpeg');
    
    // Clipboard API로 클립보드에 복사
    const blob = await (await fetch(dataURL)).blob();
    await navigator.clipboard.write([
      new ClipboardItem({ 'image/png': blob })
    ]);
    
    // 알림 표시
    new Notification('사진 저장 완료! 📸', {
      body: '클립보드에 복사되었습니다.',
      icon: dataURL
    });
    
    // localStorage에 저장 (최근 사진 목록)
    const recentPhotos = JSON.parse(localStorage.getItem('recentPhotos') || '[]');
    recentPhotos.unshift({ url: dataURL, timestamp: Date.now() });
    localStorage.setItem('recentPhotos', JSON.stringify(recentPhotos.slice(0, 10)));
  }
  
  // 카메라 종료
  stopCamera() {
    if (this.stream) {
      this.stream.getTracks().forEach(track => track.stop());
      this.video.srcObject = null;
      console.log('카메라 종료됨');
    }
  }
  
  playShutterSound() {
    const audioContext = new AudioContext();
    const oscillator = audioContext.createOscillator();
    const gainNode = audioContext.createGain();
    
    oscillator.connect(gainNode);
    gainNode.connect(audioContext.destination);
    
    oscillator.frequency.value = 800;
    gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
    gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
    
    oscillator.start(audioContext.currentTime);
    oscillator.stop(audioContext.currentTime + 0.1);
  }
}

// 사용법
const app = new PhotoApp();
document.getElementById('startBtn').addEventListener('click', () => app.startCamera());
document.getElementById('captureBtn').addEventListener('click', () => app.capturePhoto());
document.getElementById('saveBtn').addEventListener('click', () => app.savePhoto());

class TalentFinder {
  constructor() {
    this.userLocation = null;
    this.talents = [];
  }
  
  // 현재 위치 가져오기
  async getCurrentLocation() {
    return new Promise((resolve, reject) => {
      if (!navigator.geolocation) {
        reject(new Error('Geolocation API 미지원'));
        return;
      }
      
      navigator.geolocation.getCurrentPosition(
        (position) => {
          this.userLocation = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
            accuracy: position.coords.accuracy
          };
          resolve(this.userLocation);
        },
        (error) => reject(error),
        {
          enableHighAccuracy: true,
          timeout: 10000,
          maximumAge: 60000  // 1분간 캐시 사용
        }
      );
    });
  }
  
  // 주변 재능 공유자 검색
  async findNearbyTalents(radius = 5000) {  // 반경 5km
    try {
      await this.getCurrentLocation();
      
      // 서버에 위치 정보 전송하고 주변 재능자 목록 받기
      const response = await fetch('https://www.jaenung.net/api/nearby-talents', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          latitude: this.userLocation.lat,
          longitude: this.userLocation.lng,
          radius: radius
        })
      });
      
      this.talents = await response.json();
      
      // 거리 계산 및 정렬
      this.talents.forEach(talent => {
        talent.distance = this.calculateDistance(
          this.userLocation.lat,
          this.userLocation.lng,
          talent.latitude,
          talent.longitude
        );
      });
      
      this.talents.sort((a, b) => a.distance - b.distance);
      
      // 알림 전송
      if (this.talents.length > 0) {
        new Notification('주변 재능 발견! 🎯', {
          body: `${this.talents.length}명의 재능 공유자를 찾았어요!`,
          icon: '/icon.png'
        });
      }
      
      return this.talents;
    } catch (error) {
      console.error('재능 검색 실패:', error);
      throw error;
    }
  }
  
  // 두 지점 간 거리 계산 (Haversine 공식)
  calculateDistance(lat1, lng1, lat2, lng2) {
    const R = 6371;  // 지구 반지름 (km)
    const dLat = this.toRad(lat2 - lat1);
    const dLng = this.toRad(lng2 - lng1);
    
    const a = Math.sin(dLat/2) * Math.sin(dLat/2) +
              Math.cos(this.toRad(lat1)) * Math.cos(this.toRad(lat2)) *
              Math.sin(dLng/2) * Math.sin(dLng/2);
    
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    const distance = R * c;
    
    return Math.round(distance * 1000);  // 미터 단위로 반환
  }
  
  toRad(degrees) {
    return degrees * Math.PI / 180;
  }
  
  // 실시간 위치 추적 (이동 중)
  watchLocation(callback) {
    return navigator.geolocation.watchPosition(
      (position) => {
        this.userLocation = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        callback(this.userLocation);
      },
      (error) => console.error('위치 추적 실패:', error),
      { enableHighAccuracy: true }
    );
  }
  
  // 결과를 화면에 표시
  displayResults() {
    const container = document.getElementById('results');
    container.innerHTML = '';
    
    this.talents.forEach(talent => {
      const card = document.createElement('div');
      card.className = 'talent-card';
      card.innerHTML = `
        <h3>${talent.name}</h3>
        <p>${talent.skill}</p>
        <p>📍 ${talent.distance}m 거리</p>
        <button onclick="contactTalent('${talent.id}')">연락하기</button>
      `;
      container.appendChild(card);
    });
  }
}

// 사용법
const finder = new TalentFinder();

document.getElementById('searchBtn').addEventListener('click', async () => {
  try {
    await finder.findNearbyTalents(5000);
    finder.displayResults();
  } catch (error) {
    alert('위치 정보를 가져올 수 없습니다.');
  }
});

class NotificationManager {
  constructor() {
    this.permission = Notification.permission;
    this.notifications = [];
  }
  
  // 알림 권한 요청
  async requestPermission() {
    if (this.permission === 'granted') {
      return true;
    }
    
    const result = await Notification.requestPermission();
    this.permission = result;
    
    if (result === 'granted') {
      this.showWelcomeNotification();
      return true;
    }
    
    return false;
  }
  
  // 환영 알림
  showWelcomeNotification() {
    const notification = new Notification('알림 설정 완료! 🎉', {
      body: '이제 중요한 소식을 놓치지 마세요!',
      icon: '/icon.png',
      badge: '/badge.png'
    });
    
    setTimeout(() => notification.close(), 3000);
  }
  
  // 새 메시지 알림
  notifyNewMessage(sender, message) {
    if (this.permission !== 'granted') return;
    
    const notification = new Notification(`${sender}님의 메시지`, {
      body: message.substring(0, 100),
      icon: sender.profileImage,
      tag: 'message-' + sender.id,  // 같은 발신자는 하나만 표시
      requireInteraction: true,      // 사용자가 닫을 때까지 유지
      actions: [
        { action: 'reply', title: '답장하기' },
        { action: 'view', title: '보기' }
      ]
    });
    
    notification.onclick = () => {
      window.focus();
      window.location.href = '/messages/' + sender.id;
      notification.close();
    };
    
    this.notifications.push(notification);
  }
  
  // 예약 알림 (특정 시간에)
  scheduleNotification(title, body, timestamp) {
    const now = Date.now();
    const delay = timestamp - now;
    
    if (delay > 0) {
      setTimeout(() => {
        new Notification(title, {
          body: body,
          icon: '/icon.png',
          vibrate: [200, 100, 200]
        });
      }, delay);
      
      // localStorage에 저장 (페이지 새로고침 대비)
      const scheduled = JSON.parse(localStorage.getItem('scheduledNotifications') || '[]');
      scheduled.push({ title, body, timestamp });
      localStorage.setItem('scheduledNotifications', JSON.stringify(scheduled));
    }
  }
  
  // 주기적 알림 (매일, 매주 등)
  setRecurringNotification(title, body, intervalMs) {
    setInterval(() => {
      if (this.permission === 'granted') {
        new Notification(title, { body, icon: '/icon.png' });
      }
    }, intervalMs);
  }
  
  // 배터리 부족 알림
  async checkBatteryAndNotify() {
    if ('getBattery' in navigator) {
      const battery = await navigator.getBattery();
      
      if (battery.level < 0.15 && !battery.charging) {
        new Notification('배터리 부족! 🔋', {
          body: `배터리가 ${Math.round(battery.level * 100)}% 남았습니다.`,
          icon: '/battery-low.png',
          requireInteraction: true
        });
      }
    }
  }
  
  // 모든 알림 닫기
  closeAll() {
    this.notifications.forEach(n => n.close());
    this.notifications = [];
  }
}

// 사용법
const notificationManager = new NotificationManager();

// 초기화
notificationManager.requestPermission();

// 새 메시지 수신 시
socket.on('newMessage', (data) => {
  notificationManager.notifyNewMessage(data.sender, data.message);
});

// 30분 후 알림 예약
const futureTime = Date.now() + (30 * 60 * 1000);
notificationManager.scheduleNotification(
  '회의 시간입니다!',
  '10분 후 온라인 미팅이 시작됩니다.',
  futureTime
);

// 매일 오전 9시 알림 (24시간 간격)
notificationManager.setRecurringNotification(
  '좋은 아침입니다! ☀️',
  '오늘도 재능넷에서 새로운 기회를 찾아보세요!',
  24 * 60 * 60 * 1000
);

🌍 브라우저 호환성 체크

모든 브라우저가 모든 API를 지원하는 건 아니야. 호환성 체크는 필수! 🔍

// 기능 감지 (Feature Detection)
function checkAPISupport() {
  const support = {
    geolocation: 'geolocation' in navigator,
    notification: 'Notification' in window,
    mediaDevices: 'mediaDevices' in navigator,
    localStorage: typeof Storage !== 'undefined',
    fetch: 'fetch' in window,
    webAudio: 'AudioContext' in window || 'webkitAudioContext' in window,
    canvas: (() => {
      const canvas = document.createElement('canvas');
      return !!(canvas.getContext && canvas.getContext('2d'));
    })(),
    clipboard: 'clipboard' in navigator,
    battery: 'getBattery' in navigator,
    intersectionObserver: 'IntersectionObserver' in window
  };
  
  console.log('브라우저 API 지원 현황:', support);
  return support;
}

// 폴리필 로드 (구형 브라우저 지원)
function loadPolyfills() {
  // Fetch API 폴리필
  if (!window.fetch) {
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/whatwg-fetch@3.6.2/dist/fetch.umd.js';
    document.head.appendChild(script);
  }
  
  // Intersection Observer 폴리필
  if (!('IntersectionObserver' in window)) {
    const script = document.createElement('script');
    script.src = 'https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver';
    document.head.appendChild(script);
  }
}

// 안전한 API 사용
async function safeGetLocation() {
  if (!('geolocation' in navigator)) {
    console.error('Geolocation API 미지원');
    // 대체 방법: IP 기반 위치 추정
    return await getLocationByIP();
  }
  
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(resolve, reject);
  });
}

// 대체 기능 제공
function showNotificationFallback(title, message) {
  if ('Notification' in window && Notification.permission === 'granted') {
    new Notification(title, { body: message });
  } else {
    // 대체: 페이지 내 알림 표시
    const toast = document.createElement('div');
    toast.className = 'toast-notification';
    toast.innerHTML = `<strong>${title}</strong><p>${message}</p>`;
    document.body.appendChild(toast);
    
    setTimeout(() => toast.remove(), 3000);
  }
}

💡 실무 팁 & 베스트 프랙티스

마지막으로 실무에서 정말 중요한 팁들을 정리해볼게! 이건 경험에서 나온 진짜 노하우야. 🎯

// 완벽한 API 호출 패턴
class APIHandler {
  constructor() {
    this.cache = new Map();
    this.loading = new Set();
  }
  
  async callAPI(endpoint, options = {}) {
    const cacheKey = `${endpoint}-${JSON.stringify(options)}`;
    
    // 1. 캐시 확인
    if (this.cache.has(cacheKey)) {
      const cached = this.cache.get(cacheKey);
      if (Date.now() - cached.timestamp < 60000) {  // 1분 캐시
        return cached.data;
      }
    }
    
    // 2. 중복 요청 방지
    if (this.loading.has(cacheKey)) {
      return new Promise((resolve) => {
        const checkInterval = setInterval(() => {
          if (!this.loading.has(cacheKey)) {
            clearInterval(checkInterval);
            resolve(this.cache.get(cacheKey)?.data);
          }
        }, 100);
      });
    }
    
    this.loading.add(cacheKey);
    
    try {
      // 3. 로딩 UI 표시
      this.showLoading();
      
      // 4. API 호출 (타임아웃 포함)
      const controller = new AbortController();
      const timeoutId = setTimeout(() => controller.abort(), 10000);
      
      const response = await fetch(endpoint, {
        ...options,
        signal: controller.signal
      });
      
      clearTimeout(timeoutId);
      
      // 5. 응답 검증
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }
      
      const data = await response.json();
      
      // 6. 캐시 저장
      this.cache.set(cacheKey, {
        data,
        timestamp: Date.now()
      });
      
      // 7. 성공 피드백
      this.showSuccess('데이터를 불러왔습니다!');
      
      return data;
      
    } catch (error) {
      // 8. 에러 처리
      console.error('API 호출 실패:', error);
      
      if (error.name === 'AbortError') {
        this.showError('요청 시간이 초과되었습니다.');
      } else if (!navigator.onLine) {
        this.showError('인터넷 연결을 확인해주세요.');
      } else {
        this.showError('데이터를 불러오는데 실패했습니다.');
      }
      
      throw error;
      
    } finally {
      // 9. 정리 작업
      this.loading.delete(cacheKey);
      this.hideLoading();
    }
  }
  
  showLoading() {
    document.getElementById('loader')?.classList.add('active');
  }
  
  hideLoading() {
    document.getElementById('loader')?.classList.remove('active');
  }
  
  showSuccess(message) {
    this.showToast(message, 'success');
  }
  
  showError(message) {
    this.showToast(message, 'error');
  }
  
  showToast(message, type) {
    const toast = document.createElement('div');
    toast.className = `toast toast-${type}`;
    toast.textContent = message;
    document.body.appendChild(toast);
    
    setTimeout(() => toast.remove(), 3000);
  }
}

// 사용 예시
const api = new APIHandler();

async function loadUserData() {
  try {
    const userData = await api.callAPI('/api/user/profile');
    displayUserProfile(userData);
  } catch (error) {
    // 에러는 이미 APIHandler에서 처리됨
    console.log('사용자 데이터 로드 실패');
  }
}

🎨 UX 개선 팁

🎬 마무리하며

와, 여기까지 읽었다면 정말 대단해! 🎉

브라우저 API와 Web API는 웹 개발의 핵심이야. 이 친구들을 잘 활용하면 네이티브 앱 못지않은, 아니 어쩌면 더 나은 웹 애플리케이션을 만들 수 있어.

기억해, API는 도구일 뿐이야. 중요한 건 이 도구들을 어떻게 조합해서 사용자에게 가치를 제공하느냐지. 💎

처음엔 어려워 보일 수 있지만, 하나씩 실습하다 보면 어느새 자연스럽게 사용하게 될 거야. 실패를 두려워하지 말고, 계속 실험하고 배워나가!

그리고 혹시 막히는 부분이 있다면? 개발자 커뮤니티에 질문하거나, 공식 문서를 참고하거나, 아니면 재능넷에서 전문가의 도움을 받는 것도 좋은 방법이야! 😊