🔥 모든 개발자를 위한 HTTP 웹 기본 지식
섹션5. HTTP 메소드 활용
📍 클라이언트에서 서버로 데이터 전송
✔️ 데이터 전달 방식 1) 쿼리 파라미터를 통한 데이터 전송
👉🏻 GET
👉🏻 주로 정렬 필터(검색어)
✔️ 데이터 전달 방식 2) 메시지 바디를 통한 데이터 전송
👉🏻 POST, PUT, PATCH
👉🏻 회원가입, 상품 주문, 리소스 등록, 리소스 변경
1️⃣ 정적 데이터 조회
GET /static/star.jpg HTTP/1.1 Host: localhost:8080 |
HTTP/1.1 200 OK Content-Type: image/jpeg Content-Length: 34012 lkj123kljoiasudlkjaweioluywlnfdo912u34ljko98udjklaslkjdfl;qkawj9;~~~~ |
👉🏻 쿼리 파라미터 미사용
👉🏻 추가적인 데이터 전송 없이 URL 경로만 보내면 이미지 리소스를 서버에서 내려 줌
✅ 이미지, 정적 텍스트 문서를 조회할 때 사용함
✅ 조회는 GET 사용
✅ 정적 데이터를 일반적으로 쿼리 파라미터 없이 리소스 경로로 단순하게 조회 가능
2️⃣ 동적 데이터 조회
https://www.google.com/search?q=hello&hl=ko | GET /search?q=hello&hl=ko HTTP/1.1 Host:www.google.com |
👉🏻 쿼리 파라미터 사용
👉🏻 쿼리 파라미터를 기반으로 정렬 필터해서 결과를 동적으로 생성해 줌
✅ 주로 검색, 게시판 목록에서 정렬 필터(검색)할 때 사용
✅ 조회 조건을 줄여 주는 필터, 조회 결과를 정렬하는 정렬 조건에 주로 사용
✅ 조회는 GET 사용
✅ GET은 쿼리 파라미터 사용해서 데이터를 전달
3️⃣ HTML Form 데이터 전송
👉🏻 POST 전송 - 저장
![]() <form action="/save" method="post"> <input type="text" name="username" /> <input type="text" name="age" /> <button type="submit">전송</button> </form> |
POST /save HTTP/1.1 Host: localhost:8080 Content-Type: application/x-www-form-urlencoded username=kim&age=20 |
👉🏻 GET 전송 - 저장
![]() <form action="/members" method="get"> <input type="text" name="username" /> <input type="text" name="age" /> <button type="submit">전송</button> </form> |
POST /members?username=kim&age=20HTTP/1.1 Host: localhost:8080 |
👉🏻 multipart/form-data
![]() <form action="/save" method="post"enctype="multipart/form-data" > <input type="text" name="username" /> <input type="text" name="age" /> <input type="file" name="file1" /> <button type="submit">전송</button> </form> |
웹 브라우저가 생성한 요청 HTTP 메시지 POST /save HTTP/1.1 Host: localhost:8080 Content-Type: multipart/form-data; boundary=----XXX -----XXX Content-Dispositon: form-data; name="username" kim -----XXX Content-Dispositon: form-data; name="age" 20 -----XXX Content-Dispositon: form-data; name="file1"; filename="intro.png" Content-Type: image/png 109238a9o0p3eqwokjas09ou3oirjwoe9u34ouief...(이미지에 대한 byte 정보) -----XXX-- |
✅ HTML Form submit 시 POST 전송(회원 가입, 상품 주문, 데이터 변경 시에 사용)
✅ Content-Type: application/x-www.form.urlencoded 사용
👉🏻 form의 내용을 메시지 바디를 통해서 전송(key=value 형식의 쿼리 파라미터)
👉🏻 전송 데이터를 url encoding(UTF-8) 처리
ex) abc김 = abc%EA%B9%80
✅ HTML Form은 GET 전송도 가능
✅ Content-Type: multipart/form-data
👉🏻 파일 업로드 같은 바이너리 데이터 전송 시 사용
👉🏻 다른 종류의 여러 파일과 폼의 내용 함께 전송 가능(그래서 이름이 multipart)
✅ 참고: HTML Form 전송은 GET, POST만 지원
4️⃣ HTTP API 데이터 전송
POST /members HTTP/1.1 Content-Type: application/json { "username": "young", "age": 20 } |
/members |
✅ 서버 to 서버 통신에 많이 사용
👉🏻 백엔드 시스템 통신
✅ 앱 클라이언트
👉🏻 아이폰, 안드로이드
✅ 웹 클라이언트
👉🏻 HTML에서 Form 전송 대신 자바 스크립트 통신에 사용(ajax)
예) Reacr, VueJs 같은 웹 클라이언트 API 통신
✅ POST, PUT, PATCH: 메시지 바디를 통해서 데이터 전송
✅ GET: 조회, 쿼리 파라미터로 데이터 전달
✅ Content-Type: application/json을 주로 사용(사실상 표준)
👉🏻 TEXT, XML, JSON 등등
📍 HTTP API 설계 예시
✔️ HTTP API - 컬렉션(대부분 컬렉션을 사용)
👉🏻 POST 기반 등록
👉🏻 예) 회원 관리 API 제공
1️⃣ 리소스만 식별하자!
회원 목록 /members 👉🏻 GET
회원 등록 /members 👉🏻 POST
회원 조회 /members/{id} 👉🏻 GET
회원 수정 /members{id} 👉🏻 PATCH(부분 수정 - 개념적으로 수정에 추천!), PUT(기존 데이터 삭제 후 덮음 - 게시글 수정 등에 추천!), POST(애매하면 천하무적)
회원 삭제 /members/{id} 👉🏻 DELETE
2️⃣ POST - 신규 자원 등록 특징
클라이언트가 새로운 멤버를 등록함 ---> 화면단에서 정보 입력 후 submit ---> 서버에서 해당 id의 고유값을 만듦 |
👉🏻 클라이언트는 등록될 리소스의 URI를 모름!
새로운 리소스의 고유값은 서버가 만들기 때문 (PUT 방식과의 큰 차이점)
👉🏻 서버가 새로 등록된 리소스 URI를 생성함
HTTP/1.1 201 Created
Location: /members/100
3️⃣ 컬렉션(Collection)
👉🏻 서버가 관리하는 리소스 디렉토리
👉🏻 서버가 리소스의 URI를 생성하고 관리
👉🏻 여기서 컬렉션은 /members
✔️ HTTP API - 스토어
👉🏻 PUT 기반 등록
👉🏻 예) 정적 컨텐츠 관리, 원격 파일 관리
1️⃣ API 설계 - PUT 기반 등록
파일 목록 /files 👉🏻 GET
파일 조회 /files/{filename} 👉🏻 GET
파일 등록 /files/{filename} 👉🏻 PUT(기존 파일이 있다면 완전히 지우고 덮어씌우기 때문에)
파일 삭제 /files/{filename} 👉🏻 DELETE
파일 대량 등록 /files 👉🏻 POST
2️⃣ PUT - 신규 자원 등록 특징
클라이언트가 파일을 직접 선택하여 등록함 |
👉🏻 클라이언트가 리소스 URI를 알고 있음
"회원을 등록할 때는 정보만 넘기면 서버가 리소스 URI를 만들었지만
파일을 등록할 때는 클라이언트가 파일의 URI를 서버에 넘김"
- 파일 등록 /files/{filename}
PUT /files/star.jpg
👉🏻 클라이언트가 직접 리소스의 URI를 지정
3️⃣ 스토어(Store)
👉🏻 클라이언트가 관리하는 리소스 저장소
👉🏻 클라이언트가 리소스의 URI를 알고 관리
👉🏻 여기서 스토어는 /files
✔️ HTTP FORM 사용
👉🏻 웹 페이지 회원 관리
👉🏻 GET, POST만 지원하므로 제약이 있음
👉🏻AJAX 같은 기술을 사용해서 해결 가능
👉🏻 순수 HTML, HTML FORM을 사용할 때를 뜻함
1️⃣ 리소스 식별
회원 목록 /members 👉🏻 GET
회원 등록 폼 /members/new 👉🏻 GET
회원 등록 /members/new 혹은 /members 👉🏻 POST
회원 조회 /members/{id} 👉🏻 GET
회원 수정 폼 /members/{id}/edit 👉🏻 GET (폼을 보는 것이지 변경 내용을 서버에 보내는 것은 아니기 때문에 GET)
회원 수정 /members{id}/edit 혹은 /members/{id} 👉🏻 POST
회원 삭제 /members/{id}/delete 👉🏻 POST
✅ 삭제의 경우 DELETE를 써야 하지만 GET, POST밖에 쓰지 못 하기 때문에 URL에 직접 delete를 적어 주는 방식을 '컨트롤 URI'라고 함
2️⃣ 컨트롤 URI
👉🏻 GET, POST만 지원하므로 제약이 있음
👉🏻 이런 제약을 해결하기 위해 동사(verb)로 된 리소스 경로 사용
👉🏻 POST의 /new, /edit, /delete가 컨트롤 URI
👉🏻 HTTP 메소드로 해결하기 애매한 경우에 사용(HTTP API 포함)
✅ 최대한 URI를 사용하되, 실무에서 정말 그것만으로는 해결하기 힘들 때 컨트롤 URI를 쓰는 것!!
무작정 컨트롤 URI로만 사용하면 안 됨!
📍 참고하면 좋은 URI 설계 개념
(출처: https://restfulapi.net/resource-naming)
REST API URI Naming Conventions and Best Practices
In REST, having a strong and consistent REST resource naming strategy – will prove one of the best design decisions in the long term.
restfulapi.net
1️⃣ 문서(document)
👉🏻 단일 개념(파일 하나, 객체 인스턴스, 데이터베이스 row)
👉🏻 예) /members/100, /files/star.jpg
2️⃣ 컬렉션(Collection)
👉🏻 서버가 관리하는 리소스 디렉토리
👉🏻 서버가 리소스의 URI를 생성하고 관리
👉🏻 예) /members
3️⃣ 스토어(Store)
👉🏻 클라이언트가 관리하는 자원 저장소
👉🏻 클라이언트가 리소스의 URI를 알고 관리
👉🏻 예) /files
4️⃣ 컨트롤러(Contoller), 컨트롤 URI
👉🏻 문서, 컬렉션, 스토어로 해결하기 어려운 추가 프로세스 실행
👉🏻 동사를 직접 사용
👉🏻 예) /members/{id}/delete