Pace Check

<aside> ⚠️ 실제 수업을 진행한 내용에서, 설명하며 이해를 돕기 위한 추가적인 내용들이 들어가있음

복습할때 심화 부분은 회색으로 표기하였으니 기본적으로 보지말고, 제대로 이해된자들만 볼 것

• 제대로 이해되지 않은 상태에서 심화 부분을 보면, 정말 쌓아올린 탑이 무너질 수 있음
  • 알아야할 개발 지식은 지수적(Exponential)으로 증가하는 경향이 있어서
  • 단순히 한줄뿐이라 하더라도, 한 단어뿐이더라도 새로 알아야할게 몇십개씩 생겨나기때문
• 정말 머리가 정말 아파질 수 있으니 제발 조심할 것 </aside>

0. 웹 개요

우리가 사용하는, 우리를 둘러싼 웹 환경을 살펴보면 크롬이나 사파리같은 웹 브라우저가 있고, 웹 서버도 있다. 웹을 개발한다는것은 웹 브라우저와 웹 서버와 관련된 모든것들을 개발하는걸 통칭한다고 이해할 수 있다.

0.1. 웹 개발을 배우는 이유?

우리는 앱과 웹의 세상에 살고있다. 프론트엔드라고 하면 웹만 생각하는데, 앱 화면도 물론 프론트엔드에 해당한다

• 앱은 앱 구동을 위한 머신이 필요한데, 그 머신은 안드로이드나 iOS 같은 모바일 OS 로 국한된다.
  • 물론 윈도우나 MacOS 에서 구동되는 데스크탑 앱도 존재한다.
• 웹은 정말 어디에서든지 적용 가능하다. 작은 머신(VM)격인 웹 브라우저는 어디든지 설치 가능하다.
  • 미래는 어떻게 될까? IoT 의 발전과 소형 기기의 다양한 생태계속에서 웹 브라우저라는 단일 VM 의미?

0.2. 웹 개발은 무엇인가?

웹 페이지에 무엇인가를 표기하는것 Displaying things on a web page 웹 페이지에 표기 방식인 Rendering 을 다루는건 프론트엔드, 웹 페이지가 표기할 데이터와 조작은 백엔드

• 웹 페이지 그 잡채 = HTML(구조) + CSS(형태) + JS(유저 이벤트 처리 및 DOM 조작)

  ← 02-01. 웹 개발이란 무엇이며, 어떻게 동작하나? 프론트엔드 편 수업에서 다룰 것

  • HTML = 문서 구조
  • CSS = 문서 꾸미기
  • JS = 유저 인터렉션

• 웹 페이지 내 표기할 데이터 = 웹 페이지에 동적으로 표기할 데이터 및 데이터 조작의 모든것

  ← 02-02. 웹 개발이란 무엇이며, 어떻게 동작하나? 백엔드 편 수업에서 다룰 것

1. 백엔드 웹 개발 : API = 클라이언트가 필요하는 데이터 반환

어떻게 (웹) 클라이언트가 원하는 다양한 (웹) 데이터 (혹은 웹 페이지) 를 반환할까?

• 클라이언트가 원하는 다양한 데이터를 1. 어떻게 2. 잘 반환할까?
  1. 어떻게 = 방법론 (요청-응답을 처리하는 방법) : REST API, GraphQL, Queue, WebSocket, SSE 등
  2. 잘 = 속도 + 가용성 (요청-응답의 속도 및 대량 트래픽 커버)
     • 데이터 조회를 위한 데이터베이스 내 쿼리 수행 시 쿼리 효율에 따른 소요시간 축소
     • 대량 트래픽에 기인한 데이터베이스 조회 시, 부담 축소 및 속도 향상을 위한 로컬 / 글로벌 캐시 도입
     • 대량 트래픽에 따른 다중 데이터베이스 접속 시 동시성 처리
       • “유치원 어린이 여러분! 한줄로 서세요!”

1.1. 백엔드 = 데이터 관리 : 데이터에 대한 모든것 (저장, 조회 및 조작)

결제하기 버튼을 누르면 결제를 위한 정보를 조회하고, 실제 결제가 되었다는 사실을 저장

• “저, 어제 구매한 상품이 오늘 도착하지 않았는데요.” → “네? 그런게 있었나요?” → “야, 이 새끼야!”
• “저, 어제 구매한 상품이 오늘 도착하지 않았는데요.” → “네, 잘 저장되어 있네요. 보내드릴게요”
• “저, 어제 구매한 상품에 대한 배송지를 변경하고 싶습니다.” → “어떤 구매건이고, 어떤걸로 바꿀것인가요?”
  • 어떤 구매건이고 (URL) : https://aaron.com/payments/13/update (구매한 결제 정보에 대한 ID)
    • 누누히 강조하지만 컴퓨터 혹은 웹 상에서 모든 정보를 지정하는 방법은 무조건 ID
  • 어떤걸로 (변수) : Path Variable, Query Parameter 혹은 JSON 형태의 Request Body
  • 바꿀것인가요 (Method) : POST

인생 힘들게 살고싶으면 백엔드 언어만으로 서버만들면 됨, 이후에 수많은 백엔드 프레임워크가 얼마나 편한지를 배우기 위한 밑밥

• 백엔드 언어만으로 직접 웹 서버를 만들면 어떤 고통이 발생하는가?
  • 어떤 요청이 들어왔는지 일일히 확인해야한다 : 요청 매핑 = RequestMapping
  • JSON 형태로 오는 Request 요청 데이터를 객체로 받기 위해 역직렬화 필요 = MessageConverter
  • 객체인 Response 반환 데이터를 JSON 으로 반환하기 위해 직렬화 필요 = MessageConverter

1.1.1. 직렬화 / 역직렬화 : (웹 서버 기준) 외부 데이터 형태와 내부 데이터 형태 사이의 변환

• 외부 : REST API 를 통해 광활한 네트워크를 떠돌아다니는 모든 데이터는 문자열(JSON)로 전송된다.
• 내부 : 백엔드 프로그래밍 언어로 개발한 웹 서버에서 모든 데이터는 객체(Object)로 다뤄진다.

• 응답 : Java 객체(2차원) → HTTP Response Body JSON(1차원, String) : Serialization 직렬화
• 요청 : HTTP Request Body JSON(1차원, String) → Java 객체(2차원) : Deserialization 역직렬화

• 3가지의 웹 클라이언트(웹 브라우저, Postman, CURL) 중 Postman 을 기준으로 조금 더 상세히 살펴보기