Skip to content

Latest commit

 

History

History
190 lines (132 loc) · 4.88 KB

Java (11) - 계속 18e58125c06a49638423d8726dea0175.md

File metadata and controls

190 lines (132 loc) · 4.88 KB

Java (11) - 계속

작업중: In progress 태그: Dev, 백엔드프로그래밍, 웹&모바일, 자바프로그래밍기초 학습일: 01/11/2023

System Architecture 와 Layer

use-case 주도 객체지향 설계 패턴

robustness diagram

개발 방법론

관점에 따라 다를 수 있다. (red box)

관점에 따라 다를 수 있다. (red box)

frontend 실습

REST API

서버에 요청했을 때, 서버에서 상태와 값을 응답하는 것

  • HTTP method

    1. create

      post → 요청할 때 마다 데이터가 추가된다.

    2. read (retrieve)

      get → 요청 처리 후 데이터 변경은 없다.

    3. update

      put → 요청 처리 후 추가되는 데이터는 없고 변경만 된다.

    4. delete

      delete → 요청 처리 후 데이터가 삭제된다.

Untitled

  • 기본 구현 코드
fetch('http://example.com/movies.json')
  .then((response) => response.json())
  .then((data) => console.log(data));
  • post 메서드 구현 예제
// POST 메서드 구현 예제
async function postData(url = '', data = {}) {
  // 옵션 기본 값은 *로 강조
  const response = await fetch(url, {
    method: 'POST', // *GET, POST, PUT, DELETE 등
    mode: 'cors', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, *same-origin, omit
    headers: {
      'Content-Type': 'application/json',
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: 'follow', // manual, *follow, error
    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data), // body의 데이터 유형은 반드시 "Content-Type" 헤더와 일치해야 함
  });
  return response.json(); // JSON 응답을 네이티브 JavaScript 객체로 파싱
}

postData('https://example.com/answer', { answer: 42 }).then((data) => {
  console.log(data); // JSON 데이터가 `data.json()` 호출에 의해 파싱됨
});
  • post 메서드 구현 실습
fetch('http://localhost:8080/boards', {
        method : 'POST',
        headers: {
          'Content-type': 'application/x-www-form-urlencoded' 
        },
        body: `title=${title}content=${content}password=${password}`
      }) // 계약서 개념 -> JSON 비동기 설명
      .then((response) => {return response.json();}) 
			//위 약속이 이행됐을 때, 응답 정보를 받을 json객체  
			//한 줄 이니 중괄호, return, ; 생략가능 
      .then((obj) => {console.log(obj)}); 
			//위 프로미스(return값) 가 이행됐을 때, 실행 될 함수 
    };

요청과 응답 과정

cf.

  • 디버깅 찾는 경로

console > network

preserve log / disable cache (항상 체크0

headers > request headers

payload

  • AJAX와 CORS
@CrossOrigin(origins = "http://127.0.0.1:5500")

// 와일드카드(*) 또는 배열 형태로 여러개 추가 가능
@CrossOrigin(origins = {"http://127.0.0.1:5500", "http://localhost:5500"})

console > network

headers > request headers

view source > Origin

backend 실습

  • postman

프론트엔드 개발과 무관하게 API 생성하여 테스트할 수 있는 프로그램

https://www.postman.com/downloads/

다운로드 > 업데이트

get new request : 게시글 REST API 테스트

HTTP 요청

Untitled

  1. Query String 방식으로 데이터 보내기

    1. 브라우저가 URL을 cache에 보관

      → 외부 노출

      → 보안에 취약

  2. Message-body 방식으로 데이터 보내기

    (content- length, type 필수)

    1. 브라우저가 cache에 보관하지 않는다.

      → 직접적이 외부 노출 방지

📍 보안 강화? 까진x http security 가 보안 강화의 형태

따라서, postman delete 는 body에서!

필드 & 프로퍼티(setter, getter)

Untitled

  • 프로퍼티명 : get, set 제거 후 첫 문자를 소문자로 변경
  • 필드만 있으면 setter, getter 획득 안됨

Java

location.href

페이지 리다이렉트

split()

return 되는 값은 배열형태로!

isNaN()