잠시만 기다려 주세요

HOME   |  여기는?   |  바다물때표   |  여러가지 팁 (888)  |  추천 및 재미 (154)  |  자료실 (20)  |  끄적거림 (520)  |  시나리오 (760)  |  드라마 대본 (248)  |  

2020년 09월 28일
목적이 있으니.... 그 목적을 우선시 하고 '을' 이라 생각하면 모든 일을 참을 수 있다. 더 큰 미래를 위해 작은 것들은 내어주도록 하자. - 바다아이
 




    html/css/xml

html/css/xml - HTTP/2 왜 지금 적용해야 하는가?
이 름 : 바다아이   |   조회수 : 3475         짧은 주소 : https://www.bada-ie.com/su/?851591783814
HTTP/2(Hypertext Transfer Protocol Version 2)는 웹 (www) 의 HTTP 프로토콜이 1999년 6월 규정된 후, 웹에서 사용되게 된 HTTP 프로토콜의 두 번째 버전입니다.



 

웹규격자체의 근원적인 규격이 바뀌는 것 이기 때문에 웹에 있어 지난 20년간 가장 중요한 변화라고 할수 있습니다.
 

HTTP/2 은 새로운 글로벌 표준 통신규격입니다. 그리고 꼭 SSL (정확하게 말하자면 TLS 입니다만 다들 https 를 SSL 로 알고 있어서 SSL 이라고들 표현합니다.) 이 적용되어야 하는 것 은 아닙니다.
 

하지만 웹사이트를 지원하는 브라우져들 (구글의 크롬, 마소의 IE, 모질라의 파폭) 은 https 에서만 HTTP/2 규격을 지원하기로 결정한 상태 입니다.
 

그 이유는 웹문서의 encryption (암호화), 즉 보안문제 때문입니다. SSL 로 잘못알려져 있는 TLS 는 정보의 암호화를 담당하는 프로토콜 입니다. 이 TLS 가 적용되지 않는 사이트는 보안상 안전하지 않습니다.
 

그래서 구글 과 마소등은 웹이라는 공간이 보안이 보장되는 장소로 만들고 싶은 것 입니다.
 

현재 구글 크롬에서는 https 가 적용되지 않은 사이트의 경우 안전하지 않음 이라는 경고문이 표시됩니다.



 

구글 크롬뿐만 아니라 모질라 파폭, 또 마소의 IE 도 구글에 이러한 정책에 동조하고, 동일한 기능을 추가할 예정입니다.
 

아 보안이고 뭐고 골아파. 돈많이 들어가. 안할래.


네, 물론 HTTP/2 규격은 웹사이트에 적용하기 어렵고 서버쪽 하드웨어, 소프트웨어 업데이트도 이뤄져야 하며, 구축차체가 현재 몹시 까다롭습니다.
 

이래서 네이버 나 다음미디어도 아직 적용을 못한 상태고, 미국 100대 웹사이트 중에서도 불과 30% 정도만이 이 새로운 통신규격으로 옮기는 작업을 완료한 상태 입니다.
 

http://marketingland.com/google-estimates-25-sites-now-use-secure-connections-168763


저희도 HTTP/2 설치하느라 개고생했습니다. ㅠㅠㅠㅠ
 

이걸 제대로 설치하지 않으면 일단 속도가 급격하게 느려집니다. (https 설치하니까 속도가 느려진다는 얘기는 구글링 조금만 해보시면 쉽게 찾으실 수 있을 겁니다.)
 

(*이와 별개문제로 https 가 예전 통신규격인 HTTP/1.1 에서 적용되면 사이트가 2배정도 느려지는게 맞습니다. 현재 한국 대다수의 https 사이트들은 이 예전 규격에서 https 를 적용하고 있고, 구글 검색을 조금 해보니 한글로는 이 방식만 알려져 있는 듯 합니다. 허어얼.)
 

경우에 따라서는 서버의 CPU 가 교환되어야 HTTP/2 가 제대로 작동하기도 합니다.
 

‘골아프고 힘들고, 돈깨지고 그냥 HTTP/2 안하지 뭐.’ 라고 생각하실 수 있는데, 이 새로운 통신규격으로 이전하시지 않는 경우 다음과 같은 불이익을 감수하셔야 합니다.

 

1. SEO
 

HTTPS had a reasonably strong correlation with first page Google rankings. This wasn’t surprising as Google has confirmed HTTPS as a ranking signal.
 

http://backlinko.com/search-engine-ranking


HTTP/2 로 인한 SEO 가산점은 없다고 구글은 밝혔지만 실제로는 검색결과에 더 잘 노출이 되고 있다는.

 

2. 보안
 

구글크롬의 경고문구가 문제가 아니라 정말로 이전 HTTP/1.1 은 보안상 큰 문제가 대두되고 있습니다. TLS 통신기술은 전송되는 데이터를 AES 128 또는 256비트 수준으로 encrypt (암호화)하며, 고로 해커가 Man in the middle attack 기법으로 송신되는 데이터를 탈취하더라도 이 암호화된 데이터를 해독하는게 거의 불가능 합니다. 반면 기존 HTTP/1.1 은 이런 암호화 기술이 전혀 적용되지 않은 상태인겁니다.

 

3. 속도
 

HTTP/2 의 데이터 전송방식은 기존 HTTP/1.1 과 많이 다릅니다. Front-end 개발자 분들이 가장 이해하기 쉬운 하나의 예를 들자면, 기존 HTTP/1.1 에서 브라우져가 한번에 가져올 수 있는 파일 갯수는 8개 입니다. (크롬 기준: 출처: http://www.browserscope.org/?category=network&v=top). 그래서 이 http request 숫자를 줄이기 위해서 이미지를 sprite 처리한다던가, css 를 하나의 파일로 만드는 작업을 하죠.



 

HTTP/2 에서는 이런 제한없이 한번의 connection 으로 모든 파일을 불러올 수 있습니다.
 

데이터 전송이 이런식으로 더 빨라지는 것 입니다.
 

*HTTP/2 에서는 이런 js 나 css 를 하나로 합치는 작업을 하면 페이지 로딩속도가 오히려 더 느려진 다는 사실을 front-end 개발자 분들은 인지하고 계셔야 합니다. 고로 이런 플러그인 https://wordpress.org/plugins/bwp-minify/ 은 HTTP/2 에서 오히려 속도저하를 가져오는 anti-pattern 이 되어 버립니다.
 

무슨 소리냐구요? 테마 처음부터 다 다시 만드셔야 한다구요.ㅠㅠㅠㅠ
 

암튼 HTTP/2 는, 특히 모바일 플랫폼, 모바일 웹앱등에서 절대적으로 필요했던 HTTP 의 기능개선을 한 새로운 통신규격이며, 웹의 기반자체가 새롭게 거듭나는 엄청난 이벤트 입니다.



 

똑같은 통신기법이지만 기술이 다른 겁니다



최근에 Jake Archibald (구글 크롬 개발자/대변인?) 와도 HTTP/2 기반에서 앞으로 css 가 어떻게 작성되어야 하는지에 대한 의견교환도 했었지만,



 

이 HTTP/2 기반에서의 front-end 코딩 기법/방식은 많이 바뀌어야 합니다.
 

워드프레스 기준에서 가장 설명하기 간단한 예를 하나 들자면, 현재는 style.css 여기다 css 를 다 때려넣잖아요. 이걸 header.css, main.css, post.css, footer.css 이렇게 나눠서 작성한 후, 이걸 순차적으로 문서에 적용되게 해줘야 합니다. (Jake Archibald 하고 한 얘기는 그 얘기.)
 

그리고 이렇게 순차적으로 적용되는 css 를 크롬이 효율적으로 문서에 뿌리게 되는거죠.



출처 : https://hackya.com/kr/http2-%EC%99%9C-%EC%A7%80%EA%B8%88-%EC%A0%81%EC%9A%A9%ED%95%B4%EC%95%BC-%ED%95%98%EB%8A%94%EA%B0%80/

 

| |


      1 page / 2 page
번 호 카테고리 제 목 이름 조회수
44 html/css/xml CSS / letter-spacing, word-spacing / , , 바다아이 272
43 html/css/xml ie , ... 바다아이 244
42 html/css/xml html tab , .... 바다아이 1807
41 html/css/xml css on/off , toggle switch , 바다아이 2063
40 html/css/xml pt, px, em, %, font , , 바다아이 2014
39 html/css/xml (font face) 바다아이 2314
38 html/css/xml .... 바다아이 2534
37 html/css/xml html MIME ... 바다아이 2641
36 html/css/xml ckeditor ajax .... 바다아이 2505
35 html/css/xml [] , 바다아이 2713
34 html/css/xml , , , ico 바다아이 2454
33 html/css/xml input , autocomplete 바다아이 2618
32 html/css/xml [CSS] , border-radius, 바다아이 3068
31 html/css/xml ckeditor 4 ... 바다아이 3635
현재글 html/css/xml HTTP/2 ? 바다아이 3476
29 html/css/xml HTTP/2 ? 바다아이 2914
28 html/css/xml xml .... sitemap.xml 바다아이 3055
27 html/css/xml ckeditor config.js .... 바다아이 3365
26 html/css/xml 바다아이 3206
25 html/css/xml 바다아이 2994
24 html/css/xml , border 바다아이 2959
23 html/css/xml , 바다아이 2988
22 html/css/xml (= HTML ), entity code 바다아이 3706
21 html/css/xml (Won;) (;Backslash; ) , , 바다아이 3770
20 html/css/xml 바다아이 3151
19 html/css/xml / / 바다아이 3455
18 html/css/xml css3 ... demo . ^^; 바다아이 2947
17 html/css/xml mouse over , Hover Fade Effect using CSS 바다아이 4753
16 html/css/xml [html] TD TR , mouse over 바다아이 3444
15 html/css/xml , (marquee) 바다아이 3487
| |








Copyright ⓒ 2001.12. bada-ie.com. All rights reserved.
이 사이트는 리눅스에서 firefox 기준으로 작성되었습니다. 기타 브라우저에서는 다르게 보일 수 있습니다.
[ FreeBSD + GoLang + PostgreSQL ]
서버위치 : vultr.com 서울  실행시간 : 0.04189
to webmaster... gogo sea. gogo sea.