API가 무엇인가요?

API는 프로토콜(통신 규약)입니다.
프로토콜이란, 서버와 클라이언트가 소통하기 위한 규칙입니다.
쉽게 생각해 서버가 보여주는 메뉴판, 자판기라고 생각할 수 있습니다.
레시피나 유통과정에 대해 알 필요 없이 금액을 지불하면 원하는 것을 받을 수 있습니다.

API를 왜 쓰는데요?

사용자에게 더 편한 서비스 제공하기 위해 사용합니다.
개발의 프로세스 개선과 시간 단축, 그리고 유저 데이터 관리면에서 유용하게 사용할 수 있습니다.

API는 문제가 없나요?

HTTP를 주고 받을 때 보안에 취약할 수 있습니다. ( 예) DDOS 공격 )
보완을 강화하기 위해 토큰, API키 등의 인증과정을 추가하기도 합니다.

참고 자료:
API란? API의 정의와 종류 그리고 장단점
코딩초보들이 헷갈리는 용어 : API가 뭐냐면
API 기초개념 잡아드림. 5분 순삭
API란? 개념 및 유용한 API들 소개, 날씨 API 자바스크립트 실전 활용 방법
[개발자 필수 지식] API의 의미 장점 종류까지
API 보안

---

AJAX가 뭐예요?

• 자바스크립트로 서버에 요청하는 것
• 새로고침 없는 부드러운 화면 전환을 하고 싶어서 사용

AJAX는 어떤 문제를 가지고 있나요?

• 히스토리가 관리되지 않습니다
• 페이지 없는 이동통신에 의해 보안상의 문제가 발생합니다.

참고 자료:
AJAX란 무엇인가요?
Ajax가 무엇인지 설명하는 영상 (+CORS, fetch 어쩌구)

CSR과 SSR은 언제 사용하나요?

각 사이트의 성격에 맞는 효과적인 렌더링으로 사용자 경험을 개선하기 위해 사용합니다.

• CSR 채택
  • 상호작용이 많은 경우
  • 대부분 페이지가 고객의 개인정보 데이터를 기준으로 구성되는 서비스
  • 검색노출보다 데이터 보호가 더 중요한 경우
    • 모든 서비스에 SEO가 필요하지는 않습니다.

• SSR 채택
  • 회사 홈페이지인 경우
  • 상위노출이 필요한 경우
  • 누구에게나 동일한 내용을 노출해야 하는 경우
  • 페이지 데이터가 자주 바뀌는 경우

• CSR + SSR : Universal App
  • 사용자에 따라 페이지 내용이 바뀌는 데
    • 빠른 인터랙션도 중요한 경우
    • 검색 엔진 최적화도 포기할 수 없는 경우

CSR SSR 어떤 게 더 좋은가요?

CSR의 단점은 SSR의 장점이 되고, SSR의 단점은 CSR의 장점이 됩니다.
각 상황에 맞게 페이지별로 다르게 설정할 수도 있습니다.

CSR

단점

• 사용자가 첫 화면을 보기 까지 시간이 오래 걸릴 수 있습니다.
• SEO가 썩 좋지 못합니다. (Search Engine Optimization)
  • 서버내 등록된 웹사이트를 빠르게 찾을 수 있도록
    사전에 HTML을 분석해 검색엔진에 등록하는 것
  • body가 텅텅 비어있는 CSR은 HTML을 분석하는 데 많은 어려움이 있습니다.

개선 방안

• 초기 로딩 속도와 SEO성능을 개선하는 것에 초점을 맞추는 방식
• 전달받는 스크립트가 가진 핵심이 무엇인지 파악합니다.
  • code-splitting tree- shaking chunk 분리
    • 로딩해야 할 것 들을 줄일 수 있습니다. (로딩 소요 시간↓)
• 라이브러리나 webpack 등
  • 사전에 렌더링된 HTML을 노출
  • SEO를 개선합니다

SSR

단점

1. 깜빡임 이슈가 발생합니다. (UX 좋지않음)
   1. 클릭시 전체적인 웹사이트를 받아옴니다.
2. 서버의 부하가 큽니다.
   1. 클릭이 많을 시 HTML 연산 과정에 부하가 걸림니다.
3. 다운로드 속도가 유저의 행동을 따라오지 못할 수 있습니다.
   1. 여기저기 클릭하면 반응이 없는 경우도 발생합니다.

개선 방법

• TTV와 TTI의 간격을 줄이기 위해서 어떤 노력을 할 수 있을지 고민합니다
• 어떻게 좀 더 매끄러운 UI와 UX를 제공할 수 있을지 고민합니다.

참고 자료:
**[10분 테코톡] 🎨 신세한탄의 CSR&SSR**