TIL - 26-07-18

웹 -> request&response
BE -> 논리적인 사고를 통해 구현해내는 개발
API -> FE - BE 소통 규칙

웹 서비스 기본 흐름

1. 사용자 요청 단계
   DNS 서버 -> HTTP 요청

2. 서버 처리 단계
   if 정적 리소스 -> response
   else WAS로 요청 전달

3. WAS
   Server <-> (ORM) <-> DB

4. DB
   RDBMS / NoSQL

5. 클라이언트 처리 단계
   백엔드에서 response 수신 -> 브라우저 렌더링

Web Server -> 정적 리소스 관리
Web Application Sever(WAS) -> 동적 리소스 관리

Web Server ⊂ WAS

HTTP Methods

• GET
• POST
• PUT
• PATCH
• DELETE

RESTful API

• Resources -> 명사형 복수
  ex) users (O) getUser(X)
• 계층 구조
  /users/{userId}/posts/{postId}
• 행위는 HTTP Method로 구분

HTTP(HyperText Transfer Protocol)

• 클라 <-> 서버 통신 규칙
• Request / Response
• 암호화 X

HTTPS

• 암호화

HTTP Response

• 응답 상태 코드(Status Code)
• 응답 헤더 (Response Header)

SPA (Single Page Application)

• React.js, Vue.js ...
• json 소통

API 명세
1. Endpoint : FE -> BE Request
2. Method : HTTP Methods
3. Request
4. Response

FE

• 브라우저 도구를 통해서 사용자에 보여지는 부분을 기획하고 구현
• example.html
  - HTML
  - CSS
  - JavaScript
  

SPA

• React.js (xxxx.jsx - component(template))
• Vue.js (xxxx.jx - component(template))
• 한 번 로드된 HTML, CSS, JS 파일 기반 동작
• 새로운 페이지 이동 시 필요한 데이터만 받아와서 동적으로 화면 갱신
• 장점
  - 빠른 화면 전환
• 단점
  - 초기 로딩 느림

html

• text
• 속성 == attribute

css

• 선택자(selector) {
   key : value,
   key : value, etc...
  }