Front-end/Web
-
[Group Study] HTTPFront-end/Web 2022. 12. 8. 00:47
Preface 학부 네트워크 수업 때, 와이어샤크로 패킷까지 까면서 공부했던 프로토콜이다. FE든 BE든 개발자라면 HTTP 프로토콜의 간략한 spec과 working하는 방식은 알고 있을 것이라고 생각하고 있다. 망각의 동물답게 당연~히 배운것의 반절은 잊은 것 같은데 최근 네이버에서 http3를 서비스에 적용한 사례를 보고서 간략하게 공부해보아야겠다는 생각이 들었다. 동작하는 원리나 모든 스펙을 톺아볼 수는 없지만, 리마인드의 목적으로 정리하고자 한다. HTTP HTTP(HyperText Transfer Protocol)은 W3 상에서 정보를 주고 받을 수 있는 프로토콜이다. 주로 TCP를 사용하고 HTTP/3부터는 UDP를 사용하며, 80번 포트를 사용한다. HTTP는 클라이언트와 서버 사이에 이루..
-
[WEB] XSS(Cross Site Scripting - 크로스 사이트 스크립팅)이란???Front-end/Web 2020. 8. 9. 19:42
잠깐, 들어가기 전에 웹 어플리케이션을 만들 때 가장 중요하게 생각하는 것은 무엇일까? 웹사이트의 기능, 퍼포먼스, 그리고 화려한 조명같은 멋진 디자인도 중요하다. 무언가가 빠진 것 같은데... 사람들이 간과하고 있는 것들이 종종 있다. 보안(Security)이다. Fancy하고 빠릿빠릿한 웹사이트도 사용자의 정보를 빼내는데 이용된다면...? 보안이 뚫려버린 웹 사이트... 생각만해도 끔찍하다. 우리가 만들고 있는 웹페이지는 안전하다고 할 수 있을까...? 4년전 한국사업기술보호협회(KAITS)에서 인턴을 할 때, 보안관제라는 고된 노동을 했었다. 해커들이 각 국 (중국, 동남아, 동남아,, 그리고 중국...그리고 중국)에서 각종 공격을 뿜어낸다. 그 중에 많은 것을 차지하는 것들이 XSS, SQL in..
-
[WEB] 브라우저는 어떻게 렌더링할까?Front-end/Web 2020. 5. 4. 22:03
웹 어플리케이션을 개발하다보면 DOM(Document Object Model)을 참조하거나 부득이하게 변경할 때가 있다. 이 때문에 "DOM은 정체"와, 퍼포먼스의 이유로 "브라우저는 어떻게 렌더링"의 과정이 궁금해지게 된다. 자주 쓰고 있는 웹이든 Vue.js든 본인이 사용하는 기술의 Lifecycle을 이해하는 것은 중요하다고 생각한다. 브라우저의 구성 요소 그림1처럼 브라우저는 구성되어 있다. 네트워크를 가르쳐주시는 교수님 또는 책에서 종종 쓰는 Top-down 방식으로 보면 우리가 접하는 UI 레이어부터 이 UI의 백엔드까지 내려오게 된다. 이번 포스트에서는 브라우저의 렌더링 과정을 다룰 예정이므로, 구성 요소 중 렌더링 엔진이 주인공이다. 브라우저의 렌더링 엔진은 요청한 컨텐츠를 표시한다. 예를..
-
[WEB] CORS(Cross Origin Resource Sharing) 개념Front-end/Web 2020. 5. 3. 16:22
CORS(Cross Origin Resource Sharing)가 필요한 경우 Node.js dev 모드로 웹을 api 서버와 달리 개발할 때, 크롬 개발자도구 콘솔에서 에러를 뿜어낼 때가 있다. CORS CORS CORS... 정체가 무엇일까? CORS(Cross Origin Resource Sharing)는 Front, Back 개발자 모두 기본적으로 알아야하는 웹 지식 중 하나이다. Web은 보안상 이슈의 이유로 동일 출처 정책(Same Origin Policy)을 사용해오고 있다. 즉, 클라이언트가 HTTP 요청시, 자신의 출처(도메인, 프로토콜, 포트)가 같아야 함을 의미한다. 하지만, 웹 개발의 복잡성이 더해지면서, SOP를 지켜가며 구현하기란 쉽지 않은 일이다. 수요가 있으면, 공급이 있듯,..