CS (32) 썸네일형 리스트형 HTTP Re 1) HTTP/1.0- HTTP/1.0은 기본적으로 한 연결당 하나의 요청을 처리하도록 설계되었습니다. 문제점 - 서버로부터 파일을 가져올 때마다 TCP의 3-way-handshake를 계속해서 열어야 한다.이는 RTT증가를 불러오게 됐습니다. HTTP 1.0에서의 RTT 증가를 해결하기 위한 방법- 이미지 스플리팅 : 많은 이미지를 다운로드 받게 되면 과부하가 걸리기 때문에 많은 이미지가 합쳐 있는 하나의 이미지를 다운로드 받고, 이를 기반으로 background-image의 position을 이용하여 이미지를 표기하는 방법이다.- 코드 압축 : 코드를 압축해서 개행 문자, 빈 칸을 없애서 코드의 크기를 최소화하는 방법이다.- 이미지 Base64Encoding : 이미지 파일을 64진법으로 이루어진.. MVC, MVP, MVVM 패턴 MVC같은 경우는 뭐 워낙 익숙해서 글 읽으니 바로 이해했다. 근데 MVP는 낯설다. 정의 : MVP패턴은 MVC 패턴으로부터 파생되었으며 MVC에서 C에 해당하는 컨트롤러가 프레젠터(presenter)로 교체된 패턴이다. 뷰와 프레젠터는 일대일 관계이기 때문에 MVC 패턴보다 더 강한 결합을 지닌 디자인 패턴이라고 할 수 있다. → 그래서 presenter가 Controller랑 다른 역할이 뭔지에 대해 이해하는데 의외로 오래 걸렸다... 우선 기본적인 MVC패턴의 그림을 보자. - 예를 JSP파일로 든다. Model에서 비즈니스 로직을 처리한 후에 Controller에 넘기고 Controller에서 가공한다고 해도 Model에 있는 컬럼 값을 기본으로 .. XSS와 CSRF Re XSS(Cross Site Scripting)정의 : 악의적인 사용자가 웹 페이지에 악성 스크립트를 삽입하여, 다른 사용자의 브라우저에서 실행되도록 유도하는 것을 목적으로 합니다. → 사용자가 특정 사이트를 신뢰하기 때문에 발생한다. 즉 서버가 사용자로부터 입력 받은 값을 제대로 검사하지 않고 사용할 경우 사용자의 세션이나 쿠키를 이용해서 중요 정보를 탈취하는 것이다. 대응방안1. 정보를 암호화한다.2. 서버단에서 httpOnly 옵션을 설정한다.3. Url encoding이나 문자열을 치환한다. CSRF(Cross Site Request Forgey)정의 : 인증된 사용자의 권한을 이용하여 악의적인 요청을 실행시키는 공.. 로컬 스토리지, 세션 스토리지 로컬, 세션, 쿠키, 캐시에 대해서 공부하다보니 자연스럽게 이끌렸다.. 우선, 웹 스토리지란?- 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 나온 새로운 방식의 데이터 저장소 장점1) 서버에 불필요하게 데이터 저장 X2) 넉넉한 데이터 저장 용량3) 문자열 외에도 자바스크립트의 모든 원시형 데이터와 객체 저장 가능4) 도메인 단위로 접근이 제한되는 CORS 특성 덕분에 CSRF로부터 안전 단점1) HTML5만 지원하는 브라우저만 사용 가능2) XSS로부터 위험 - script단에서 sessionStorage.XXX와 localStorage.XXX 하면서 삭제(removeItem), 삽입(setItem), 조회(getItem)을 통해 값을 조작할 수 있다. 로컬 스토리지- 로컬 스토리지는 클.. 네트워크 토폴로지 Re 전공 시간에 배웠는데... 다 까먹고 어렴풋이 기억만 난다... 도태됐다... 정의 : 노드와 링크가 어떻게 배치되어 있는지에 대한 방식이자 연결 형태 네트워크 토폴로지를 배우기 전에 네트워크에 대한 기초를 알자 노드 : 서버, 라우터, 스위치 등 네트워크 장치를 의미한다.링크 : 노드를 연결하는 무선, 유선의 상태를 의미한다.트래픽 : 특정 시점에 링크 내에 흐르는 데이터의 양 자체를 말한다.처리량 : 링크 내에서 성공적으로 전달된 데이터의 양을 말하는데 트래픽의 양을 뜻한다.지연 시간: 요청이 처리되는 시간을 말한다. 클라이언트가 서버를 갔다와서 다시 돌아올 때의 총 시간을 말한다. 네트워크 토폴로지정의 : 노드와 링크가 어떻게 배치되어 있는지에 대한 방식이자 연결 형태를 의미한다. 트리 토폴로지 .. 이터레이터 패턴 - 행위(by GoF) 정의 : 이터레이턴 패턴(iterator pattern)은 이터레이터(iterator)를 사용하여 컬렉션(collection)의 요소들에 접근하는 디자인 패턴입니다. → 이는 여러 가지 자료형의 구조와는 상관없이 이터레이터라는 하나의 인터페이스로 순회가 가능하다. 다음은 그에 대한 예시이다. 반복문에 대한 처리를 동일한 Iterator을 이용한다. ※ Set의 경우는 순서를 아무리 바꿔도 순서가 없기 때문에 무엇을 넣든지 간에 값에 영항을 주지 않는다. 프록시 패턴 - 구조(by GoF) 정의 : 프록시 객체(proxy pattern)은 대상 객체(subject)에 접근하기 전 그 접근에 대한 흐름을 가로채 해당 접근을 필터링하거나 수정하는 등의 역할을 하는 계층이 있는 디자인 패턴이다. ※ 프록시 서버는 서버와 클라이언트 사이에서 클라이언트가 자신을 통해 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해주는 컴퓨터 시스템이나 응용 프로그램을 가리킨다. → 그래서 vue.js에서 proxy 설정을 통해서 해당 url로 가기 전에 CORS에러를 해결한거구나 그럼 보안등으로도 좋을 것 같은데?? 그 용도로 쓰이나? → 맞네. 실제로 CloudFlare는 웹 서버 앞단에 프록시 서버를 두어 DDOS 공격 방어나 HTTPS 구축에 쓰인다. ※ 꼬꼬무HTTPS에 대해서는 알겠는데.. 쿠키, 세션, 캐시, 토큰 쿠키 - 서버는 클라이언트의 로그인 요청에 대한 응답을 작성할 때, 클라이언트 측에 저장하고 싶은 정보를 응답 헤더의 set-cookie에 담는다. - 이후 클라이언트가 재용청할 때마다 저장된 쿠리를 요청 헤더의 cookie에 담아 보낸다. - 서버는 쿠키에 담긴 정보를 바탕으로 해당 요청의 클라이언트가 누군지 식별할 수 있다. - 보안에 취약, 용량제한, 브라우저간 공유 불가능 같은 단점이 있다. - 브라우저가 닫혀도 정보를 가지고 있는다 1) Session Cookie : 메모리에만 저장되며, 브라우저가 닫힐 때 삭제2) Persistent Cookie : 기간 설정을 하고 브라우저가 닫혀도 삭제되지 않고 기간에만 반응한다.3) Secure Cookie : HTTPS에 사용되는 암호화된 쿠키, 실.. 이전 1 2 3 4 다음 목록 더보기
