본문 바로가기

WEB

(17)

[ HTML5 ] HTML5 추가 기능 설명 HTML 기본 설명 HTML은 Hypertext Markip Language의 약자로, 웹을 이루는 가장 기초적인 구성 요소로 웹페이지를 기술하기 위한 마크업 언어이다. 웹 콘텐츠의 의미(내용)와 구조를 정의할 때 사용하며, 이를 통해 정보를 구조화 한다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현(CSS), 또는 기능/동작(JavaScript)을 설명하는 데 사용한다. HTML은 웹브라우저에 표시되는 글과 이미지 등의 다양한 콘텐츠를 표시하기 위해 "마크업"을 사용하고, HTML 마크업은 다양한 "요소"를 사용한다. 요소의 종류에는 , , , , , , , , , , , , , , , , , , , , , , , 등등이 있다. 요소에 대한 자세한 내용은 MDN의 요소 참고서를 보면 ..

[에러] 400 Bad Request Request Header Or Cookie Too Large 서비스의 QA를 진행하다가 아래와 같은 이슈가 나왔다. 400 Bad Request Request Header Or Cookie Too Large nginx 발생 원인 400 Bad Request Request Header Or Cookie Too Large nginx 에러는 HTTP 상태 코드 중 하나로, 요청 헤더 또는 쿠키가 너무 크기 때문에 웹 서버(nginx)에서 처리할 수 없다는 것을 나타낸다. 이는 웹 서버에 설정된 제한 크기를 초과한 것이기 때문에 이 문제를 해결하려면, 요청 헤더 또는 쿠키 크기를 줄이거나 웹 서버에서 제한 크기를 늘려야 하지만 방문자가 브라우저의 사이트 기록을 삭제하는 간단한 방법으로 해결할 수 있다. (모바일 웹도 마찬가지로 설정에서 해당 브라우저 앱을 선택하면 캐시를..

[ WEB ] AJAX에 대해 알아보기. AJAX란 무엇일까? 비동기 자바스크립트와 XML(Asynchronous JavaScript And XML)을 말하며, 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. AJAX는 페이지의 새로고침 없이 서버에 요청을 보낼 수 있고, 서버로부터 데이터를 받고 작업을 수행하는 특징을 가진다. 브라우저에서 제공하는 Web API인 XMLHttpRequest(HTTP비동기 통신을 위한 메서드와 프로퍼티를 제공) 객체를 기반으로 동작한다. 위의 그림은 전통적인 웹페이지의 생명 주기(왼쪽)와 Ajax(오른쪽)의 비교 이미지이다. 전통적인 웹페이지의 경우(왼쪽 이미지) html태그로 시작하여 html..

[ WEB ] HTTP Header(헤더) - 1 HTTP 헤더란 무엇일까? HTTP 헤더는 클라이언트와 서버가 요청 / 응답으로 부가적인 정보를 전송할 수 있도록 해주는 역할을 한다. 대.소문자를 구분하지 않는 이름과 콜론 (:) 다음에 오는 값(줄 바꿈 X)으로 이루어져 있으며 값 앞에 붙은 빈 문자열은 무시되며, 필요시 임의의 헤더를 추가할 수 있다. HTTP 헤더 필드 명 확인하기 HTTP 헤더의 분류 - General 헤더: 메시지 전체에 적용되는 정보로 요청 / 응답에서 모두 사용되지만 콘텐츠 자체에는 적용되지 않는 헤더로, Connection, Date, Cache-Control 등이 있다. - Request 헤더: 패치될 리소스나 클라이언트에 대한 정보를 포함하는 요청 정보 헤더로, User-Agent, Cookie, Referer 등이 ..

[ WEB ] Cookie에 대한 정리 글 Cookie 란? HTTP쿠키(웹 쿠키 또는 브라우저 쿠키)는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각으로, 브라우저는 해당 데이터 조각들을 저장해 놓았다가, 동일한 서버에 요청 시 저장된 데이터를 함께 전송한다. 쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용하며, 이를 사용하여 stateless인 HTTP 프로토콜에서 상태 정보를 기억하여 사용자의 로그인 상태를 유지할 수 있다. 쿠키는 Key=value 형태로 이루어져 있다. 타입은 String이고, 공간 제약이 있어서 4KB 이상 저장이 불가능하다. Set-Cookie 는 서버에서 클라이언트(사용자 브라우저)로 쿠키를 전송하기 위해 사용한다. (응답) Set-Cookie: = 쿠키의 특징 - 쿠키는 ..

[ WEB ] Web Storage에 대해 알아보기. Web Storage API는 브라우저에서 키/값 쌍으로 구성되며, 객체와 비슷하다. 이 데이터들은 페이지 로딩에도 온전하게 유지가 되고 key와 value는 항상 문자열이다.(정수를 사용할 경우 자동으로 string으로 변경됨. 자스의 객체 동작 방식과 유사.) 쿠키보다 훨씬 직관적으로 저장할 수 있는 방법을 제공한다. Web Storage 개념과 사용법 Web Storage는 sessionStorage와 LocalStorage의 두 가지 방식이 있으며, Window.sessionStorage와 Window.localStorage 속성을 통해 사용할 수 있다. 두 가지 속성중 하나에 접근하면 Storage 객체의 인스턴스를 생성하게 되고, 그것을 사용하여 데이터 항목을 추가, 회수, 제거 할 수 있다...

[ HTTP ] HTTP에 대해 알아보기 HTTP : HyperText Transfer Protocol HTTP는 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜이다. HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 클라이언트-서버 프로토콜이기도 하다. 하나의 완전한 문서는 텍스트, 레이아웃 설명, 이미지, 비디오, 스크립트 등 불러온(fetched) 하위 문서들로 재구성된다. 보통 브라우저인 클라이언트에 의해 전송되는 메시지를 요청(requests)이라고 부르며, 그에 대해 서버에서 응답으로 전송되는 메시지를 응답(responses)이라고 부른다. HTTP/1.0은 1996년 HTTP/1.1은 1999년 HTTP/2는 2015년 발표되었다. HTTP 요청 메소드 - GET: 클라이언트가 서버에게 URL에 해당하는 ..

[ Internet / 동작원리 ] MDN - 인터넷의 기본 동작 원리에 대하여 🌸 저작권 🌸 © 이 포스팅은 CC-BY-SA 2.5 라이선스에 따라 사용할 수 있습니다. **MDN의 인터넷은 어떻게 동작하는가? 를 보고 공부 목적으로 정리한 포스팅입니다.** 🧚🏻 소중한 출처 🧚🏻 인터넷은 어떻게 동작하는가? - MDN Web Docs / MDN contributors 생활코딩 WEB1 - 생활코딩 Youtube 네트워크란 무엇일까? 네트워크는 그물을 뜻하는 net + work 의 합성어로, 그물처럼 통신망으로 서로 연결된 체계를 말한다. 두 개 이상의 컴퓨터가 통신이 필요할 때 A컴퓨터와 B컴퓨터는 물리적(예: 이더넷 케이블) 또는 무선으로 (예: WiFi, Bluetooth 등) 연결되어야 한다. 모든 현대의 컴퓨터들은 물리적 또는 무선 연결을 통해 네트워크 연결을 지속할 수 ..

이전 1 2 3 다음

티스토리툴바