웹 개발 알아두기/네트워크 (6) 썸네일형 리스트형 CORS CORS (Cross-Origin Resource Sharing)은 http 프로토콜 헤더 중 하나로 서버가 자신 이외의 출처를 가지는 소스를 포함할 경우 이를 표시하는 기능을 합니다. 목적은 브라우저가 데이터 요청하고 서버가 요청받은 데이터를 전송 시 보안성을 향상하기 위함인데요. 설정에 따라 브라우저는 출처에 따라 접근을 제한하는데요. 예를 들어, Fetch API는 애플리케이션과 같은 출처를 가진 소스만 사용할 수 있습니다. 즉, domainA라는 도메인을 명을 가진 브라우저가 domainB라는 서버에 데이터를 요청하는 경우 헤더설정 여부에 따라 아래와 같이 접근이 제한되게 됩니다. 이런 문제는 프로덕션 버전에서는 발생하지 않고 개발환경에서만 발생하는데요. 이유는 브라우저가 스크립트에서 발생한 cr.. 브라우저 브라우저는 유저가 서버로부터 HTML형태의 정보를 가져와서 이를 문자와 이미지 등의 형태로 변화하여 화면에 표시해 주는 역할을 합니다. 불과 2000년대 초반까지 윈도 익스플로러가 주를 이루었던 반면 지금은 수를 헤아리기 어려울 정도로 많은 브라우저가 존재하는데요. Google Chrome 구글이 개발한 브라우저로 애플의 Webkit과 모질라의 파이어폭스를 기반으로 2008년에 출시한 이래로 독보적인 인기를 자랑하고 있는 브라우저입니다. 크롬은 자바스크립트의 구동속도를 향상하기 위해 자체개발한 V8엔진 등을 바탕으로 한 빠른 검색속도와 검색에 최적화된 화면구성으로 사용자가 가장 사용하기 편리한 브라우저로 꼽히는데요. 전 세계 브라우저 시장의 점유율이 50%를 넘는 데는 이유가 있겠죠. Mozilla Fi.. HTTP vs HTTPS http (Hyper Text Transfer Protocol)는 애플리케이션 층의 프로토콜로 브라우저와 서버 간에 통신을 가능하게 합니다. https (Hyper Text Transfer Protocol Security)는 그 이름에서 알 수 있듯이 http에 보안기능을 추가한 형태로 http과 달리 암호화된 경로 (Secure Socket Layer 또는 Transport Layer Security 인증서 사용)를 사용하여 데이터가 외부에 노출되지 않도록 합니다. http를 사용하는 웹사이트는 아래와 같이 검색창 좌측에 'Not secure'라는 문구가 뜹니다. https를 사용하는 웹사이트는 아래와 자물쇠 기호가 뜹니다. 사용자의 개인정보 등을 전송하지 않는 경우 http를 사용하여도 무관하지만 개.. 캐시 (cache) 캐시는 데이터 저장소를 의미합니다. 사용목적은 데이터 요청이 있을 때 해당 정보를 저장해 두었다가 추후 해당 데이터가 다시 요청될 때 사전에 저장된 데이터를 제공함으로써 응답시간을 단축시키기 위해 사용합니다. 캐시는 요청을 저장하는 Service worker와 달리 응답을 저장합니다. 네트워크 프락시 (Network Proxy) 프락시 서버는 브라우저와 서버 중간에서 요청을 전달하는 역할을 수행합니다. 프락시 서버는 단순한 중재자의 역할을 넘어 아래와 같은 다양한 기능을 제공합니다. 특정 IP를 제외시키거나 해당 IP에 대한 접근량이 얼마나 되는지 파악할 수 있게 해 줍니다. 캐시에 이전 검색기록을 저장하여 같은 요청이 있을 경우 중간에서 요청 처리가 가능하기 때문에 속도향상. 마찬가지로 같은 사이트에 대해 다수의 요청이 있을 때 서버에 대한 요청 1회로 모든 요청을 처리할 수 있어 네트워크 성능향상. 요청하는 IP 주소를 수정하거나 부가정보 노출 없이 서버에 요청이 가능하여 개인정보 노출을 줄일 수 있음. 추가로 IP주소를 수정하는 기능을 통해 접근하는 위치를 노출하지 않거나 다른 곳에서 요청하는 것처럼 위장할 수 있어 특정 .. 서비스 워커 (Service Worker) 서비스 워커는 브라우저에서 작동하는 스크립트로 사용자의 요청을 저장합니다. 사용자가 탭을 닫더라도 서비스워커는 지속되기 때문에 다음에 사용자가 웹에 접근 시 서비스 워커가 먼저 작동합니다. 이러한 특성 때문에, 서버와 브라우저 사이에 위치하며 브라우저에서 서버로 가는 요청을 받아 이전 캐시 (cashe) 기록을 참고하여 처리할 수 있는 요청은 서버로 보내지 않고 처리하는 것이 가능합니다 (network proxy와 같은 역할 수행). 이처럼, 캐시기록이 남아있는 경우, 서비스워커는 독립적으로 전체 애플리케이션을 로딩할 수 있으며 이는 서버에 대한 의존성을 줄여 로딩 속도를 향상함으로써 User Experience (UX)를 크게 향상해 줍니다. 참고 Angular angular.io HTML 삽입 미리보.. 이전 1 다음
