[TIL] 웹 개발의 기초와 REST API 이해

 

HTML, CSS, JavaScript의 역할

---

 

HTML(Hypertext Markup Language)

웹 페이지의 구조를 만드는 언어

<h1>내일배움캠프 1일차</h1>
<p>HTML, CSS, JavaScript의 역할</p>

 

• 제목
• 문단
• 이미지
• 버튼
• 링크

    ✔ 웹 페이지의 뼈대 역할

 

CSS (Cascading Style Sheets)

웹 페이지의 디자인과 스타일을 담당하는 언어

h1 {
    color: red;
	font-size: 30px;
    }

• 색상
• 레이아웃
• 폰트
• 간격

    ✔ 웹 페이지의 디자인 역할

 

JavaScript

웹 페이지에 동적인 기능을 추가하는 언어

alert(“Hello World”);

• 버튼 클릭 이벤트
• 데이터 처리
• 서버 API 요청
• 화면 동적 변경

    ✔ 웹 페이지의 동작 역할

---

API, HTTP, REST API 개념 정리

---

API(Application Programming Interface)

프로그램과 프로그램이 서로 소통하기 위한 접점

                            프론트엔드   →   서버에 데이터 요청                      ║                      서버   →   데이터 응답                              

• 클라이언트는 서버 내부 구현을 몰라도 API만 알면 사용 가능 

 

HTTP(HyperText Transfer Protocol)

클라이언트와 서버가 서로 파일(HTML, CSS 등)과 데이터(JSON)를 주고받기 위해            사용하는 웹 통신 규약(Protocol)

클라이언트와 서버는 보통 서로 멀리 떨어져 있기 때문에 데이터를 정확하게 주고받기 위해 공통된 형식과 규칙이 필요하며,

이 역할을 HTTP가 담당

• HyperText 하이퍼링크(a 태그)를 통해 다른 웹 페이지나 정보로 바로 이동할 수 있는 텍스트
• Transfer Protocol 텍스트로 작성된 정보를 전달하기 위한 통신 규칙(규약)

HTTP 요청(Request)

// (1) 시작 줄 (Start-Line)
Version: HTTP/1.1
Method: POST 
URL: 홈페이지 주소:80/items

// (2) 헤더 (Headers)
Content-Type: application/json
Accept: application/json, text/html
...

// (3) 본문 (Body)
{
  "name": "새우깡",
  "price": 1500,
  "category": "living"
}

 

HTTP 응답(Response)

// (1) 상태 줄 (Status Line)
Version: HTTP/1.1
Status Code: 201 
Status Text: Created

// (2) 헤더 (Headers)
Content-Type: application/json

// (3) 본문 (Body)
{
  "id": "abc-123-xyz",
  "name": "새우깡",
  "price": 1500,
  "category": "living"
}

 

REST API(Representational State Transfer API)

REST 원칙을 따라 만든 웹 API

𖠌 핵심개념

• 자원(Resource) → URL로 표현
• 행위(Action) → HTTP Method로 표현

HTTP Method (CRUD)

Method	의미
GET	데이터 조회
POST	데이터 생성
PUT	데이터 수정
DELETE	데이터 삭제

 

HTTP 상태 코드

코드	의미
200	성공
201	생성 성공
204	삭제 성공
400	잘못된 요청
404	데이터 없음
500	서버 오류

 

API는 프로그램 간 통신 방법,
REST API는 자원을 URL로 표현하고 HTTP Method로 행동을 정의하는 API 설계 방식이다.

---

느낌점

---

Ꙭ̯  HTML, CSS, JavaScript는 익숙했지만, API와 REST API 개념은 처음이라 이해하는 데 시간이 필요했다.

Ꙭ̮  REST API를 배우면서 백엔드와 연결할 때 필요한 기본 규칙을 알게 되었다.