웹 애플리케이션

웹 애플리케이션

애플리케이션을 실행시켜 주는 것은 흔히 OS 혹은 플랫폼이라고 부른다.
프론트 웹 애플리케이션은 브라우저에 의해 실행되므로 브라우저가 웹 애플리케이션 입장에서 보면 OS, 플랫폼이다.

웹 애플리케이션의 기본 사상은 브라우저를 애플리케이션이 실행되는 OS로 보고 이 브라우저 OS에서 동작하는 애플리케이션을 만드는 것이다.

➡️ 웹 애플리케이션은 브라우저가 이해할 수 있는 HTML, CSS, 자바스크립트로 만들어진다.

client-server 어플리케이션

업무 처리를 위해 사용자 애플리케이션과 서버 애플리케이션이 네트워킹을 하는 애플리케이션이다.

사용자끼리 데이터를 공유해야 하거나, 서버 데이터베이스 데이터를 이용해야 하는 경우 클라이언트-서버 구조로 애플리케이션이 개발되어야 한다.

• 클라이언트 - 사용자 컴퓨터에 설치되는 애플리케이션
• 서버 - 서버에 설치되어 동작하는 애플리케이션

클라이언트 - 서버 구조에서 애플리케이이션들이 Http 프로토콜을 이용하여 데이터를 주고 받는 것을 웹 애플리케이션이라고 부른다.

프론트와 백 웹 애플리케이션은 실행되는 곳도 다르고 목적도 다르므로 각각 개발하는 기술이 다르다.

프론트 개발 기술

html, css, 자바스크립트 조합으로 브라우저에서 실행되는 웹 애플리케이션을 개발 할 수있다.

자바스크립트 프레임 워크

• Angular
  구글에서 만든 프레임워크
  현재의 자바스크립트 프레임 워크의 기본 사상인 SPA 개념을 만든 프레임워크

• React.js
  페이스북에서 만든 프레임워크
  프론트 애플리케이션 개발에 적용되는 많은 개념 및 구조를 만들어낸 프레임워크
  (선언형 UI 프로그래밍, 가상 DOM, 상태 관리 등)

• Vue.js
  Evan You에 의해 만들어진 프레임워크
  위의 두개와 유사한 개념 및 구조를 지원하는 프레임 워크

백엔드 개발 기술

HTTP 프로토콜

HTTP 프로토콜은 HTTP Request 규약과 HTTP Response 규약으로 나누어진다.

HTTP Request

• 프론트 애플리케이션이 백엔드에 전달하는 데이터에 대한 규약
• header(부가 정보)와 body(실제 전달하는 데이터)로 구분
  

💡 HTTP Request Method

• GET - 서버의 데이터를 얻기 위한 요청
• POST - 서버에 데이터를 전달하여 저장하기 위한 요청
• PUT - 서버에 데이터를 전달하여 수정하기 위한 요청
• DELETE - 서버의 데이터를 삭제하기 위한 요청
• HEAD - 서버의 각종 정보를 확인하기 위한 요청
• PATCH - 서버의 데이터를 수정하기 위한 요청

HTTP Response

• 백엔드에서 프론트에 전달되는 데이터
• header(부가 정보)와 body(실제 전달하는 데이터)로 구분
• HTML or JSON 데이터로 전달
  

💡 상태 코드
숫자로 표현되며 프론트의 요청을 어떻게 처리한 것인지에 대한 상태를 표현하는 숫자

• 2xx - 요청을 정상적으로 처리
• 3xx - 요청 완료를 위해 추가적인 작업 필요
• 4xx - 요청 잘못으로 요청을 처리 못함
• 5xx - 서버 잘못으로 요청을 처리 못함

URL 분석

💡 리소스
프론트가 백엔드에 요청하는 업무 혹은 데이터

• 프론트 - 원하는 리소스가 식별될 수 있게 URL을 구성해서 백엔드에게 요청
• 백엔드 - 요청 정보의 URL을 분석해서 어떤 리소스를 프론트에게 서비스 할 것인지 판단

💡 URL 구조

• 프로토콜
• 호스트
• 포트
• 경로
• 쿼리 문자열
• 해시 문자열

1. 프로토콜
   네트워킹에 사용할 통신 규약 (웹에서는 보통 HTTP, HTTPS)

2. 호스트 (= 도메인)
   요청하는 서버의 네트워크 상에서의 주소
   서버의 IP주소이거나 도메인 주소이다.
   ➡️ 이 호스트에 의해 네트워크 상의 어느 서버와 통신할 것인지가 결정

3. 포트
   하나의 서버에서 네트워킹하는 애플리케이션을 식별하기 위한 숫자
   ++ HTTP의 경우 : 포트 생략하면 자동으로 80포트

4. 쿼리 문자열 (검색 문자열 )
   경로 뒤에 ? 추가하고 그 뒤에 추가되는 문자열
   ➡️ 프론트에서 백엔드에 요청하면서 전달하는 데이터

5. 해시 문자열
   # 뒤에 추가되는 문자열
   백엔드와 관련 없지만, 현재 애플리케이션의 상태를 URL에 추가하기 위해서 사용된다.
   
   하나의 HTML 문서 내에서 여러 화면을 제공하여 유저에게 화면 전환이 되는 것 처럼 효과를 내고 싶은 경우 사용된다.