FE BE 개발 메모장/Client Server Architecture
크로스 브라우징(Cross Browsing) 알아보기
크로스 브라우징(Cross Browsing)이란? 현재 다양한 브라우저(크롬, 파이어폭스, 사파리, 오페라 등..)들이 존재하며, 어떤 브라우저에서든지 호환성을 높혀 화면이 깨지지않고 동등한 서비스를 사용가능할 수 있게 작업하여 다양한 웹의 접근성일 높히는 작업이다. 이러한 작업이 필요한 이유는 각 브라우저마다 렌더링 엔진이 다르기 때문이다. 1.Can I Use 사용하기 Can I Use에서 HTML 요소 및 속성이나, CSS 기능들, JavaScript 기능들의 브라우져에서 지원 여부를 버전 별로 보여주어 사전에 호환성문제를 예방할 수 있다. 스크롤을 내리면 상세정보도 나와 웹페이지 작업 시 매우 유용한 사이트이다. 2. 브라우저 트랜드 파악 및 대응순서 가장 점유율이 높은 브라우저를 최우선순위로 두..
브라우저의 동작 원리
브라우저(Browser)? 우리가 흔히 아는 브라우저로는 대표적으로 애플의 Safari, 구글의 Chrome, 마이크로소프트의 IE(지금은 사망), Edge 등 있지만 firefox, Opera, Dolphin 등이 있다. 브라우저의 기본 구조 1. 사용자 인터페이스(User Interface) - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등.. - 요청한 페이지를 보여주는 창을 제외한 부분을 보여준다. 2. 브라우저 엔진(Browser Engine) - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다. 3. 렌더링 엔진(Rendering Engine) - 요청한 컨텐츠를 표시한다. - HTML을 요청할 경우 HTML과 CSS를 파싱(해석)하여 화면에 표시한다. 4-1. 통신(Netwrokin..
HTTP 세션(session)
sessions이란? 서버가 해당 서버(웹)로 요청(request)한 클라이언트(사용자)를 식별하는 방법이다. 서버는 요청한 클라이언트 에게 요청 헤더의 set-cookie 값으로 클라이언트 식별자인 session-id를 응답한다. 서버로부터 응답받은 session-id는 해당 서버와 클라이언트 메모리에 저장된다. 이때 클라이언트 메모리에 사용되는 cookie 타입은 세션 종료 시 같이 소멸되는 Memory cookie가 사용된다. HTTP Session 전달 방법 1. 클라이언트가 서버로 요청을 하면 서버는 DB에 정보를 저장한다. 2. 만약 클라이언트로부터 발송된 session-id가 없다면, 서버는 session-id를 생성해 클라이언트에게 set-cookie값으로 session-id를 발행한다. ..
쿠키(Cookie)
HTTP 프로토콜 HTTP 프로토콜은 Connectionless, stateless 한 특성을 가지고있다. connectionless HTTP는 먼저 클라이언트가 요청(request)을 서버에 보내면, 서버는 클라이언트에게 요청에 맞는 응답(response)을 보내고 접속을 끝는 특성이 있다. HTTP가 tcp위에서 구현되었기 때문에 네트워크 관점에서 keep-alive 옵션으로 connectionless의 연결비용을 줄이는 것을 장점으로 비연결지향이라 한다. stateless 통신이 끝나는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보는 유지하지 않는 특성이 있다. 쿠키(Cookie)란? 쿠키는 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일이다. 쿠키 특징 사용자 인증이..
HTTPS
URL : Uniform Resource Locator로 네트워크 상에서 자원이 어디있는지 알려주기 위한 규약이다. URL은 웹사이트 주소 보다 큰 개념이며, URL 밑에는 웹 사이트 주소, 네트워크 상에 연결된 다양한 자원을 포함하고 있다. HTTPS(HTTP + Secure Socket) HTTPS 는 HTTP에 S(Secure Socket)을 추가한 것이다. 기본 골격이나 사용 목적 등은 HTTP와 거의 동일하지만, 데이터를 주고 받는 과정에서 '보안' 요소가 추가 되었다는 것이 큰 차이점이다. 즉 HTTPS를 사용하여 서버와 클라이언트 사이의 모든 통신 내용이 함호화 하는 것이다. 그래서 웹 사이트 사용자가 인터넷을 통해 신용카드 번호, 은행 정보 및 로그인 자격 증명과 같은 중요한 데이터를 안전..
REST API에 대해 이해하기
REST, RESTful하다가 뭐야? 보통 프론트엔드나 백엔드나 학습과정에서 RESTful 한, REST API 설계 라는 말을 많이 들어봤을 것이다. 이 개념에 대해 너무 혼동이 찾아와 가끔은 이상한 소리를 할 때가 있는데 더이상 해메지말고 본격적으로 알아보자. REST(Representational State Transfer) REST는 단어 REST가 아닌 Representational State Transfer의 줄임말이다. 이 개념은 2000년 Roy Fielding이 박사 학위 논문에 정의한 개념이며, 프로토콜이나 통신 규약을 말하는 것이 아닌 아키텍쳐 스타일을 말한다. REST의 궁극적인 목표는 성능, 확장성, 단순성, 수정 가능성, 가시성, 이식성 및 안정성을 높이는 것이다. REST AP..
교차 출처 리소스 공유(CORS)
모든 웹 관리자, 서버 개발자, 프론트엔드 개발자를 위한 필독서 CORS : developer.mozilla.org/ko/docs/Web/HTTP/CORS cors는 쉽게 말하자면 악의를 가진 해커로부터 인터넷을 보하하기 위해 만들어졌다. node.js의 http 모듈을 이용하여 웹 서버를 만드는 시간을 가졌다. HTTP 모듈, HTTP 트랜잭션 해부라는 Node의 공식 가이드를 참고 하여, 페어와 상의하며 코드를 짰었다. 어느정도 완성했다고 생각하고, nodemon이라는 편리한 API를 통해 테스트를 거쳤는데 콘솔 로그에서는 아래와 같은 경고창을 띄어 어지럽게 만들어줬다. Access to fetch at 'http://localhost:5000/line' from origin 'null' has be..
HTTP 메세지
HTTP(Hypertext Transfer Protocol) 웹 브라우저와 웹 서버 간 서로 통신하기 위한 규약이다. 서버와 클라이언트가 인터넷상에서 데이터를 주고받기 위한 프로토콜(Protocol)을 뜻한다. HTTP는 계속 발전하여 HTTP/2 까지 등장한 상태 어떤 종류의 데이터도 전송할 수 있도록 설계되어있다. HTTP 통신과정 HTTP는 서버/클라이언트 모델을 따른다. 클라이언트(client) -> 요청(request) -> 서버(server) -> 응답(response) -> 클라이언트 비연결 지향(Connectionless): 클라이언트가 요청을 서버에 보내고, 서버가 요총에 맞는 응답을 보내면 바로 연결을 끊는다. 무상태(Stateless) : 연결을 끊는 순간 클라이언트와 서버의 통신은 ..