눈감고 코딩,,

1. 쿠키와 세션을 사용하는 이유

-> HTTP 프로토콜의 약점 보안

• 비연결지향 : request를 받아서 response를 보낸 후 접속을 끊는다. 
• 상태정보유지안함 : 연결을 끊고 나서 통신이 끝나고 정보를 유지하지 않는 특성 -> 통신연결을 계속 유지하지 않아 리소스 낭비가 줄어드는 장점! 

-> 그러나, 통신할 때마다 커넥션을 열어야 -> 매 페이지에서 클라이언트는 내가 누구인지 인증을 계속 해야하는 단점

2. 쿠키

: 클라이언트 로컬에 저장되는 키와 밸류가 들어있는 작은 데이터 파일

• 사례: 자동로그인, 팝업에서 오늘 더이상 보지 않기 등
• 라이프사이클: 쿠키는 만료시간이 있지만, 파일로 저장되어서 브라우저 종료 후에도 정보가 남아있다

3. 세션

: 일정시간동안 같은 브라우저로 들어오는 상태를 유지

• 사례: 로그인 유지
• 라이프사이클: 만료시간 있지만 브라우저 종료 후에 시간 상관없이 삭제됨.

• Uniform Resource Locators - 인터넷에서 자원 위치를 나타냄
• 각각의 url은 유일한 자원을 가리킨다

**절대 URL

http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument 

1. 프로토콜 : http
2. • 브라우저가 어떤 규약을 사용해야 하는지, 네크워크에서 데이터를 교환하는 방법
3. 도메인:www.example.com
   • 어떤 웹 서버가 요구되는지 가르킨다
   • IP 주소를 쓰기도 함
4. 포트:80
   • 기술적으로 웹서버에서 자원으로 접근하는 "관문"
   • http 표준 포트 80 을 사용한다면 생략
5. 경로 : path/to/myfile.html
   
   • 웹서버에서 자원에 대한 경로
   • 초기에는 물리적 파일 위치를 나타냈으나, 요새는 웹서버에서 추상화하여 보여줌
6. 파라미터
   • & 기호로 구분되는 키-밸류 짝으로 이룬 리스트
   • 웹서버에 제공하는 추가 파라미터들
   • 검색에서 주로 사용함
7. 앵커

**상대 URL

아래의 url이 위치한 문서 내에 또 다른 url을 부른다고 가정

https://developer.mozilla.org/en-US/docs/Learn

https://developer.mozilla.org/en-US/docs/CSS/display  = ../CSS/display

Model

• 내부 비즈니스 로직을 처리하는 역할
• 알고리즘, db 쿼리 등을 함수 형태로

Controller(중간에 위치!!)

• 어떻게 처리할지를 알려주는 역할
• model에서 작성된 함수를 호출하여 새로운 함수를 만들고 안에서 일을 처리
• model과 view를 통제/ 특정 뷰로 돌아가게 한다던지 하는 일들/ view로 변수를 던져준다
• Routing: 사용자가 접근한 uri에 따라 컨트롤러의 함수를 호출해주는 기능!

View

• 화면에 무엇인가 보여주기 위한 역할
• 사용자의 입력을 받아 모델의 데이터를 업데이트 해줌

#1 그리드 시스템

부트스트랩을 쓰는 주된 이유이자 반응형 웹페이지를 위한 기능. 

테이블의 형식으로 row 클래스와 col- 클래스들로 구성. 이러한 페이지들을 부트스트랩이 알아서 크기에 따라 반응형으로 동작.

이는 가로 세로 크기를 나누어 사용하는 것과 유사.

- 12 칼럼이 안되게 하면 오른쪽에 공백이 생긴다

- container 안에 들어간다 - container 는 고정길이/ container-fluid는 100% width

- 반드시 row 아래에 col

<div class="container-fluid" > 

<div class="row">

 <div class="col-xs-3">.col-xs-3</div> 

<div class="col-xs-3">.col-xs-3</div> 

<div class="col-xs-3">.col-xs-3</div> 

<div class="col-xs-3">.col-xs-3</div>

 </div> 

<div class="row"> 

<div class="col-sm-3">.col-sm-3</div>

 <div class="col-sm-3">.col-sm-3</div> 

<div class="col-sm-3">.col-sm-3</div>

 <div class="col-sm-3">.col-sm-3</div>

 </div> 

<div class="row"> 

<div class="col-md-3">.col-md-3</div>

 <div class="col-md-3">.col-md-3</div>

 <div class="col-md-3">.col-md-3</div> 

<div class="col-md-3">.col-md-3</div>

 </div> 

<div class="row">

 <div class="col-lg-3">.col-lg-3</div>

 <div class="col-lg-3">.col-lg-3</div> 

<div class="col-lg-3">.col-lg-3</div>

 <div class="col-lg-3">.col-lg-3</div>

 </div>

 </div>

#2 그리드 시스템 응용

1. visible

- 어떤 특정 크기에서 안보이게 보이게 해주고싶을때

- 클 때 보여지고 싶으면 visible-lg

<div class="container jumbotron"> 

<div class="row"> 

<div class="col-md-3 col-sm-4">.col-md-3 .col-sm-4</div>

 <div class="col-md-3 col-sm-4">.col-md-3 .col-sm-4</div>

 <div class="col-md-3 col-sm-4">.col-md-3 .col-sm-4</div> 

<div class="col-md-3 visible-md">.col-md-3 .visible-md</div>  // 작을때 보여지게

</div>

 </div>

2. clearfix

- 화면 줄어들때 어긋나는 부분을 없애기 위해서

<div class="container jumbotron">
            <div class="row">
                <div class="col-md-3 col-sm-6">.col-md-3
.col-sm-6
larger div</div>
                <div class="col-md-3 col-sm-6">.col-md-3
.col-sm-6</div>

                <div class="clearfix visible-sm-block"></div>

                <div class="col-md-3 col-sm-6">.col-md-3 .col-sm-6</div>
                <div class="col-md-3 col-sm-6">.col-md-3 .col-sm-6</div>
            </div>
        </div>

3. offset

- 칼럼 왼쪽에 공백을 두고 싶을때 

        <div class="container">
            <div class="row">
                <div class="col-sm-5 col-sm-offset-1">.col-sm-5 .col-sm-offset-1</div>
                <div class="col-sm-5 col-sm-offset-1">.col-sm-5 .col-sm-offset-1</div>
            </div>
        </div>

3. pull, push

- 화면 크기에 따라 순서를 바꿔주고 싶을때

아래는 화면이 md 크기 이상일 때와 sm이하인 경우에 칼럼의 순서를 바꿔주고자 하는 경우의 예이다.

        <div class="container jumbotron">
            <div class="row">
                <div class="col-sm-9 col-md-push-3">.col-sm-9 .col-md-push-3</div>
                <div class="col-sm-3 col-md-pull-9">.col-sm-3 .col-md-pull-9</div>
            </div>
        </div>

출처: https://unikys.tistory.com/371 [All-round programmer]