웹 개발의 이해 정리

이 글은 [부스트코스] 웹 프로그래밍 과정의 1. 웹 프로그래밍 기초 - 1. Web개발의 이해 - FE/BE 에서 1~3 까지의 내용을 정리한 글입니다.

---

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

저급 언어

• 기계 중심의 언어
• 전기신호인 켜졌다(on)와 꺼졌다(off) 2가지 상태 값으로 동작
  • 숫자로 표현하면 켜졌다는 1, 꺼졌다는 0을 의미
  • 0과 1로 표현되는 숫자를 2진수라고 함
    • 2진수로 이뤄진 값으로 작성하는 프로그래밍 언어 : 기계여(Machine Language)
      • 숫자로만 된 프로그래밍 언어는 유지보수/사용이 어려움
      • 숫자로 된 문장과 1:1로 대응하는 기호를 만들고, 그 기호로 프로그래밍
• 기호로 작성된 프로그램은 기계가 알 수 없기 때문에 기호로 작성된 문장들을 원래의 숫자로 바꿔야 하는 과정이 필요
  • 이러한 과정에서 사용되는 도구 : 컴파일러(Compiler)
  • 기호로 작성된 언어 : 어셈블리어(Assembly Language)

고급 언어

• 사람 중심의 언어
• 기계어 ← (컴파일) ← 어셈블리어 ← (컴파일) ← 고급 언어

💡 생각해보기
Q1. 프론트 엔드부터 서버 개발까지 한 가지 프로그래밍 언어를 사용하여 개발한다면 어떤 언어를 사용하는 것이 좋을까요?
A1. Javascript 

Q2. 다양한 라이브러리, 쉬운 개발, 읽기 쉽고 적은 코드를 장점으로 한다면 어떤 언어를 사용하는 것이 좋을까요?
A2. Python

Q3. 프로그래밍 언어에게 좋은 커뮤니티가 있다는 것은 어떤 장점을 가질까요?
A3. 언어 입문자가 참고할만한 자료들이 많다. 특히 문제 해결 방안이 많을 거 같다.

 

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

인터넷(네트워크 통신)의 이해

• 인터넷 ≠ WWW(World Widw Web)

  이름	프로토콜	포트	기능
  WWW	HTTP	80	웹 서비스
  Email	SMTP, POP3, IMAP	25, 110, 114	이메일 서비스
  FTP	FTP	21	파일 전송 서비스
  DNS	TCP, UDP	53	네임 서비스
  NEWS	NNTP	119	인터넷 뉴스 서비스

• 인터넷 (Internet)

  TCP/IP 기반의 네트워크가 전세계적으로 확대되어 하나로 연결된 네트워크들의 네트워크 (네트워크의 결합체)

HTTP(Hypertext Transfer Protocol)란?

• 팀 버너스리(Tim Berners-Lee)와 그가 속한 팀은 CERN에서 HTML뿐만 아니라 웹 브라우저 및 웹 브라우저 관련 기술과 HTTP 를 발명
• 문서화된 최초의 HTTP 버전은 HTTP v0.9(1991년)
• HTTP는 서버와 클라이언트가 인터넷상에서 데이터를 주고 받기 위한 프로토콜(Protocol)
  • 어떤 종류의 데이터도 전송할 수 있게 설계되어 있음
• HTTP는 계속 발전하여 HTTP/2까지 버전이 등장한 상태

HTTP 작동방식

• HTTP는 서버/클라이언트 모델을 따름

  1. 클라이언트가 원하는 서버에 접속

  2. 클라이언트 → (요청) → 서버

     • 요청 메세지
       • 요청 헤더
         • 요청 메서드 요청 URI(요청하는 자원의 위치를 명시) http 프로토콜의 버전
           • GET 방식은 요청 바디가 없음
       • 빈 줄
       • 요청 바디
         • 요청 메서드가 PUT, POST 일 때 사용됨

  3. 클라이언트 ← (응답) ← 서버

     • 응답 메세지
       • 응답 헤더
         • 응답 HTTP 프로토콜의 버전 응답 코드 응답 메시지
         • 날짜, 웹 서버 이름과 버전, 콘텐츠 타입, 캐시 제어 방식, 콘텐츠 길이 값
       • 빈 줄
       • 응답 바디
         • 실제 응답 리소스 데이터

  4. 응답이 이루어지고 나면 서버와 클라이언트는 연결이 끊김 = 무상태(Stateless)

     • 무상태(stateless) 프로토콜
       • 응답을 하고 나면 서버는 클라이언트와의 연결을 끊음
       • 불특정 다수를 대상으로 하는 서비스에 적합
       • 클라이언트의 이전 상황을 알 수 없음
         • 이러한 특징 때문에 Cookie 라는 기술이 생겼음

URL

• URL (Uniform Resource Locator)
  • 인터넷 상의 자원의 위치
  • 특정 웹 서버의 특정 파일에 접근하기 위한 경로 혹은 주소
  • 접근 프로토콜://IP 주소 또는 도메인 이름/문서의 경로/문서이름
  • 하나의 물리적 컴퓨터는 여러 개의 소프트웨어 서버가 동작할 수 있는데 이 서버는 포트 값이 다르게 동작해야 한다.
  • 이런 포트 값은 0보다 큰 숫자 값이다.
  • http 서버의 기본 포트 값은 80

💡 생각해보기  
Q. HTTP에 S가 붙은 HTTPS 는 어떤 용도로 사용되는 건가요? HTTP와 무엇이 다른가요?  
A. HTTP에서 보안이 강화된 버전. 전자 상거래에 주로 이용된다고 한다.

 

3) 웹 Front-End와 웹 Back-End

웹 프론트엔드(Front-End)

• 사용자에게 웹을 통해 다양한 콘텐츠(문서, 동영상, 사진 등)을 제공
• 사용자의 요청(요구사항)에 반응해서 동작
• 클라이언트 사이드(Client-Side) 라고도 부름

웹 프론트엔드의 역할

• HTML : 웹 콘텐츠를 잘 보여주기 위해 구조를 만들어야 함 (신문, 책 등)
  • 계층적인 구조
• CSS : 적절한 배치와 일관된 디자인 등을 제공해야 함 (보기 좋게)
• JavaScript : 사용자 요청을 잘 반영해야 함 (소통하듯이)

벡엔드(Back-end)

• 정보를 처리하고 저장, 요청에 따라 정보를 내려주는 역할
• 프로그램의 뒷 부분, 즉 서버 입장에서의 개발이 진행
• 서버 사이드(Server-Side) 라고도 부름
• 문제를 해결 하려면?
  • 프로그래밍 언어(Java, Python, PHP, Javascript 등)
  • 웹의 동작 원리
  • 알고리즘(algorithm), 자료구조 등 프로그래밍 기반 지식
  • 운영체제, 네트워크 등에 대한 이해
  • 프레임워크에 대한 이해(ex. Spring)
  • DBMS에 대한 이해와 사용방법 (ex. MySQL, Oracle 등)