웹 개발의 이해 (Front End / Back End) ... Part. 1

사이트: edwith

강의: [부스트코스] 웹 프로그래밍 챕터 1, 웹 프로그래밍 기초

학습일: 2020년 2월 25일

---

0. 소개

• FE(Front End)의 Key Point: HTML, CSS를 활용해 다양한 디자인 요구사항에 맞는 레이아웃 만드는 법
• BE(Back End)의 Key Point: 클라이언트와 서버, 그리고 그 사이에서 어떤 통신이 오고가는지
• Tip: 웹서핑을 할 때 URL의 변화, 페이지 레이아웃의 변화, 페이지의 제작 과정 등을 머리에 떠올려볼 것

 

1. Web 개발의 이해 - FE / BE

 

웹 프로그래밍을 위한 프로그래밍 언어들

• Python: 입문자가 읽기 쉽고, 적은 코드로도 프로그램을 개발할 수 있음
• JavaScript: FE 개발자에게는 필수인 언어! 서버에서도 작성 가능해졌으며, 커뮤니티도 점점 커지고 있음

 

웹의 동작구조 (HTTP 프로토콜의 이해)

• HTTP
  • 서버와 클라이언트가 인터넷 상에서 데이터를 주고 받기 위한 프로토콜(Protocol, 규약)
  • 모든 종류의 데이터를 전송 가능 (이미지, 동영상, 오디오, 텍스트 등)
  • 가장 많이 쓰이는 버전: HTTP v1.1
• HTTP의 작동방식
  • 서버/클라이언트 모델
    • 클라이언트가 서버에 요청(Request)를 전송 → 서버는 요청을 받은 뒤 클라이언트에 응답(Response)를 전송
  •  무상태(Stateless) 프로토콜
    • 클라이언트의 요청 후 서버가 응답을 완료하면 서버는 바로 클라이언트와 연결을 끊는 방식
    • 장점
      • 클라이언트와 서버가 계속 연결되어 있지 않으므로 최대 연결수에 제한이 없음
      • 불특정 다수를 대상으로 하는 서비스에 적함
    • 단점
      • 클라이언트의 이전 정보를 알 수 없음
        • 예시) 인터넷 쇼핑 중 결제를 하려고 하는데 결제에 대한 정보가 없음
      • 이를 해결하기 위해 쿠키(Cookie) 등의 기술이 도입됨
• URL (Uniform Resource Locator)
  • 인터넷 상의 자원(이미지, 동영상 등)의 위치를 나타내는 주소
  • 형태: 프로토콜의 종류://자원이 있는 서버의 IP 주소 or 포트/자원의 위치
    • 예시) http://www.sunnyvale.co.kr/docs/index.html/
      • 프로토콜의 종류: http
      • 자원이 있는 서버의 IP 주소: www. ... .co.kr
      • 자원의 위치: docs/index.html/
  • 포트
    • 하나의 물리적 컴퓨터는 여러 서버를 동작시킬 수 있음
    • 그러나 포트와 서버는 일대일로 대응됨
      • 하나의 포트에 여러 서버, 혹은 하나의 서버에 여러 포트는 불가능함
    • http 서버의 기본 포트: 80
• HTTP 작동 예시
  

  • 

    HTTP 프로토콜의 작동 예시

  • 요청 메시지
    • 헤더, 빈 줄, 바디로 구분
    • 구성 내용
      • 요청 메서드: 요청하는 방식
        • GET: 정보를 요청
        • POST: 정보를 밀어넣음
        • PUT: 정보를 업데이트
        • DELETE: 정보를 삭제
        • HEAD: http 헤더 정보를 요청
          • 해당 자원의 존재 여부 또는 서버의 문제 확인이 목적
        • OPTIONS: 웹 서버가 지원하는 메서드의 종류를 요청
        • TRACE: 클라이언트의 요청을 그대로 반환
          • echo 서비스로 서버 상태 확인 등이 주된 사용 사례
      • 요청 URI: 요청하는 자원의 위치를 명시
      • http 프로토콜의 버전: 웹 브라우저가 사용하는 프로토콜의 버전을 명시
      • 요청 바디: GET 방식은 요청 바디가 없고 POST/PUT 방식일 때만 있음
  • 응답 메시지
    • 헤더, 빈 줄, 바디로 구분
    • 구성 내용
      • http 프로토콜의 버전, 응답 코드, 응답 메시지
      • 응답 바디: 실제 리소스 데이터가 반환되는 위치

 

※ HTTPS가 HTTP와 다른 점

• HTTP에서 Secure을 더한, 보안이 강화된 방식
• 네트워크 프로토콜 암호화 방식으로 SSL, TLS를 사용
• 클라이언트가 웹 서버에 평문 데이터 값을 전달할 때 이를 암호화해 제3자가 정보를 훔쳐가는 것을 방지