Request-Response, SEO, Web APIs

jingjinge·2024년 12월 11일

ASAC TIL WEB 기초 공부

ASAC_07

목록 보기

2/13

Request-Response

Rest API

HTTP상에서 Request-Response를 위해 REST API를 사용한다.

RESTful API는 REST 철학을 잘 적용한 방식을 이야기 한다.

Method+URL = 동사 + 목적어로 구성이 된다.
- Ex) GET /movies/1, POST /movies/2 ...

URL 구성: /Collection/Document/Store/Controller
- 왼쪽에서부터 오른쪽으로 갈수록 하나씩 좁아진다고 생각하면 좋다.
  - /users/hj/favorite-things/Controller
    - Controller는 동사(Get,Post...)등에 대한 의미를 강화한다.

GraphQL

REST API는 각 도메인마다 수많은 API들을 작성하고, 그에 대한 사용법을 적시해야한다.

Backend님 유저 데이터에서 id 가져오는거 만들어주세요.. -> 네
5분뒤, Backend님 유저 데이터에서 id 저장하는거 만들어주세요.. -> 네
2분뒤, Backend님 유저 데이터에서 password 가져오는 만들어주세요.. -> 아..

그를 해결하기 위해 만들어진 것이 GraphQL이다.

(출처: https://blog.apollographql.com/graphql-vs-rest-5d425123e34b)

Backend님 유저 데이터에서 id 다룰 수 있게 해주세요.. -> 유저 데이터를 다룰 수 있는 Resolver 하나 만들어드릴게요
5분뒤, Backend님 유저 데이터에서 id 저장하는거 해주세요.. -> 그쪽이 하시면 됩니다.
2분뒤, Backend님 유저 데이터에서.. -> 그쪽이 하시면 됩니다.

REST API와 Graph QL 장단점 비교

특징	REST API	Graph QL
데이터 요청 방식	고정된 엔드포인트별 응답	클라이언트가 필요한 데이터만 요청 가능
API 설계	여러 엔드포인트 필요	단일 엔드포인트로 설계 가능
학습 난이도	낮음	높음
캐싱	HTTP 캐싱 활용 가능	별도 캐싱 메커니즘 필요
유연성	낮음	높음
실시간 기능 지원	별도 구현 필요	Subscription으로 간단히 구현 가능
서버 부하	요청별 고정	클라이언트의 요청 복잡도에 따라 증가 가능
도구 및 지원	폭 넓고 안정적	최근 증가하지만 REST만큼은 아님

아직 나아가야할 길이 많기 때문에 더 깊게 들어가면 알아야할게 지수적으로 많아진다고 판단했다.
궁금하지만 세세한 개념은 다음에 다뤄보도록 하겠다.

SEO(Search Engine Optimazation)

검색 엔진 최적화라고 한다.

고객 입장에서 생각했을때, 좋은 웹 페이지는 어떤 것일까?

웹 페이지 내용이 좋아야 한다.(관련 정보)
- 좋은 내용
이벤트 및 페이지 이동 성능이 좋아햐 한다.(렌더링 속도)
- Semantic HTML
  - <div>로 도배하지 말고 필요한 부분에 맞춰서 사용한다.
- 키워드 및 메타 태그
  - HTML 문서의 헤드 섹션에 삽입되어 검색 엔진에 특정 정보를 제공한다.
  - 검색 엔진이 페이지를 정확하게 인덱싱하고 적절한 검색 결과에 노출시킨다.
  - 중요 Tag
    - title, description, keywords, robots, viewport, author, open graph

robots.txt & sitemap.xml

검색 엔진(google, naver 등) 전 세계의 웹 서버로부터 웹 크롤링으로 긁어와 분류하는 인덱싱을 한다.

각각의 웹 서버는
- sitemap.xml: 내(웹 서버)가 어떤 웹 페이지를 갖고 있는지에 대한 Map
- robots.txt: 내(웹 서버)가 갖고 있는 어떤 웹 페이지를 웹 크롤러로 허용하고 허용할지

결론적으로, 회사에 입장에서 마케팅 비용으로 엄청난 비용이 쓰이는데
구글에 상위 노출이 될수록 마케팅 비용을 낮추거나, 높은 마케팅 비용의 값어치를 얻을 수 있지 않을까?

Web APIs

JS 런타임 = JS 엔진 + API 및 기타 라이브러리/바이너리

웹 브라우저(예, 우리가 사용하는 Chrome) = V8 자바스크립트 엔진 + Web APIs

자바스크립트 엔진 구성: 크롬 V8 기반

싱글 스레드
Stack + Heap 두 개만 기억

Stack: 함수 실행 및 순서대로 적재 및 수행 + Heap: 선언 및 할당된 변수 및 함수 저장

(출처: https://youtu.be/eiC58R16hb8)

Javascript의 내부 문법이 아닌, Web APIs에서 제공하는 method들이 많다.

fetch, setTimeout, URL, localStorage, sessionStorage, HTMLDivElement, document, indexofDB, XMLHttpRequest, geometry 등

Web APIs를 호출하는 과정

setTimeout(()=>{
console.log("2000ms"); 
}, 2000);

Web APIs에서 setTimeout을 2000초동안 수행한다.
수행후 Task Queue에 console.log를 적재한다.
Call Stack이 빌 때까지 대기 후, 비었을 경우 Stack에 적재한다.
- 만약 Call Stack이 비지 않는다면 이에 따른 지연 시간또한 존재할 수 있다.
Stack에서 순서가 된다면 이를 실행한다.