이걸 배우고
'컴퓨터와 함께 자라면 좋았을 텐데' 라고 생각했다..
...
그래요
이하 생략...
프로젝트에 들어가면 API 문서부터 만들거나 짠다.
와이어프레임 잘 짜고
Rest API 보고...
웹 개발에서
클라이언트 : 웹 브라우저 (or 웹 크롤러)
서버 : Apache아파치 등 웹 서버 소프트웨어, 웹 서버 소프트웨어가 동작하는 컴퓨터
클라이언트와 서버는 HTTP라는 프로토콜로 통신한다.
2 Tier Architecture
= 클라이언트 & 서버
프론트엔드 개발자는 클라이언트를 주로 보지만
프론트엔드 개발자도 서버를 만들고, 볼 줄 알아야 한다.
3 Tier Architecture
= 클라이언트 & 서버 +데이터베이스 추가
1번의 요청에는 1번의 응답이 있다.
(but 소켓 : 요청 없이도 응답이 있다)
HTTP
hyper text transfer protocol
request와 response
클라이언트와 서버가 요청과 응답을 주고받는 프로토콜(통신 규약)
request data format
- start line
- http method
: ⭐️GET, POST, PUT, PATCH, DELETE, OPTIONS - 요청 url-path
www.google.com/search?q=... 일때
: /search
- http method
- headers
Host: ...
...
Content-type: ... 등 - body
CRUD 중 Create 메서드일 때 해당 데이터를 나타내는 본문
response data format
- status line
- http 버전
- 상태 코드⭐️
200: 성공
300: redirection
400: 클라이언트 실패 (잘못된 요청)
500: 서버 실패 - 상태 메세지
- headers
- body
응답의 본문
⭐️ API (Application Programming Interface)
: 메뉴판
클라이언트가 서버에 올바른 요청을 하기 위해 제공하는 인터페이스
인터페이스 : 추상화
URL Uniform Resource Locator
: 파일명, 리소스의 위치, 경로
URI의 하위개념
scheme, hosts (, 포트번호) , url-path로 이루어짐
| scheme | hosts | (포트번호) | url-path |
|---|---|---|---|
| http:// | www.abc.com | .html | |
| http:// | www.abc.com | / | |
| http:// | www.google.com | :80 | /search |
URI Uniform Resource Indeifier
http://www.abc.com
http://www.google.com:80/search?q=...
scheme, hosts, url-path, query, bookmark로 이루어짐
| scheme | hosts | (포트번호) | url-path | query |
|---|---|---|---|---|
| http:// | www.abc.com | |||
| http:// | www.google.com | :80 | /search | ?q=something |
port
: 통로
http: 80, https: 443 등 통상적으로 많이 쓰는 (정해진) 포트 번호는 생략하여 실행한다.
AJAX
Asynchronous JavaScript And XMLHTTPRequest
구글 등 많은 웹 사이트에서 사용한다
나도 앞으로 무조건 쓰게 된다...!
: fetch + DOM
xhr : fetch가 나오기 전에 사용한 문법
CSR Client Side Rendering
SSR Server Side Rendering
search 검색어 = state
자동완성 = CSR
request data format에 들어가는 http method 정리
수행할 작업
-
GET(Read,리소스를 요청한다)
-
PUT(Update, 정보를 업데이트한다)
-
POST(Create, 데이터를 서버로 전송한다)
-
Delete(Delete, 정보를 삭제한다)
수행할 방식
- HEAD(http 헤더 정보 요청)
- OPTIONS(웹서버가 지원하는 메서드의 종류를 요청)
