[부스트코스] 웹 프로그래밍(풀스택) - Day 1

HTTP ( = 무상태 프로토콜 ) Hyper Text Transfer Protocol

• http는 어떠한 종류의 데이터든 전송 할 수 있다. (이미지, 동영상, 오디오, 텍스트 등)
• 인터넷상의 데이터를 주고받기 위한 규약
• 서버/클라이언트 모델 : 클라이언트가 서버에게 먼저 요청을 보내고 서버가 클라이언트에게 응답을 보낸다.
• 무상태 프로토콜 : 연결한 후 서버가 응답을 하고나면 바로 연결을 끊어버리기 떄문에 바로 다음 요청이 와도 어떤 클라이언트인지 확인 할 수가 없다. 
  • 장점 : 불특정 다수 대상 서비스에 적합, 연결 상태를 계속 유지하지 않으므로 최대 연결 수보다 훨씬 많은 요청과 응답을 처리
  • 단점 : 클라이언트가 이전에 무얼 했는지 알 수 없다. (ex. 쇼핑하기 위해 결제를 하려했는데 쇼핑한 물품을 기억 못함) 이런 정보를 유지하기 위해 "쿠키"가 발전하게 되었다.

1. 반드시 클라이언트가 원하는 서버에 먼저 접속해야 한다.
2. 해당 클라이언트가 접속 후 서버에 요청을 한다.
3. 요청에 따른 결과를 클라이언트에게 서버가 응답한다.
4. 응답이 끝나고 나면 연결이 끊기게 된다. 

• 요청 데이터 포맷 (3부분)
  • 요청 헤더 부분 : GET (요청 메서드), 요청 URI (요청 하는 자원의 위치 명시), http 프로토콜 버전(웹 브라우저가 사용하는 프로토콜 버전 명시)
    • 요청 메서드
      • GET : 정보를 요청하기 위해 사용 (select)
      • POST : 정보를 밀어넣기 위해 사용 (insert)
      • PUT : 정보를 업데이트 하기 위해 사용 (update)
      • DELETE : 정보를 삭제하기 위해 사용 (delete)
      • HEAD : (HTTP)헤더 정보만 요청. 해당 자원이 존재 하는지 혹은 서버에 문제가 없는지 확인하기 위해 사용
      • OPTIONS : 웹서버가 지원하는 메서드의 종류 요청
      • TRACE : 클라이언트 요청을 그대로 반환. echo 서비스로 서버 상태를 확인하기 위한 목적으로 주로 사용
  • 빈 줄 부분
  • 요청 바디 부분 : 왜 아무 것도 없는가? GET 방식은 요철할 때 가지고 가는 자원의 방식을 URI에 붙여서 가져가기 때문에 GET방식은 요청 바디 부분이 없다.
    • 바디 요소는 POST, PUT을 사용했을 때 들어오게 된다. 

 

• 응답 데이터 포멧 (3부분)
  
  • 응답 헤더 부분
    • 첫 줄에는 반드시 응답 http의 버전, 응답 코드, 응답 메시지, 날짜, 웹 서버 이름, 콘텐츠 타입, 캐시 제어 방식, 콘텐츠 길이 등의 값
  • 빈 줄 부분
  • 응답 바디 부분 : 실제 응답 리소스 데이터가 나오는 부분

 

 

URL (Uniform Resource Locator)

• 웹상에서 문서와 다른 자원들(이미지, 동영상 등등)의 위치를 나타내기 위함
• 첫번째 부분 : 프로토콜 종류
• 두번째 부분 : 자원이 있는 서버 IP 주소, 도메인 주소, 포트 번호등 ( IP주소, 도메인 주소는 물리적인 서버를 찾기 위해 반드시 필요, 물리적 컴퓨터를 찾은 후 소프트웨어 서버를 찾을 때는 포트번호가 필요 ) 하나의 물리적 컴퓨터에는 여러 개의 소프트웨어 서버가 동작할 수 있는데 이 소프트웨어 서버들의 포트 값은 전부 달라야 한다. 포트 값은 0보다 큰 수이다. http 서버 기본 포트 값은 80번이다. 
• 세번째 부분 : 자원의 위치

 

브라우저 구성 요소

브라우저 엔진 : 브라우저 소프트웨어를 동작 시켜주는 핵심 엔진

브라우저도 일부 데이터를 캐시하고 저장한다 => 데이터 관리 영역

서버와 http를 통해 통신 => 네트워킹 모듈

js 해석 => 자바스크립트 해석기

ui 영역 처리 => 백엔드

 

렌더링 엔진 (데이터를 화면에 표현한다)

ex. 파이어 폭스의 Gecko, 크롬 Chorium 

브라우저 별로 갖고 있는 엔진이 다 다르다

 

브라우저 렌더링 엔진 처리 과정

 

html을 해석(html pasrser) => DOM tree 생성

css를 해석(css parser) => CSS tree 생성

ATtachment로 html과 css를 합침. 합쳐서 Render tree로 조합

Render Tree를 객체화 하여 Key와 value쌍을 가진 객체 모델로 변환한다.

이후 해당 정보로 layout에 어떻게 배치 할지 결정

이후 Render tree 정보를 통해 화면에 어떤 부분에 painting 할지 결정하고 display한다.

 

 

자바스크립트 <script> 태그는 body 태그 다음 html 태그가 닫히기 전에 넣어 주는 것이 일반적이다 or body 태그가 닫히기 직전에 넣어 주는 것

 

왜냐하면 body 태그 위쪽에 넣게 되면 브라우저가 html를 해석하는 동안 js 코드를 다운로드 받고 해석한다고 html 코드 해석이 늦어질 수 있기 때문이다. js 코드 때문에 렌더링을 방해하는 경우가 생길 수가 있으니 주의해야 한다.

 

WAS 의 기본 기능

1. 프로그램 실행 환경, 데이터베이스 접속 기능 제공

2. 여러 개의 트랜잭션 관리

3. 업무를 처리하는 비즈니스 로직을 처리

WAS의 대표적인 예제 Tomcat

 

웹서버와 WAS를 분리해서 사용하는 이유 (WAS도 충분히 웹서버로 정적인 콘텐츠를 받을 수 있음에도 불구하고)

- 웹서버가 WAS보다 간단한 구조로 유지보수가 쉽다.

- 대용량 웹 어플리케이션을 지원할 떄는 WAS를 무중단으로 운영하기 위해 웹서버 앞단에서 WAS가 고장난 것을 알리지 않고 WAS를 재시작할 수 있는 장애처리극복기능을 가지기 때문에 분리한다.

- 규모가 커질수록 웹서버와 WAS를 분리한다. 

 

 

CSS의 position의 absolute 속성 값은 top, left를 0, 0 으로라도 꼭 줘야 한다. 

absolute는 기준점에 따라서 특별한 위치에 위치시킬 수 있다. 

왼쪽을 기준으로 top, left. 오른쪽을 기준으로 top, bottom 

이때 기준점이란 상위 엘리먼트들 중에 static이 아닌 position이 기준점이다.

 

*css는 1도 주석으로 사용할 수가 있다 ㅋㅋ

 

CSS의 box-sizing

padding값을 키우게 된다면

box-sizing이 content-box;인 경우는 padding값에 의해 전체 크기가 커진다

border-box;인 경우는 정해진 box크기를 유지하려고 한다.

 

CSS의 상속

position, margin처럼 배치에 관련된 속성은 자식 태그에게 상속되지 X

그러나, color와 같은 스타일 속성은 부모의 속성이 자식 속성에서 그대로 상속된다.