Vibe Coding_조코딩_3주차

라이브러리

• 내가 필요할 때 가져다 쓰는 도구 모음

프레임워크

• 이미 짜여진 집 구조에 내가 들어가 사는 것
• 웹프레임워크 중 Node.js와 React의 점유율이 압도적, 프론트엔드 프레임워크 중에서도 React가 압도적인 점유율을 가짐

React

• 컴포넌트를 가지고 구현할 수 있기 때문에 JS가 가진 단점을 커버할 수 있음(JS의 단점: 너무 세분화됨, 매우 많은 기능)

• Vite는 React의 문법을 HTML, CSS, JS의 형태로 변환하는 툴

• Typescript : JS는 유형 구분 없이 다 들어가 있는데 typescript는 그 유형이 정리되어 있어 사용에 용이

• Vite는 Typescript의 언어도 변환해서 브라우저가 읽을 수 있도록 해줌

CDN

클라우드 플레어가 세계 곳곳에 서버를 둠
그곳에 프론트엔드 상에서 받은 캐시(CDN)을 올려둠

정적 웹

• Cloudflare Pages, Vite+React, CSS/HTML/JS
• 캐시된거 전달만
• 코드 실행 브라우저에서 서버 연산 필요 없음

동적 웹

• Cloudflare Workers, NEXT.JS, Remix
• 캐시+실행 필요한 서버
• 코드 실행 서버에서도 서버 연산 필요

서버리스

• Cloudflare Pages Functions: Cloudflare에 Cloudflare Workers를 붙여서 사용

JAM Stack

• 요청 CDN -> 정적 HTML 즉시 응답 -> 필요하면 JS가 API호출
• 트래픽 폭탄 감당 쉬움
• 보안이 비약적으로 좋아짐
• 개발자 경험(DX)이 좋음(프론트/백엔드 분리, 로컬에서 개발하고 바로 배포 등)

API(Application Programming Interface)

앱과 프로그래밍이 요청하고 응답받는 규약

1. 요청

• 목적지(주소)
• 헤더(전송 방식) : GET, POST
• 바디(보낼 것) : query, sort, target

2. 응답

• 형식 : JSON(키:밸류 쌍)
• 응답 의미 설명 : title, contents, thumbnail