<ziny/>

HTTP가 사용자를 식별하는데 사용하는 기술들 1. HTTP헤더 다양한 헤더를 통해서 사용자에 대한 정보를 알 수있다. 악의적인 서버가 From헤더에 있는 이메일 주소를 모아서 스팸 메일을 발 송 하는 문제가 있어서 From헤더를 보내는 브라우저는 많지 않다.웹로복은 데이터르를 수집 하는 과정에 의도치 않게 웹사이드에 문제를 일으키는 경우 항의메일을 보낼 수 있도록 From헤더를 기술하기도 한다.  user-agent는 사용자가 쓰고있는 브라우저의 이름과 버전정보, 때로는 운영체제에 대한 정보까지 포함해서 알려주기도 한다. 특정 브라우저에 동작에 관한 처리를 하기엔 좋지만, 콘텐츠를 최적화 하기에 유용한 정보는 아니다. 2. 클라이언트IP주소클라이언트의 IP주소는 보통 헤더에는 없지만, HTTP요청을 보..

등장배경http/1.1은 구현의 단순성과 접근성에 기조를 두고 최적화 되었기 때문에 성능의 희생은 불가피 했다. 커넥션 하나를 통해서 하나의 요청, 하나의 응답을 받는 메시지 교환 방식은 단순하지만, 회전지연을 피할 수 없었다.문제를 해결하기 위해서 병렬커넥션, 파이프라인 커넥션이 도입되었지만 근본적 해결책은 아니였다. 여러 곳에서 다양한 프로토콜을 제안해왔다. ( 로이필딩의 WAKA, 마이크로소프트의 S+M, 구글의 SPDY 등)2012년에 SPDY를 기반으로 한 HTTP/2.0을 설계하기로 결정했다. HTTP/2.0서버와 클라이언트 사이의 TCP커넥션 위에서 동작하고, 커넥션 초기화는 클라이언트이다. 요청과 응답은 길이가 정의된 한개 이상의 프레임에 담기고, 헤더는 압축되어 담긴다.서버는 클라이언트에..

웹로봇사람과의 상호작용 없이 연속된 웹 트랜잭션을 자동으로 수행하는 소프트웨어 프로그램이다.각 방식에 따라 크롤러, 스파이더, 윌, 봇 등 다양한 이름으로 불린다. 크롤러 & 크롤링웹 페이지 한개를 가져오고, 그 페이지가 가르키는 모든 웹 페이지를 가져오는 일을 재귀적으로 반복하는 방식으로 웹을 순화하는 로봇이다. 크롤러가 방문을 시작하는 URL들의 초기 집합은 루트집합(root set)이라 불린다.루트 집합을 고를때는 모든 링크를 크롤링 가능하도록 골라야 한다. (결과적으로 웹페이지들의 대부분을 가지고 올 수 있도록)대부분을 커버하기 위해 루트집합에 너무 많은 페이지가 있을 필요가 없다. 크롤러는 검색한 각 페이지 안에 들어있는 URL링크들을 파싱해서 크롤링할 페이지들의 목록에 추가한다.크롤링을 할때 ..

next14 + tailwind 가로 프로그레스 바const [_step, setStep] = useState(0);const isRunAnimation = useMemo(() => { if (step !== _step) { setStep(step); return true; } else { return false; }}, [step]);  {!isCompleted && ( )}  재사용가능한 컴포넌트로 만들기 위해서 step값을 props로 받아서 사용했다.     세로 프로그레스바

next14 + tailwind {photos.map((image) => ( ))}

웹 개발에서 스타일링 초기화는 일관된 디자인을 구현하는데 중요한 요소입니다. 이를 위해 리셋 CSS와 노멀라이즈 CSS는 두 가지 대표적인 방법으로 사용됩니다. 하지만 이 두 방법은 어떻게 다를까요? 이번 글에서는 리셋 CSS와 노멀라이즈 CSS의 주요 차이점을 알아보겠습니다.리셋 CSS: 기존 스타일 제거, 완전 초기화리셋 CSS는 기본적으로 브라우저의 기본 스타일을 제거하고 모든 스타일을 초기화하는 방법입니다. HTML 요소의 여백, 패딩, 폰트 크기 등을 모두 제거하여 브라우저 간에 동일한 기본 스타일을 설정합니다. 이 방식은 브라우저별로 제공되는 기본 스타일을 완전히 무시하고, 개발자가 스타일을 완전히 제어할 수 있게 합니다. 하지만 이로 인해 일부 기본적인 시각적 요소도 사라질 수 있으며, 스타..

const testText = " 첫번째 줄 테스트중요한 부분입니다. 두번째 테스트 에는 중요한게 없습니다. 중요한 것은 아무것도 없습니다 "작업을 하다보니 문자열에 html이 들어오는 경우가 종종 있다dangerouslySetInnerHTML을 사용 하면 손쉽게 html을 렌더링 할 수 가 있는데 __html을 사용해서 문자열을 넣어주면 html이 렌더링이 된다. 하지만 프론트 개발자는 들어온 html에 스타일을 적용해야 하는데 나는 emottion styled를 이용해보도록 하겠다!  const Contents = styled.div` ol { display: grid; row-gap: 4px; count..

Promise.all이란?Promise.all() 메서드는 인자로 받은 Promise 인스턴스들의 처리 결과를 담은 새로운 Promise를 반환합니다. 인자로 전달된 Promise 인스턴스들이 모두 fulfilled 상태가 되면 결과 Promise는 모든 fulfilled 값을 가진 배열을 인수로 가진 fulfilled 상태가 되고, 하나 이상의 Promise가 rejected 상태가 되면 가장 먼저 rejected 상태가 된 Promise의 이유로 결과 Promise는 rejected 상태가 됩니다.병렬 처리Promise.all() 을 이용하면 병렬적으로 여러 개의 Promise를 실행할 수 있습니다. 모든 Promise가 fulfilled 상태가 되기 전까지는 결과 Promise가 fulfilled ..

Omit특정 속성만 제거한 타입을 정의한다예시interface Post{ id: number; title: string; content: string;}type Posts = Omit;const PoPularPost : Omit ={ title: "인기있는 콘텐츠" content: "날 따라해봐"}

왜 써야 하는데?짧은 시간에 많은 이벤트가 발생하는 경우 이벤트 핸들러가 과도하게 호출되어서 성능의 문제를 발생시키기 때문에! 나아가 사용자 경험을 헤칠 수 있다  즉! 이벤트 핸들러가 많은 연산을 수행하는 경우에 대해서 제약을 걸어 제어 할 수 있는 수준으로 이벤트를 발생시키는 것을 목표로 함! Throttle입력 주기를 방해하지 않고 일정시간 동안 입력을 모아서 한번에 출력을 제한여러 번 발생하는 이벤트를 일정 시간 동안 최대 한 번만 실행되도록이벤트 발생 시간 이후 일정 시간 동안만 기다리고 이벤트를 실행 후 재차 기다린다는 점입력이 시작되면 일정주기로 게속 실행예시 - 무한 스크롤Debounce입력 주기가 끝나면 출력여러번의 이벤트에서 가장 마지막 이벤트만 실행되도록 만드는 개념마지막 이벤트에서 ..