
웹 어플리케이션에서 로그인을 구현하는 방법은 크게 쿠키, 세션을 이용하는 방법과 토큰을 이용하는 방법 2가지가 있습니다. 간단히 말하면 쿠키, 세션 방식은 서버에서 세션아이디를 기록하고 브라우저에서 쿠키를 저장하는 방법이고 토큰 방식은 토큰을 발행하여 토큰의 유효성을 검증하는 방법입니다. 쿠키, 세션 (cookie, session) 사용자(클라이언트)가 서버에 자원을 요청 시 서버에서 사용자를 특정할 수 있는 데이터를 기반으로 세션 아이디를 생성하고, 해당 아이디를 키값으로 하여 필요한 값들을 서버의 메모리에 저장하고, HTTP 프로토콜의 header의 setCookie를 통해서 브라우저의 쿠키에 세션 아이디를 기록하도록 합니다. 브라우저는 request 요청을 보낼 시 header에 cookie를 자동..
개발자들은 aws 등을 사용하여 개인 서버를 올리는 분들이 많지만 사용법이 쉽지만은 않기 때문에 웹퍼블리셔 분들이나 디자이너 분들은 자신의 포트폴리오를 서버에 올리기 힘들어 합니다.그런 분들을 위해 무료로 간편하게 html 파일을 서버에 올릴 수 있는 방법을 하나 정리하려 합니다사용할 서비스는 닷홈이라는 호스팅 업체의 서비스 입니다. https://www.dothome.co.kr/ 서버 만들기닷홈에 들어가신 후 회원가입을 합니다. 그 후 웹호스팅 - 무료호스팅을 선택합니다 해당 창에 들어가서 스크롤을 밑으로 내리면 무료호스팅 신청하기가 있습니다 해당하는 서비스를 신청합니다. 입력하는 값들이 몇 있지만 회원가입 정도의 수준이므로 사진은 생략하겠습니다 신청이 완료 된 후에 웹호스팅-내웹호스팅 관리로 들어갑니..
//http://www.facebook.com/sharer.php?u={페이지 제목}&t={페이지링크} $(".facebook").click(function(e){ e.preventDefault(); window.open('https://www.facebook.com/sharer/sharer.php?u=' +encodeURIComponent(document.URL) +'&t='+encodeURIComponent(document.title), 'facebooksharedialog', 'menubar=no, toolbar=no, resizable=yes, scrollbars=yes, height=300, width=600'); }); 메타테그를 입력 후 자바스크립트를 통해 이벤트를 붙여 페이스북 공유가 가능..
웹 표준이란?웹에서 사용되는 표준 기술이나 규칙을 의미하며, W3C의 권고안 에서 나온 기술들이 여기에 해당합니다이 표준 기술들을 기준으로 웹 브라우저들(크롬, IE, 사파리 등)이 만들어지는데, 브라우저를 만드는 업체(구글, MS, 애플 등)에서 표준 기술을 해석하는 차이, 새로운 기술 삽입 등으로 조금은 다르게 구동되는 브라우저가 생깁니다. 표준화 제정 단계대부분의 경우 표준화 제정 단계의 '권고안'에 해당하는 기술을 표준이라고 생각하시면 쉽습니다 크로스 브라우징이란?조금은 다르게 구동되는 여러 브라우저에서 동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법 등을 말합니다대부분으 브라우저는 최대한 웹 표준을 준수해서 제작되기 때문에 문제 되는 경우가 적지만 IE(익스..
REST 정리 : REST란? 저번 글에서는 REST에 대해 정리를 해보았습니다 그럼 REST API는 무엇일까요?REST API는 REST 아키텍쳐 스타일을 따르는 API 하지만 오늘날 REST API라고 하는 API들의 대부분이 REST 아키텍쳐 스타일을 모두 따르지는 않습니다(2017년 기준)그럼 REST API는 제약조건들을 다 지켜야하는 것이 아니라 몇개 빠뜨려도 되는 걸까요?그에 대한 답은 모두 지켜한다고 Roy T.Fielding이 말을 했습니다하이퍼텍스트를 포함한 self-descriptive한 메시지의 uniform interface를 통해 리소스에 접근하는 API -Roy T.Fielding 그렇다면 원격 API가 꼭 REST API여야 하는가?시스템 전체를 통제할 수 있다고 생각하거나..
많이 듣고 많이 사용하는 개념이지만 알 것 같으면서도 모르겠는 REST에 대해 찾아 보던 중 정말 잘 설명한 영상이 있어 정리를 했습니다REST란 REpresentational State Transfer의 약자인데 해석해 보면 대표적인 상태 전송 방법인데... 약자를 보아도 무슨 의미인지 유추하기가 매우 힘듭니다 위키백과에서도 컴퓨터 간에 상호 운용성을 제공하는 것중에 하나라는 설명이 있지만 아직 이해하기에는 부족합니다그래서 접근 방법을 바꾸어 REST가 어디서 부터 나왔는지 알아보도록 하겠습니다. REST의 시작WEB(1991)Q : 어떻게 인터넷에서 정보를 공유할 것인가?A : 정보들을 하이퍼텍스트로 연결한다.표현 형식 : HTML식별자 : URI전송 방법 : HTTP HTTP/1.0 (1994-19..
빠르게 훑어보는 웹 개발 트렌트 를 정리해보았습니다. 웹 개발 트렌트 1. 서버 중심으로 개발 2. 클라이언트 중심으로 개발 3. 고도화 1. 서버 중심으로 개발 - 서버랑 클라이언트랑 통신을 하지 않고 이미 만들어진 정적 페이지를 제공해서 클라이언트가 표시 - 페이지 단위로 rest - 사용자가 요청한 화면을 서버에서 페이지 단위로 생성해서 제공 - 이 당시 까지만 해도 자바스크립트가 있었지만 평가가 그리 좋지는 않았음 -> 클라이언트에 코드가 오픈이 되서 공들여서 짜지 않는 분위기 2. 클라이언트 중심으로 개발 - ajax, spring, jquery의 등장으로 자바스크립트를 더 써 볼 수 있겠다라는 생각이 퍼지기 시작 - 페이지를 띄워놓고 ajax로 동적으로 처리 할 수 있지 않을까? - 아이폰, ..
쿠키, 세션과 토큰의 차이점에 대한 정리 2022.04.19 - [Study/Web] - 쿠키, 세션(cookie, session)과 토큰 (token, JWT)의 차이점 쿠키와 세션을 사용하는 이유 HTTP 프로토콜은 2가지의 특징을 가지고 있다 1. 비연결지향(Connectionless) 클라이언트가 request를 서버에 보내면, 서버는 요청에 맞는 response를 보내고 접속을 끊는다. (HTTP1.1 버전에서는 커넷견을 열어두고(연결을 유지하고) request에 재활용하는 기능이 추가되었다) 2. 상태정보유지안함(Stateless) 연결을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보는 유지하지 않는다 그렇기 때문에 HTTP는 사용자의 요청마다 연결과 해제를 하고 연결 상태를 유지하지..
VirtualDOM에 대해서 알아보기 전에 브라우저가 어떻게 작동하는지 먼저 알아 봅시다 쉽게 생각하면 html과 css를 합치고 화면에 나올 수 있게 배치한 후 출력한다 DOM Tree 생성 브라우저가 HTML을 전달 받으면, 브라우저의 렌더 엔진이 이를 파싱하고 DOM노드로 이뤄진 트리를 만듭니다각 노드는 각 HTML 엘리먼트들과 연관되어있습니다 Render Tree 생성그 후 외부 css파일과 각 엘리먼트의 inline 스타일을 파싱합니다.스타일 정보를 사용하여 DOM트리에 따라 새로운 트리, 렌더트리를 만들어요 Render Tree 생성 -그 뒤에선 무슨일이 일어나고 있는가Webkit에서는 노드의 스타일을 처리하는 과정을 'attachment'라고 부릅니다.DOM트리의 모든 노드들은 'attach..