프론트엔드 공부한 거 정리하기

쿠키와 세션은 HTTP 프로토콜의 약점을 보완하기 위해서 사용된다. HTTP 프로토콜은 요청에 대한 응답이 완료되면 연결이 끊어지기 때문에 상태의 정보가 유지되지 않는다. 고속도로에서 하이패스를 이용해봤다면 얘기가 조금 쉽다. 하이패스 카드가 있으면 알아서 인식하고 결제가 되므로 별도의 동작 없이 지나가면 되지만 없으면 멈춰서 지갑을 꺼내 맞는 금액을 직접 지불해야하는 동작이 필요하다. HTTP 요청은 후자를 말한다. 톨게이트를 만날 때마다 멈춰서 일련의 동작을 해야한다. 쿠키와 세션은 하이패스 카드와 비슷하다. 뺏기면 안되기 때문에 보안 또한 더욱 중요하다. 쿠키(Cookie) 쿠키는 클라이언트에 저장되며 키와 값이 들어있는 작은 데이터 파일 유효 기간을 명시할 수 있으며, 유효 기간 내에서는 사용이 ..

어트리뷰트(attribute)는 HTML의 속성으로 Element의 id, class, type 등의 추가적인 정보를 일컫는다. 프로퍼티(property)는 DOM의 속성으로 html의 어트리뷰트를 부르는 이름이다. 즉, 같은 속성을 불러오는 이름만 다른 것. // 여기서 class와 color는 attribute document.querySelector(".box").className; // box document.querySelector(".box").style.color; // #000 // 여기서 className과 style.color는 Property 자바스크립트를 통해 DOM의 프로퍼티 속성으로 HTML의 어트리뷰트 속성에 접근할 수 있으며 동적으로 값을 변경하는 것이 가능하다.

각 CSR(Client-Side-Rendering)과 SSR(Server-Side-Rendering)으로 웹 애플리케이션을 구축하는 두 가지 주요한 방식. CSR의 특징 1. 클라이언트 중심 렌더링: HTML 및 JavaScript 파일을 클라이언트(브라우저)로 다운로드한 후, 브라우저에서 JavaScript를 사용하여 페이지의 렌더링을 처리한다. 2. 초기 로딩 시간: 페이지 초기 로딩 시간이 느릴 수 있지만 로딩 이후 반응이 빠르기 때문에, 사용자 경험을 향상시킬 수 있다. 3. 빠른 네비게이션: 페이지가 로드된 후, 클라이언트에서 페이지 전환 또는 라우팅이 빠르다, 비동기 요청을 통해 데이터를 가져오는 방식을 사용할 수 있다. 4. SEO 어려움: 검색 엔진 최적화에 어려움이 있을 수 있으며, 추가..

웹 브라우저는 해커가 CSRF(Cross-Site Request Forgery)나 XSS(Cross-Site Scripting) 등을 이용해 개인정보를 탈취하는 상황을 막기 위해 동일 출처 정책 (Same-Origin Policy) 을 통해 다른 출처의 스크립트나 요청이 실행되는 걸 막는다. 출처(Origin) : url의 프로토콜, 호스트, 포트를 합친 것 ( - http://localhost:3000 ) 이 SOP에 의해 서버 요청이 차단될 때 CORS 에러가 발생하는데 사실 에러는 아니고 CORS를 이용하면 다른 출처의 리소스를 가져올 수 있는 해결책이다. 그럼 웹 문서에 모든 출처 정책은 Same-Origin인가?그렇지 않다. HTML태그 중 Cross-Origin을 지원하는 태그가 있다. 의 h..

브라우저에 "www.google.com" 주소를 입력하면 1. 웹 브라우저는 DNS서버에 해당 도메인의 IP주소를 요청하게 된다. 2. DNS 해석기는 해당 요청을 일정 기간 캐싱하여 동일한 요청에 대한 빠른 응답을 대비하기 때문에 (Time to live, TTL) 캐싱된 데이터가 있다면 DNS서버에 요청하지 않고 바로 IP주소를 반환한다. 3. DNS서버로부터 받은 IP주소를 이용하여 HTML, CSS, JS 문서 등을 다운로드 받는다. 4. 브라우저의 렌더링 엔진이 HTML문서를 파싱해 DOM트리를 구축하고 CSS문서를 파싱해 CSSOM트리를 구축한다. 5. DOM트리와 CSSOM트리를 합쳐 렌더 트리를 구축하고 레이아웃을 통해 요소의 위치와 크기를 계산한 후에 페인팅을 통해 브라우저에 나타나게 된..