1. 웹 프로그래밍 기초 - 1. Web 개발의 이해 - FE/BE

www.boostcourse.org/web316

웹 프로그래밍(풀스택)

부스트코스의 웹 프로그래밍(풀스택) 강의를 들으면서 개인적으로 정리한 내용입니다. 사실 정리라기 보다 강의를 조금이라도 열심히 듣기 위해.. 거의 옮겨젹은 거라고 볼 수 있겠네요..😅😅

typora를 이용해서 .md파일로 작성했는데 티스토리로 옮기는 과정에서 많이 깨져서.. 아직 원인을 찾는 중입니다...

1. 웹 프로그래밍 기초

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

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

• 저급언어: 기계 중심의 언어, 기계어(Machine Language)
• 고급언어: 사람 중심의 언어
• 컴파일러: 고급언어를 저급언어로 번역하는 과정(컴파일)을 수행하는 도구

👉 웹 관련 인기 언어: Python, PHP, JavaScript, JAVA, Ruby

---

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

• HTTP:

  서버와 클라이언트가 인터넷상에서 데이터를 주고받기 위한 프로토콜

  어떤 종류의 데이터도 전송 가능

• HTTP 프로토콜의 작동 방식 : 클라이언트가 원하는 서버에 접속해서 서버에게 요청을 보내고 서버가 이 요청을 받고 클라이언트에게 응답 , 응답이 끝나면 클라이언트와 서버의 연결을 끊어버림(무상태)
  • 무상태(Stateless)
    • 장점 클라이언트와 서버가 계속 연결된 형태가 아니기 때문에 클라이언트와 서버 간의 최대 연결 수보다 훨씬 많은 요청과 응답을 처리할 수 있다.
    • 단점: 연결을 끊어버리기 때문에 클라이언트의 이전 상황을 알 수 없다. -> 정보를 유지하기 위해 Cookie와 같은 기술 등장

• URL: 인터넷 상의 자원의 위치, 특정 웹 서버의 특정 파일에 접근하기 위한 경로 혹은 주소 하나의 물리적 컴퓨터에는 여러 개의 소프트웨어 서버가 동작할 수 있는데 이 서버는 포트 값이 다르게 동작해야 한다. (http서버의 기본 포트값은 80번)

• HTTP 프로토콜의 요청 데이터 포맷 : 요청헤더 + 요청바디
  • 요청 헤더:

    GET /serviet/query?a=10&b=90 HTTP/1.1
    첫째줄 - 요청 메서드(요청 방식) + 요청 URI(요청하는 자원의 위치) + HTTP 프로토콜 버전(웹 부라우저가 사용하는 프로토콜 버전)

    요청 메소드
    • GET : 정보를 요청하기 위해서 사용한다. (SELECT)
    • POST : 정보를 밀어넣기 위해서 사용한다. (INSERT)
    • PUT : 정보를 업데이트하기 위해서 사용한다. (UPDATE)
    • DELETE : 정보를 삭제하기 위해서 사용한다. (DELETE)
    • HEAD : (HTTP)헤더 정보만 요청한다. 해당 자원이 존재하는지 혹은 서버에 문제가 없는지를 확인하기 위해서 사용한다.
    • OPTIONS : 웹서버가 지원하는 메서드의 종류를 요청한다.
    • TRACE : 클라이언트의 요청을 그대로 반환한다. 예컨데 echo 서비스로 서버 상태를 확인하기 위한 목적으로 주로 사용한다.
  • 요청 바디: GET 메소드는 바디가 없음. 요청 메소드가 POST나 PUT일 때 바디가 들어옴.

• HTTP 프로토콜의 응답 데이터 포맷: 응답헤더 + 응답바디
  • 응답 헤더:

    HTTP/1.1 200 OK
    첫째줄 - 응답 HTTP 프로토콜 버전 + 응답 코드 + 응답 메시지 날짜, 웹 서버 이름과 버전, 컨텐츠 타입, 캐시 제어 방식 등등..

  • 응답 바디: 빈 줄 다음에 나오는 것이 실제 응답 리소스 데이터가 나오는 부분

---

3) 웹 Front-End와 웹 Back-End

웹 프론트엔드

• 사용자에게 웹을 통해 다양한 콘텐츠(문서, 동영상, 사진 등)을 제공하고 사용자의 요청(요구사항)에 반응해서 동작, Client side
• HTML - 구조를 만듦
• CSS - 적절한 배치와 보기좋은 디자인 등 제공
• Javascript - 사용자의 요청 반영, 동적인 부분

웹 백엔드

• 정보를 처리하고 저장하며, 요청에 따라 정보를 내려주는 역할. Server Side

백엔드 개발자가 알아야 할 것들

• 프로그래밍 언어(JAVA, Python, PHP, Javascript 등)
• 웹의 동작 원리
• 알고리즘(algorithm), 자료구조 등 프로그래밍 기반 지식
• 운영체제, 네트워크 등에 대한 이해
• 프레임워크에 대한 이해(예: Spring)
• DBMS에 대한 이해와 사용방법(예: MySQL, Oracle 등)

---

4) browser의 동작

• Web Browser Rendering
• 브라우저 : internet explore, chrome, 사파리 등 월드와이드웹(WWW)에서 정보를 검색, 표현, 탐색하기 위한 소프트웨어
  주소 입력창, 서버와 HTTP로 정보를 주고받을 수 있는 네트워크 모듈, 서버에서 받은 문서를 해석하고 실행하여 화면에 표현하기 위한 해석기(Parser)들을 가지고 있음.
  브라우저 마다 서로 다른 렌더링 엔진을 포함하고 있음. Gecko, WebKit 등..
• Main Flow: HTML 파싱(의미를 파악해서 어떤 데이터 객체로 구조화 시키는 것)해서 Dom(Document object model) Tree 생성
  CSS 도 파싱해서 CSS Tree 생성 -> DOM Tree와 CSS Tree는 연관되어 있으므로 Attachment되어서 Render Tree로 다시 조합됨 - 화면에 어떻게 배치할지 크기와 위치 정보 담고 있음(Layout) -> 화면에 어떤 부분에 어떻게 색칠을 할 지 Painting 과정을 거쳐 화면에 Display된다.
• Parsing-General 일반적인 파싱의 방법: 토큰단위로 잘라서 의미를 해석하고 의미에 따라서 어떤 실행을 해주는 것. 신택스 트리를 만들어 처리.

---

5) browser에서의 웹 개발

• 크롬에서 윈도우 (Ctrl+Shift+I) or F12 누르면 개발자 도구를 볼 수 있음. 디버깅 과정에 필요.
• head는 HTML문서에 대한 추가적인 설명을 담고 있고 body는 화면에 표현되는 것들을 담고 있음.
• HTML은 계층적, tag를 사용해서 표현함.
• 자바스크립트 코드는 body태그가 닫히기 직전이나 body태그 이후에 넣어주는 게 일반적
  👉 위쪽에 넣으면 브라우저가 HTML을 해석하는 동안 자바스크립트 코드를 다운로드하고 해석하느라 HTML해석이 느려질 수 있음. 렌더링을 방해한다.
• CSS코드는 주로 head 안에 존재
• CSS, Javascript 코드가 길어지면 외부 파일로 포함시킬 수 있음.

이 부분은 별 내용은 없고 그냥 개발자 도구로 코드 보면서 html, css, javascript 코드를 겉핥기 식으로 보았음..

---

6) 웹 서버

• 웹 서버: 보통 소프트웨어를 뜻함, 소프트웨어가 동작하는 컴퓨터를 말하기도 함.
  • 클라이언트(웹 브라우저, 웹 크롤러)가 웹 서버에게 HTTP에 맞도록 리소스를 요청하면 요청한 리소스를 전달하는 역할
    • 웹 크롤러: 검색 사이트(네이버, 구글 등)에서 다른 웹사이트의 정보를 읽어갈 때 사용하는 소프트웨어
    • HTTP: 인터넷 상의 데이터를 주고받기 위한 프로토콜
    • 프로토콜: 클라이언트와 서버가 서로 통신을 하기 위해 정해놓은 규칙
  • 리소스가 존재하지 않거나 요청한 리소스를 전송할 때 문제가 발생한다면 에러 메시지 전송
  • 클라이언트가 요청하는 리소스는 컴퓨터에 저장된 정적인 데이터*이거나 *동적인 결과(웹 서버에 의해서 실행되는 프로그램을 통해서 만들어진 결과)
• 웹 브라우저가 www.naver.com 이라는 웹 서버에 접속 -> 해당 HTML 문서 요청 -> 웹 서버가 요청한 HTML문서를 웹 브라우저에게 전달 -> 웹 브라우저는 전송받은 HTML 문서를 읽고 해석 -> 필요한 리소스들(CSS, Javascript 등)의 URL 추출 -> 웹 서버에게 동시에 여러개의 리소스 요청 -> 웹 서버는 요청을 받아들여 결과를 브라우저에 전송 -> 브라우저는 아까 해석한 HTML 문서와 읽어 들인 여러 개의 응답을 하나로 합쳐서 결과를 화면에 보이게 함(렌더링)
• 웹 서버의 종류

  가장 많이 사용하는 웹 서버는 Apache, Nginx, Microsoft, Google 웹 서버

• Apache: 오픈 소스 소프트웨어, 거의 대부분 운영체제에서 설치 및 사용 가능
• Nginx: 오픈 소스 소프트웨어, 더 적은 자원으로 더 빠르게 데이터를 서비스하는 것을 목적으로 만들어진 서버

---

7) WAS

• 클라이언트/서버 구조: 클라이언트(웹 브라우저)는 서비스를 제공하는 서버(웹 서버)에게 정보를 요청하여 응답 받은 결과를 사용한다.

• DBMS(Database Management System):
  • 다수의 사용자들이 데이터베이스 내의 데이터를 접근할 수 있도록 해주는 소프트웨어
  • 서버 형태로 서비스 제공 -> DBMS에 직접 클라이언트가 연결되어 동작 -> 클라이언트 쪽에 비즈니스 로직이 많을 경우, 클라이언트 관리(배포 등)로 인해 비용이 많이 발생하는 문제 -> 미들웨어 등장

• 미들웨어(MiddleWare):
  • 클라이언트와 DBMS 사이에 또 다른 서버를 두는 방식
  • 비즈니스 로직을 미들웨어 서버에서 동작하도록 함으로써 클라이언트는 입력과 출력만 담당하도록 함
  • 프로그램 로직이 변경되어도 모든 클라이언트를 다시 배포할 필요 없이 중앙의 미들웨어만 변경하면 됨.
  • Apache Tomcat

• WAS(Web Application Server):
  • 일종의 미들웨어로 웹 클라이언트 (웹 브라우저)의 요청 중 보통 웹 애플리케이션이 동작하도록 지원하는 목적
  • 점점 웹에 동적인 기능 요구 -> 웹 서버에 프로그래밍 기능이 들어가는 방식 CGI -> 점점 DBMS와 연관된 복잡한 프로그래밍적인 기능 요구 -> 브라우저와 DBMS 사이에서 동작하는 미들웨어 필요 -> WAS 등장
  • 중요한 기본 기능
    1. 프로그램 실행 환경과 데이터베이스 접속 기능 제공
    2. 여러 개의 트랜잭션 관리트랜잭션: 논리적인 작업 단위
    3. 업무를 처리하는 비즈니스 로직 수행

• 웹 서버 vs WAS:
  • WAS도 보통 자체적으로 웹 서버 기능을 내장하고 있습니다.
  • 현재는 WAS가 가지고 있는 웹 서버도 정적인 콘텐츠를 처리하는 데 있어서 성능상 큰 차이가 없습니다.
  • 규모가 커질수록 웹 서버와 WAS를 분리합니다.
  • 웹 서버는 보통 정적인 콘텐츠를 웹 브라우저에게 전송, WAS는 프로그램의 동적인 결과를 웹 브라우저에게 전송
  • 자원 이용의 효율성 및 장애 극복, 배포 및 유지보수의 편의성을 위해 웹서버와 WAS를 대체로 분리합니다.웹 서버는 상대적으로 WAS보다 간단한 구조 -> 대용량 웹 애플리케이션에서 무중단으로 운용하기 위해 웹 서버와 WAS를 분리하여 장애 극복 기능 구현 장애 극복 기능: WAS에 문제가 발생하면 WAS를 재시작할 때 앞단의 웹 서버에서 먼저 해당 WAS를 이용하지 못하도록 하고 WAS를 재시작한다면 해당 웹 애플리케이션을 사용하는 사람이 WAS 문제가 발생하였는지 모르고 이용 가능