nodejs 공부 2024.05.17

브라우저 객체 모델(BOM)

js이용시 브라우저 정보에 접근하거나 여러기능들 제어가능 이때 사용할 수 있는 객체 모델이 BOM(browser object model)임.

fastapi

문서fastapi

JavaScript의 fetch API는 웹에서 서버로부터 리소스를 비동기적으로 가져오기 위한 인터페이스. 이는 XMLHttpRequest의 현대적인 대안으로서, 프로미스 기반의 구조를 가지고 있어 더 간단하고, 강력한 에러 핸들링 및 체이닝을 가능하게 함.

fetch API의 주요 특징

1. 프로미스 기반: fetch 함수는 Promise 객체를 반환. 이는 요청이 성공적으로 완료되었을 때 .then()을 사용하여 결과를 처리하거나, .catch()를 사용하여 에러를 처리할 수 있다.
2. 간단한 구문: fetch API는 XMLHttpRequest보다 더 직관적이고 간결한 코드로 HTTP 요청을 수행할 수 있다.
3. 유연한 메소드 지원: fetch는 GET, POST, PUT, DELETE 등 다양한 HTTP 메소드를 지원한다. 요청을 보낼 때 method 속성을 설정하여 이를 쉽게 조절할 수 있다.
4. 헤더와 바디 설정: 요청의 헤더와 바디를 Headers와 Body 객체를 통해 쉽게 구성할 수 있다. 이는 데이터를 서버로 전송하거나, 특정 형태의 데이터를 요청할 때 유용하다.
5. 응답 처리: fetch로 받은 응답은 Response 객체로 표현된다. 이 객체는 응답에 대한 여러 메소드와 속성을 제공하여 데이터를 다루기 쉽게 해준다. 예를 들어, .json() 메소드를 사용하면 JSON 형태의 응답 바디를 자바스크립트 객체로 파싱할 수 있다.

사용 예제

fetch('https://api.example.com/data', { method: 'GET' })
  .then(response => {
    if (response.ok) {
      return response.json(); // 응답을 JSON 형태로 파싱
    }
    throw new Error('Network response was not ok.');
  })
  .then(data => console.log(data)) // 데이터 처리
  .catch(error => console.error('There has been a problem with your fetch operation:', error));

이 예제는 https://api.example.com/data 주소로 HTTP GET 요청을 보내고, 응답을 JSON으로 받아 콘솔에 출력. 에러가 발생하면 콘솔에 에러 메시지를 출력.

fetch API 사용시 고려할 점

• 브라우저 호환성: 대부분의 현대 브라우저에서는 fetch API를 지원하지만, 구버전 브라우저에서는 폴리필을 사용해야 할 수 있다.
• 에러 핸들링: fetch는 네트워크 에러가 발생하지 않는 한 에러를 throw하지 않습니다. 따라서 응답의 .ok 속성을 확인하여 HTTP 에러를 처리해야 한다.
• CORS: 다른 도메인으로의 요청은 CORS 정책에 따라 제한될 수 있다. 서버에서 적절한 CORS 헤더를 설정하지 않으면 요청이 차단될 수 있다.

json

• *JSON (JavaScript Object Notation)**은 데이터를 저장하거나 전송할 때 사용하는 경량의 데이터 교환 형식. JSON은 사람이 읽고 쓰기 쉽고, 기계가 파싱하고 생성하기 쉬운 텍스트를 기반으로 하며, 프로그래밍 언어나 플랫폼에 독립적인 특성을 가지고 있다.

JSON의 주요 특징

1. 텍스트 기반: JSON은 순수한 텍스트 형식이며, 이는 언어나 플랫폼에 구애받지 않고 널리 사용될 수 있다.
2. 읽기 쉬움: JSON은 사람이 읽고 이해하기 쉬운 구조로 되어 있다. 데이터는 이름-값 쌍으로 구성되며, 여러 데이터는 중괄호 {}로 묶어 객체를, 대괄호 []로 묶어 배열을 표현.
3. 자바스크립트와의 호환성: JSON은 자바스크립트에서 객체를 만드는 방식과 매우 유사하여, 자바스크립트에서는 JSON 데이터를 매우 쉽게 다룰 수 있다.
4. 언어 독립적: JSON 형식은 다양한 프로그래밍 언어에서 지원된다. 각 언어에는 JSON 데이터를 파싱하고 생성하기 위한 라이브러리가 있음.

JSON의 구조

• 객체: 객체는 중괄호 {} 안에 키와 값의 쌍으로 구성. 키는 문자열이며, 값은 다양한 타입이 될 수 있다. 예: {"name": "John", "age": 30, "city": "New York"}
• 배열: 배열은 대괄호 [] 안에 값의 리스트로 구성. 배열의 각 항목은 어떠한 타입도 가능하다. 예: ["apple", "banana", "cherry"]
• 값: 값은 문자열, 숫자, 객체, 배열, true, false, null 중 하나가 될 수 있다.

사용 예제

{
  "employees": [
    {"firstName": "John", "lastName": "Doe"},
    {"firstName": "Anna", "lastName": "Smith"},
    {"firstName": "Peter", "lastName": "Jones"}
  ]
}

이 예제에서는 employees라는 키에 3개의 객체를 담은 배열이 값으로 할당되어 있다. 각 객체는 한 명의 직원을 표현하며, firstName과 lastName 속성을 가진다.

JSON 사용 시 고려할 점

• 표준 포맷: JSON 데이터는 UTF-8 인코딩을 사용하는 표준 텍스트 포맷을 따른다.
• 파싱 에러: JSON 형식이 잘못된 경우 (예: 쉼표나 따옴표 누락) 파싱 과정에서 에러가 발생할 수 있다.
• 보안 주의: JSON 데이터를 사용할 때는 외부에서 입력된 JSON을 그대로 사용하기 전에 검증이 필요함. 잘못된 사용은 보안 취약점으로 이어질 수 있다.

서버

express로 간단한 웹서버 열기

const bodyParser = require('body-parser');
const express = require('express');
const app = express();
const port = 3000;
app.use(bodyParser.json());
app.listen(port, () =>{
    console.log(`서버 실행중: http://localhost:${port}`);
});

app.get('/', (req, res) => {
    res.send('Hello World!');
});
app.get('/news', (req, res) => {
    res.send('뉴스임');
});
app.get('/hh', (req, res) => {
    res.send('hh임');
});
app.get('/html', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});
app.post('/data', (req, res) => {
  const jsonData = req.body;
  console.log(jsonData);
  res.send('성공');
});