[TIL]20210808

박창현·2021년 8월 8일
TIL웹
0

TODAY I LEARNED

목록 보기
29/53

웹

오늘부터는 부스트코스 웹UI강좌가 아닌 웹 프로그래밍 강좌를 할 수 있을때까지 해볼 것이다.

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

HTTP는 서버와 클라이언트가 인터넷상에서 데이터를 주고받기 위한 프로토콜(protocol)이다.

HTTP 작동방식:
HTTP는 서버/클라이언트 모델을 따릅니다.
장점

  • 불특정 다수를 대상으로 하는 서비스에는 적합하다.
  • 클라이언트와 서버가 계속 연결된 형태가 아니기 때문에 클라이언트와 서버 간의 최대 연결 수보다 훨씬 많은 요청과 응답을 처리할 수 있다.

단점

  • 연결을 끊어버리기 때문에, 클라이언트의 이전 상황을 알 수가 없다.
  • 이러한 특징을 무상태(Stateless)라고 말한다.
  • 이러한 특징 때문에 정보를 유지하기 위해서 Cookie와 같은 기술이 등장하게 되었다.

URL (Uniform Resource Locator)
인터넷 상의 자원의 위치
특정 웹 서버의 특정 파일에 접근하기 위한 경로 혹은 주소

요청 메서드 : GET, PUT, POST, PUSH, OPTIONS 등의 요청 방식이 온다.
요청 URI : 요청하는 자원의 위치를 명시한다.
HTTP 프로토콜 버전 : 웹 브라우저가 사용하는 프로토콜 버전이다.
첫번째 줄의 요청메소드는 서버에게 요청의 종류를 알려주기 위해서 사용됩니다.


각각의 메소드 이름은 다음과 같은 의미를 가집니다.

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

미친... 몰랐는데 백엔드 공부할꺼면 자바가 필수였네....

미들웨어 (MiddleWare)

클라이언트 쪽에 비즈니스 로직(비즈니스 로직이란 업무에 필요한 데이터처리를 수행하는 응용프로그램의 일부를 말한다.)이 많을 경우, 클라이언트 관리(배포 등)로 인해 비용이 많이 발생하는 문제가 있습니다. 로직이 바뀔때 클라이언트를 수정하게된다면 이를 배포하는데 시간과 비용이 발생하기 때문이다. 또한, 로직이 클라이언트에 내포되어있기에 보안에도 취약하다고 한다.

비즈니스 로직을 클라이언트와 DBMS사이의 미들웨어 서버에서 동작하도록 함으로써 클라이언트는 입력과 출력만 담당하도록 합니다. 이러면 용량이 줄어들고 보안, 관리문제도 해소된다. 또한, 로직 변경시 중간에 있는 미들웨어만 수정하면 된다.

WAS (Web Application Server)

WAS는 일종의 미들웨어로 웹 클라이언트(보통 웹 브라우저)의 요청 중 웹 애플리케이션(동적 컨텐츠)이 동작하도록 지원하는 목적을 가집니다.
WAS의 중요한 기본기능 3가지
1. 프로그램 실행 환경과 데이터베이스 접속 기능을 제공한다.
2. 여러가지 트랜잭션(논리적인 작업단위)을 관리한다.
3. 업무를 처리하는 비즈니스 로직을 수행한다.

이렇게 분리하는 이유는 장애처리때문이다.

현재는 WAS가 가지고 있는 웹 서버도 정적인 콘텐츠를 처리하는 데 있어서 성능상 큰 차이가 없습니다.
규모가 커질수록 웹 서버와 WAS를 분리합니다.
자원 이용의 효율성 및 장애 극복, 배포 및 유지보수의 편의성을 위해 웹서버와 WAS를 대체로 분리합니다.
프로그램 오류로 WAS를 재시작해야한다면 앞단의 웹 서버에서 해당was의 접근을 차단할 수 있다. 이같은 처리가 장애극복 이라고 하는데, 웹서버를 무중단으로 운영하기 위해서 필요한 기능이다.

FE - id와 section

ID
고유한 속성으로 한 HTML 문서에 하나만 사용 가능합니다.
고유한 ID 값이 있으면 하나하나에 특별한 제어를 할 수 있으며 검색에도 용이합니다.

Class
하나의 HTML문서 안에 중복해서 사용 가능합니다.
하나의 태그에 여러 개의 다른 class 이름을 공백을 기준으로 나열할 수가 있습니다.
홈페이지 전체적인 스타일을 일관성 있게 지정하기 위해서는 class의 사용이 필수적입니다.

FE - 상속과 우선순위 결정

선언 방식에 따라 적용되는 css규칙 순서가 정해짐.
inline(body내에서 css정의) > internal(head내에서 정의) > external(외부의 css파일로 정의)

경우의 수 1

    span{
      color: red;
    }
    span{
      color: blue;
    }

이 경우 나중의 것인 blue가 적용됨.

경우의 수 2

    body>span{
      color: red;
    }
    span{
      color: blue;
    }

이 경우 구체성을 보인 red가 적용됨.

경우의 수 3

    #a{
      color: red;
    }
    .b{
      color: blue;
    }
  <div id="a" class="b">hello</div>

우선순위가 id > class > element 임.

FE - CSS selector

1

<div id="jisu">
  <div>
    <span> span tag </span>
  </div>
  <span> span tag 2 </span>
</div>

요소 선택 (공백) : 자손요소, 그러므로
div(span) > div > span
div(span) > span 두 요소에 모두 적용됨.

#jisu span { color : red }

자식 선택 (>) : 자식은 바로 하위엘리먼트만. 그럼으로 바로 한칸 하위에 있는
div(span) > span 에만 적용됨.

#jisu > span { color : red }

2

<div id="jisu">
  <h2>단락 선택</h2>
  <p>첫번째 단락입니다</p>
  <p>두번째 단락입니다</p>
  <p>세번째 단락입니다</p>
  <p>네번째 단락입니다</p>
</div>
#jisu > p:nth-child(2) { color : red }

1부터 카운트해서 2번째에 p태그가 있으면 Red로 표현, 없으면 아무일 x
만약 nth-of-type(2) 로 하면 p 일경우에만 카운트 하기때문에 무조건 표시는 됨.

p:nth-chlid(n)은 종류상관없이 n번째
p:nth-of-type(n)은 p중 n번째

Element가 배치되는 방법(CSS layout)

엘리먼트가 배치되는 방식 - (display:block)
엘리먼트는 벽돌처럼 위아래로 쌓는다.

엘리먼트가 배치되는 방식 - (display:inline)
display 속성이 inline인 경우는 우측으로 빈자리를 차지하며 흐릅니다.
높이와 넓이를 지정해도 반영이 되지 않습니다.

엘리먼트가 배치되는 방식 (position:static, relative, absolute)

position 속성을 사용하면 상대적/절대적으로 어떤 위치에 엘리먼트를 배치하는 것이 수월합니다.

  1. position 속성으로 특별한 배치를 할 수 있습니다.
    position 의 기본속성은 static입니다.
    그냥 순서대로 배치됩니다.

  2. absolute는 기준점에 따라서 특별한 위치에 위치합니다.
    기준점을 상위엘리먼트로 단계적으로 찾아가는데 static이 아닌 position(relative등)을 왼쪽 위를 기준점(0, 0)으로 하여 새로운 좌표계를 만든다. 절대적인 새로운 좌표계를 만들어낸다고 연상하면 기억하기 쉬운거같다. 또한 이를 적용하면 absolute 속성을 주는 순간 이 태그요소는 다른 태그 요소들과 다른 층으로 옮겨 갔다고 이해하면 됩니다. 3차원 좌표계라면 z축이 변경되었고 이로 인해서 남은 빈 공간에 third가 채워져 들어간거죠. 이 때 (x, y) 의 위치는 변하지 않는다.

  1. relative는 원래 자신이 위치해야 할 곳을 기준으로 이동한다.
    무슨 의미냐면, a,b,c라는 블록을 기본적으로 배치한다면 차례대로 위에서 아래로 a - b - c 순서대로 쌓일 것이다. 여기서 b를 relative로 설정한다면, 원래있어야할 b의 자리(a바로 밑)에서 설정해준 offset 만큼 이동한다.
    여기서 주의해야할 점은 a가 absolute 로 설정되어있으면 위의 설명에 따라 z축이 다르다고 이해됨으로 (a 와 b 가 같은 x, y 위치에) - c 순으로 쌓인다. 그럼으로 absoute로 설정되지 않았을때의 a위치가 "원래 자신이 위치해야 할 곳"이 된다.

  2. fixed는 viewport(전체화면) 좌측, 맨 위를 기준으로 동작합니다.

relative와 absolute 둘다 offset 속성을 가질 수 있지만, absolute의 경우는 offset 속성의 기준이 되는 위치가 조건에 따라서 달라질 수 있다!
또한, 둘 모두 부모요소가 움직이면 자식요소도 그만큼 움직인다.

offset 속성
기준이 되는 곳으로부터 얼마만큼 떨어졌는지를 정한다.

https://thrillfighter.tistory.com/480 블로그 내용 참고.

  <div class="wrap">
    <div class="static">static(default)</div>
    <div class="relative">relative(left:10px)</div>
    <div class="absolute">absolute(left:130px;top:30px)</div>
    <div class="fixed">fixed(top:250px)</div>
  </div>
.wrap {
  position:relative;
}

.wrap > div {
  width:150px;
  height:100px;
  border:1px solid gray;
  font-size:0.7em;
  text-align:center;
  line-height:100px;
}

.relative {
  position:relative;
  left:10px;
  1top:10px;
}

.absolute {
  position:absolute;
  left:130px;
  top:30px;
}

.fixed {
  position:fixed;
  top:250px;
}

코드를 볼때 wrap이 static로 설정할때보다 relative 으로 설정되어있을때 "absolute"클래스가 좀더 오른쪽, 아래로 이동해있다. 그말인 즉슨, 위에서 설명한 특징중 하나인 relative가 기준점이라는 말이 적용된 사례라는 것이다. wrap이 static이면 absolute클래스는 body 왼쪽위 끝을 기준으로 왼쪽얼마 위에서 얼마 만큼 이동하지만 wrap이 relative 이면 wrap의 왼쪽위 끝을 기준으로 하기에 위치에 차이가 있다.

box-sizing

  box-sizing:content-box;
  box-sizing:border-box;

동일한 width 150px 값을 주었을 때 content-box 로 설정되어있으면 box-model중 content영역을 150px로 맞추는데, 이때 margin값이 다르다면 전체적으로 보이는 크기는 마진에 따라 달라진다.
하지만, border-box 로 설정되어있으면 margin값 까지를 width로 정한다. https://www.opentutorials.org/course/2418/13405 참고.

8월 한달 목표:
백준 40문제이상
쿠버네티스 입문 책 반이상 보기
웹 ui 또는 웹 프로그래밍 강의 반이상 완료
파알인 완독
c / java 적당히 공부,,,,

profile
박창현
개강했기에 가끔씩 업로드.
이전 포스트

[TIL]20210802

다음 포스트

[TIL]20210809

0개의 댓글