웹
-
SOP, JSONP란?웹 2019. 9. 13. 20:47
SOP란?자바스크립트는 서로 다른 도메인에 대한 요청을 보안상 제한하는데, 이 정책을 Same-Origin Policy, 즉 SOP라고 합니다. SOP 정책으로 인해 생기는 이슈를 크로스 도메인 이슈(Cross-domain issue)라고 하는데 JSONP는 이 이슈를 우회해서 데이터 공유를 가능하게끔 합니다.JSONP(JSON with Padding 또는 JSON-P)란?JSONP란 CORS가 활성화 되기 이전의 데이터 요청 방법으로, 다른 도메인으로부터 데이터를 가져오기 위해 사용하는 방법입니다. SOP에 따라 다른 도메인 간의 request를 제한하지만 JSONP는 보안상 이슈로 인하여 현재는 거의 사용하지 않는 기술입니다. W3C에서 채택된 CORS 방식의 HTTP 통신을 사용하여 크로스 도메인 ..
-
GraphQL이란?웹 2019. 9. 13. 20:07
GraphQL은 facebook에서 만든 Graph Query Language로 어플리케이션 레이어 쿼리 언어입니다. 다시 말해서 API를 위한 쿼리 언어이며 타입 시스템을 사용하여 쿼리를 실행하는 서버사이드 런타임입니다. GraphQL은 특정한 데이터베이스나 스토리지에 귀속되어 있지 않으며 기존 코드와 데이터에 의해 대체됩니다.GraphQL은 기존에 사용하고 있는 REST API의 한계점을 극복하고자 나온 통신 규약으로 REST API를 대체할 수 있습니다. 아래에서 REST API의 한계점과 GraphQL이 무엇인지 설명합니다.REST API의 한계REST API의 개념을 간단하게 말하자면 모든 Resource들을 하나의 Endpoint에 연결하고 연결된 Endpoint는 Resource와 관련된 내..
-
서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR)웹 2018. 12. 23. 15:51
SSR 이란?Server Side Rendering 의 약어로써 단어 그대로 서버에서 렌더링을 작업합니다. 기존에 존재하던 방식으로 사용자가 웹페이지에 접근할 때, 서버에 페이지에 대한 요청을 하며 서버에서는 html, view 와 같은 리소스들을 어떻게 보여질지 해석하고 렌더링하여 사용자에게 반환합니다. 웹에서 제공하는 정보량이 많아지고 데스크탑보다 성능이 다소 떨어지는 스마트폰의 웹에 대한 요구가 커지면서 새로운 기법이 탄생했습니다.CSR 이란?Client Side Rendering의 약어로써 최초에 1번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다, 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링을 하는 방식입니다. 여기에 Angular JS, Backbon..
-
CDN이란웹 2018. 12. 22. 21:26
CDN이란?CDN은 Content Delivery Network 의 약어로서 전 세계에 전략적으로 분산되어있는 서버 네트워크입니다(지리적으로). CDN은 사용자가 리소스를 다운로드 할 수있는 대체 서버 노드를 제공하여 작동합니다. 이러한 노드는 전 세계에 퍼져 있기 때문에 지연 시간 감소로 인해 컨텐츠의 빠른 응답과 다운로드 시간을 제공함으로써 사용자에게 더 가까운 전략적 이점을 제공합니다. 예를 들어, 미국에 거주하는 사용자가 중국에 있는 컨텐츠를 가져온다고 하면 거리가 멀기 때문에 느리고 국제회선을 사용해서 비용 또한 비쌉니다. CDN을 사용하면 미국의 CDN 서버에 복사를 하여 미국에 거주하고 있는 사용자의 요청을 미국 CDN으로 연결하기 때문에 비용, 속도를 보장할 수 있습니다.만약 1대의 CDN..
-
SPA (Single Page Application)웹 2018. 12. 22. 17:00
데스크탑에 비해 성능이 낮은 모바일에 대한 니즈가 증가하여 스마트폰을 통해 웹페이지를 출력하기 위해서는 기존 방식과는 다른 접근이 필요했습니다. 이에 SPA 기법이 등장하게 되었습니다. SPA는 단순하게 1개의 페이지만 있는 어플리케이션 이라 정의할 수 있습니다. SPA는 웹사이트를 구성하는 방법 중 하나인데 보통 웹사이트처럼 여러 페이지가 있고 회원가입, 로그인, 글쓰기 등 복잡한 기능을 지원하지만, 이는 처음 호출된 HTML상에서 필요한 데이터만 호출하여 화면을 새로 구성해 주는 것으로 실제로 페이지의 이동이 일어나지 않습니다. 보통 웹사이트의 메뉴바, footer 부분 등 내용이 변하지 않아도 페이지를 이동할때마다 서버에서 코드를 생성해서 새로 읽고 클라이언트에서는 이 코드를 페이지에 렌더링하게 됩..
-
Phantom JS란?웹 2017. 10. 22. 20:26
PhantomJS란?헤드리스 브라우저로 요즘 유명한 브라우저Headless browser란?헤들리스 브라우저는 그래픽 유저 인터페이스가 없는 웹브라우저를 뜻합니다. 헤들리스 브라우저는 웹 브라우저와 유사한 환경을 가졌지만 커맨드 라인 인터페이스를 통해 실행하고 제어할 수 있는 브라우저들을 말합니다. 헤들리스 브라우저엔 자바로 작성된 HtmlUnit이라는 것도 많이 사용됐었습니다.사용용도PhantomJS와 같은 헤들리스 브라우저는 아래와 같은 용도로 사용됩니다.Jasmine, QUnit, Mocha와 같은 테스트 프레임워크에서 함수를 테스트 할 때 사용웹사이트의 스크린샷, 썸네일 프리뷰 등을 만들 때 사용. SVG, Canvas를 포함한 웹 컨텐츠도 캡쳐가 됨DOM api, jQuery와 같은 라이브러리로..
-
CORS웹 2017. 3. 17. 15:45
개요HTTP 요청은 기본적으로 Cross-Site HTTP Requests가 가능합니다. 다시 말하면, 태그로 다른 도메인의 이미지 파일을 가져오거나, 태그로 다른 도메인의 CSS를 가져오거나, 로 둘러싸여 있는 스크립트에서 생성된 Cross-Site HTTP Requests는 Same Origin Policy를 적용 받기 때문에 Cross-Site HTTP Requests가 불가능합니다. 즉, 프로토콜, 호스트명, 포트가 같아야만 요청이 가능합니다.AJAX가 널리 사용되면서 로 둘러싸여 있는 스크립트에서 생성되는 XMLHttpRequest에 대해서도 Cross-Site HTTP Requests가 가능해야 한다는 요구가 늘어나자 W3C에서 CORS라는 이름의 권고안이 나오게 되었습니다.CORS 요청의 종..
-
세션 클러스터링웹 2016. 11. 9. 14:49
클러스터링이란?클러스터링은 여러 개념에서 의미를 다르게 두지만 여기서 설명할 클러스터링이란 것은 여러대의 서버가 동시에 한가지 업무를 수행하도록 만드는 것입니다. 이를테면 DB가 한대 있는데 이 한대가 뻗으면 시스템 장애가 납니다 (SPOF - Single Point Of Failure). 만약 2대를 클러스터링 해 놓고 각각의 역할을 수행하다가 한놈이 뻗으면 나머지 한놈이 그 역할을 대신 수행하도록 하면 위와 같은 문제를 해결하면서 지속적인 서비스를 제공해줄 수 있게 됩니다.세션 클러스터링이란?세션 클러스터링은 WAS가 2대 이상 설치되어 있을 경우 동일한 세션으로 세션관리 하는 것을 의미합니다. 예를 들면 L4 스위치를 통해 2대 이상의 WAS가 연결되어 있을 경우, 일반적으로는 사용자는 접속했던 W..
-
HTML5웹 2016. 7. 28. 20:48
개요HTML5는 플래시나 실버라이트와 같은 플러그인 기반 응용프로그램에 대한 필요성을 줄이는 것에 초점을 맞추고 있다.설명HTML5라고 불리우는 개념은 단순히 웹 문서를 작성할 때 사용되는 마크업 랭귀지(HTML)의 문법적 (syntactic) 버전 뿐만 아니라 새로운 DOM API 스펙을 포함하는 것이다. 문법면에서는 이전에 비해 상당히 간결하고 명확해 졌는데, 또한 이전에는 JavaScript를 사용해서 엄청나게 긴 코드를 써서 간접적으로 구현해야 했던 기능들이 정식 엘리먼트로 편입됨으로서 (예를 들어 ) 간단하게 구현해낼 수 있게 되었고, 불필요하게 길게 적어야했던 이전 버전에서 꼭 필요한 부분만 남기도록 바뀌는 등 여러가지 개선점이 생겼다.API면에서, HTML5에서는 비디오 및 오디오와 같은 미..
-
웹서버와 WAS웹 2016. 6. 28. 19:46
웹 서버와 WAS(Web Application Server)의 정의 웹서버와 WAS는 비슷한 개념이기 때문에 같이 또는 다르게 사용되는 단어 가운데 하나이다. 인터넷 확산 초기에는 웹서버라는 개념으로 통칭해서 사용했지만, 시간이 지남에 따라 WAS를 더 많이 사용하고 있다. 인터넷 사용자가 증가함에 따라, 각 웹 사이트는 보다 많은 사용자에게 원활한 서비스를 제공하기 위해 기능적인 layer를 나누게 되었고 여기서 웹서버와 WAS의 구분점이 생기게 된 것이다.기능적으로만 본다면, 거의 대부분의 웹 서버가 웹 애플리케이션을 동작시킬 수 있겠지만 모두 웹 서버 혹은 WAS라고 부르는 것보다는 어떤 기능을 수행하는지에 따라, 즉 기능상의 분류를 통해 구분지어 사용해야 할 것이다. 구분웹서버WAS설명웹브라우저(..