아직 개념이 잘 이해가 안돼서 그런가 RESTful API랑 fetch API의 차이가 뭔지 모르겠다.
정확히 어떤 경우에 쓰는지도 잘 모르겠고..ㅜ
애초에 이 둘이 비교 대상인지부터 헷갈린다 😵💫그리고 오늘 팀 스크럼 시간에 인터넷 연결이 안좋아서 그런지 계속 끊겼는데, 나는 멈춘 것도 모르고 혼자 열심히 말고하고 있었다…ㅋㅎ 다른분들이 계속 웃으시길래 내 얘기가 그렇게 웃긴가..? 했는데 그냥 혼자 떠들고 있는 바보였다. 나혼자 인터넷 세상에(?) 떨어진거 같아서 굉장히 외로웠다는…ㅎ
RestAPI
REST API
REST 아키텍처를 스타일을 따르는 API를 의미한다.
HTTP 프로토콜을 기반으로 동작하고, 자원을 URI로 표현하고, HTTP 메서드를 사용해서 자원을 조작하는 방식의 API를 의미한다.
REST (Representational state Transfer)
- WEB의 아키텍처 스타일의 일종으로 WEB의 장점을 최대한 활용하기 위한 방식으로 설계된 소프트웨어 아키텍처 원칙이다.
- 자원을 이름(URI)으로 구분해서 HTTP METHOD를 통해 해당 자원의 상태를 주고받는 모든것을 의미한다.
1. 자원(Resource)
URI(Uniform Resource Identifier) → 정형화된 자원 식별자
- 여러개일때는 최대한 복수형으로 작성
- ex) /posts/1
2. HTTP Method
게시글 CRUD
GET /posts/{postId}
POST /posts/
PATCH. /posts/{postId}
DELETE. /posts/{postId}
3. Representational
정형화된 응답을 주는 것
실습
https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status#successful_responses
응답 상태 코드
- 200 ~ 500
- 2xx -> success
- 200 -> ok
- 201 -> created
- 3xx -> redirect
- 4xx -> request fault
- 5xx -> server fault
ResponseEntity
@GetMapping("/{postId}")
//@ResponseStatus(HttpStatus.OK)
public ResponseEntity<Post> findById(@PathVariable Long postId) {
log.info("Find post by id: {}", postId);
Post findPost = postRepository.findById(postId);
return ResponseEntity.status(HttpStatus.OK).body(findPost);
}@ResponseStatus(HttpStatus.*OK*) 대신
return ResponseEntity.*status*(HttpStatus.*OK*).body(findPost); 로
응답코드와 body를 함께 반환해줄 수 있음
JavaScript
- 웹 브라우저에서 실행되는 동적 프로그래밍 언어
- 웹 페이지에 상호작용과 동적인 기능을 부여하는 데 필수적인 역할
HTML 뼈대, CSS 는 살, JS는 숨결(?)
자료형
var
-
변수 생성
-
재선언이 가능
-
함수 스코프를 지님 → **var로 선언된 변수는 코드의 최상단으로 올라가는 호이스팅**이 적용됨
-
이 경우에 첫번째 줄의 콘솔이 출력됨
let
- 변수 생성
- 재선언 불가
- 블록스코스를 가지고 변수가 선언된 블록 내에서만 사용 가능
const
- 상수 생성
상수 = 한 번 값이 할당되면 변경할 수 없는 데이터를 저장하는 메모리 공간
null, undefined, NaN
null
- 의도적으로 아무 값도 없음을 나타내기 위해 사용되는 값
undefined
- 변수에 선언은 됐지만 값이 할당되어 있지 않을때 자동으로 부여되는 값
NaN(Not a Number)
- 숫자 자료형이 아닌 값
- 숫자가 아닌 값을 숫자로 변환할 수 없을 때 NaN이 반환
비교 연산자
동등 연산자
- “==” 로 값을 비교
- 앞에 값과 뒤에 값의 자료형을 일치시켜서 비교
- 1 == “1” 은 true
- 1이 int이기 때문에 뒤에 “1”을 int형으로 변환해서 비교
일치 연산자
- “===”로 값을 비교
- 앞에 값과 뒤에 값의 자료형을 있는 그대로 비교
- 1 === “1” 은 false
부등 연산자
- “! =”로 비교
- 동등 연산자와 반대로 동작
불일치 연산자
- “! ==”로 비교
- 일치 연산자와 반대로 동작
함수
JS 에서는 함수를 1급 객체로 취급하고 다룬다. → 값으로 취급
- 변수에 함수를 할당할 수 있고 인자로 부여될 수 있으며 반환값으로 넘겨줄 수 있음
- 변수에 함수를 할당
const hello = function () {
console.log("hello world!");
};- 변수에 함수를 할당해서 다른 함수의 인자로 넣는게 가능
function greet(fn) {
fn();
}
greet(hello);- 함수를 반환값으로 넘겨줄 수 있음
function greet() {
return function () {
console.log("hello world!");
};
}
const hello = greet();
hello();화살표 함수
(자바의 lambda같은 느낌)
const 함수이름 = () = > body;고차 함수
- 함수에서 다른 함수를 인자로 받거나 반환
function fn1(fn, val) {
return fn(val);
}
const fn1result = fn1(num => num * num, 5);클로저
함수와 그 함수가 선언될 때의 스코프를 기억하는 기능
- 함수가 자신의 스코프 외부에서 정의돼 있는 함수에 접근이 가능
- 메모리 누수가 발생할 수 있기 때문에 적절히 사용하는게 좋음
function createCounter() {
let count = 0;
return function() {
count += 1;
return count;
};
}
const counter = createCounter();
console.log(counter()); // 1객체
JS의 객체는 키 : 값 의 형태로 생김
const object = {
name: "송희수"
}object.name으로 호출
JSON
JavaScript Object Notation
- 텍스트 기반 데이터 표현 방식
- 서버랑 클라이언트 데이터 교환에 사용
{
"key": "value"
}이벤트
브라우저를 이용하는 사용자가 웹페이지와 상호작용할때 발생하는 여러 사건들
이벤트 전파
이벤트를 어디까지 적용할지 잘 정하는게 중요
preventdefault();로 멈출 수 있음
실습
null과undefined는 값이 없다는 것은 같아서==는 true가 나오지만===는 false가 나옴
함수
function hello() {
console.log("hello");
}
---
let sayHello = hello;
---
sayHello();
---
> VM1041:2 hello- 바로 실행 함수
(function() { console. log ("Hello World!") }) ();
- 고차 함수
function fn1(fn, val) {
return fn(val);
}
------
const fn1re = fn1((num) => num*num, 3);
------
console.log(fn1re);
------
> VM1423:1 9- JSON 내부에 함수 생성 가능
const ac = {
"eat": function() { console. log ("Hello") }
} ;동기 / 비동기 통신
Fetch API
- 네트워크 요청을 수행하기 위한 방법을 제공
- fetch API는 비동기적으로 HTTP 요청을 보내고 응답을 처리할 수 있게 해주는 인터페이스
동기/비동기
요청한 작업에 대해 완료 여부를 신경 써서 작업을 순차적으로 수행할지 아닌지에 대한 관점
동기
- 요청을 보내고 응답을 받을 때까지 기다린 후 다음 작업 수행
논리적으로 I/O 작업으로부터 돌아올 결과를 기다리고 처리를 한다.- 블로킹 - 현재 작업이 완료될 때 까지 다른 작업을 막는것
비동기
- 요청을 보내고 응답을 기다리지 않고 다음 작업을 수행
논리적으로 I/O 작업이 일어나는 동안 다른 작업을 수행할 수 있다.- 시스템 자원을 효율적으로 사용할 수 있음
- 코드가 동기방식에 비해 비선형적임 → 구현과, 관리가 어려울 수 있음
Promise
비동기 작업의 상태를 나타내기 위한 객체
내부적으로 3가지 상태를 가짐
- pending(수행중) → 대기 상태 Fulfilled와 Rejected로 갈림
- Fulfilled(이행)
- 성공적으로 수행되면 결과값을 가짐 → 이행상태
- 한번 Pending에서 Fulfilled가 되면은 상태변경이 불가능
- 작업의 결과가 then()에 들어감
- Rejected(실패)
- 비동기 통신이 실패한 상태
- 한번 Pending에서 Rejected가 되면은 상태변경이 불가능
- 작업의 결과가 catch()에 들어감
fetchAPI 사용방법
fetch(url, option)
.then(onFulfilled => { ... })
.catch(onRejected => { ... });
서버와 통신할 때
- method는 문자로 보내줌
- content type을 key : value로 보내줌
실습
- 이벤트
<button>갱신</button>
- 경로 설정
<script src="/js/api.js"></script> → HTML 파일에 js파일의 경로를 알려줘야 함
