웹 페이지 구현 방법 - API

wltjd1688·2025년 2월 7일

백엔드 풀사이클

풀사이클

목록 보기

10/74

웹페이지는 크게 정적인 페이지와 동적인 페이지로 나뉜다.

정적 페이지

화면의 내용/데이터 등의 변동이 없는 페이지를 말합니다.
정적 페이지는 웹서버에서 클라이언트가 요청하자마자 보내주는 HTML/CSS 파일을 말하며, 잘 바뀌지 않는 페이지를 이걸로 작성한다.

동적 페이지

데이터 처리/연산을 통해 화면의 내용, 데이터가 변하는 페이지를 말한다.
웹 서버에서 받은 파일을 클라이언트로부터 데이터에 대한 요청을 웹 어플리케이션 서버에 보내고, 이를 데이터베이스에서 읽어 웹 서버에게 보내, 데이터베이스와 어플리케이션 서버에 의해 동적으로 바뀌는 페이지를 말한다. 대표적인 예시로는 게시판이 있다.

github pages로 웹페이지를 배포할려는데 동적 페이지를 할 수 없다?
github pages에 웹서버를 배포할때 이러한 구현 방법에 따라 베보에 어려움을 겪을 수 있다.
기존에 서버를 동적 페이지인 SSR(서버 사이트 렌더링)방식으로 구현하였다면, 정적 페이지로 바꿔서 올려야 한다. 이를 앞에서 언급한거 처럼 클라이언트가 웹서버에서 받은 파일내에서 모든걸 처리하므로 CSR(클라이언트 사이드 렌더링)이라 한다.

API

Application Programming Interface의 약자로 응용프로그램에서 사용할 수 있도록, 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만드는 인터페이스를 뜻한다. 주로 큰회사나 공공기관에서 제공해준다.
대표적으로 버스어플을 사용할 때 버스정보를 가져오기 위해서 버스회사나 지자체에서 부터 데이터를 받아오는데 이때 사용되는 것이 API이다. 어플을 사용하는 사용자가 어플을 통해서 API에 요청을 하게되면, 해당 정보를 가져올 수 있도록 해주는 것이다. 여기서 백엔드 개발자의 역할은 API와 데이터베이스를 만드는 것이다.

인터페이스란?
중간에서 양쪽이 정보를 전달하거나 대화하는 걸 중재해주는 것이다.

REAT API

여기서 REST는 Representational State Transfer의 약자로 네트워크 상의 자원(데이터, 기능 등)을 고유한 식별자(URI)을 통해 표현하고, 클라이언트와 서버가 HTTP와 같은 프로토콜을 사용하여 상호작용하도록 설계되었다. REST API는 이 HTTP 프로토콜의 규약을 따르는 API를 말한다.

HTTP란?

인터넷으로 연결된 클라이언트와 서버는 HTTP라는 웹 프로토콜인 사용하여 데이터를 주고 받는다. HTTP는 웹 통신 규약으로 요청과 응답을 통해 정보를 교환한다.

HTTP 프로토콜 구조

크게 Head와 Body로 나뉜다.

헤더(Head)
- 통신 상태 정보: 요청 및 응답 상태 코드(예: 200 OK, 404 Not Found)와 같은 정보를 포함합니다.
- 메타데이터: 데이터의 형식(Content-Type), 목적(method), 인코딩, 쿠키 등 통신에 필요한 추가 정보를 전달합니다.
본문(Body)
- 실제 데이터: 서버가 클라이언트에 전달하거나 클라이언트가 서버에 전송하는 실제 데이터가 포함됩니다.
- 데이터의 사용 목적: 전달되는 데이터가 어떤 용도로 사용되는지에 대한 내용이 담길 수 있습니다.

HTTP method

HTTP에 담아 보내는 통신 목적을 말하는것이다.

생성: POST
조회: GET
수정: PUT/PATCH
삭제: DELETE
그 외에 HEAD,OPTIONS,CONNECT,TRACE가 있다.

PATCH와 PUT
PUT은 덮어쓰기라면 PATCH는 부분수정을 말한다.
ex) 마이페이지에서 연락처, 이메일, 집주소등이 있을때, 이중 하나만 바꿀때 PATCH를 함
근데 또 PATCH를 사용하는게 까다로워서 PUT을 사용해도 무방하다.

URL

인터넷 상에서 웹 페이지의 위치와 데이터 연산을 위해 사용된다.
URL은 웹 상의 식별하는 주소로써 사용자가 웹 페이지나 API의 엔드포인트에 접근할 수 있도록하고 데이터 연산에 필요한 경로와 쿼리 파라미터를 전달하여 특정 데이터를 요청하거나 서버의 기능을 실행할 수 있게 해준다.

REST API URL 규칙

일반적으로 다음과 같은 규칙이 있다.

대문자 사용 금지
언더바(_) 대신 하이픈(-) 사용
마지막에 슬래시(/)사용 금지
HTTP 메서드로 이미 Body에 들어가 있기에 행위를 포함하지 않음
파일 확장자 포함 금지
복수형을 쓴다.

예제
http://localhost:8888/products
http://localhost:8888/select_all_products
http://localhost:8888/DeleteAllProducts

REST API의 기본 개념

HTTP 메소드를 사용하여 자원의 목적을 읽고 데이터를 가져오거나 수정할 수 있다.

API 설계

REST API URL의 예제로 사용한걸 이용해 상품의 전체와 개별조회, 수정, 삭제등의 예제를 작성해보자.

상품 전체 조회

http://localhost:8888/products - 전체 상품 조회 : "GET"/products

상품 개별 조회(id)

http://localhost:8888/products/1 - 개별 조회(id=1) : "GET"/products/1
http://localhost:8888/products/2 - 개별 조회(id=2) : "GET"/products/2
http://localhost:8888/products/3 - 개별 조회(id=3) : "GET"/products/3

상품 생성
상품을 생성할 때에는 서버에 해당 상품을 보내면 서버에서 id를 할당하는게 일반적이기에 다음과 같이 작성함
```
http://localhost:8888/products/ 
- 상품 생성: "POST"/products/{id}
```

상품 개별 수정

http://localhost:8888//products/{id} 
- 상품 수정(id={id}) : "PUT||PATCH"/products/{id}

상품 삭제

http://localhost:8888//products/{id}
- 상품 삭제(id={id}) : "DELETE"/products/{id}

일단 해!!!!

이전 포스트

데이터베이스

다음 포스트