D.evelop/Web12 [2] HTML의 렌더링에 대해 궁금했던 것들 - HTML Parsing 파싱 Parsing 과정HTML 파싱 : 받은 텍스트(string)를 해석해서 브라우저가 이해할 수 있는 노드(node) 단위로 변환하는 것 HTML 파서(Parser) 작동HTML스트림을 받으면 브라우저는 HTML parser를 실행한다.스트림으로 받은 텍스트를 토큰(token) 으로 쪼갠 뒤토큰을 노드(node)로 바꿔서 트리(Tree) 구조를 만듦 1. Tokenizing (토크나이징)스트링을 읽으면서 문법 단위(Token)로 나누는 것HTML파서에는 State Machine(상태 기계)가 있다.상태(state)를 바꿔가면서 1글자씩 문자(character)를 읽고, 토큰(token)을 만든다Hello ⭢ 시작 태그 토큰 (start tag token)Hello ⭢ 텍스트 토큰 (text toke.. 2025. 4. 27. [1] HTML의 렌더링에 대해 궁금했던 것들 - stream 서버에 요청 후 데이터를 수신(HTTP Response)받으면 HTML문서가 전달된다.HTML문서는 텍스트(string)형태헤더의 Content-Type: text/html 를 만나면브라우저 : "아, 이건 HTML이구나!"하고 인식 이때 HTML은 네트워크를 통해 stream(스트림) 형식으로 조금씩 도착된다. 완전히 다 받은 다음 처리❌도착하는 대로 조금씩 읽고 파싱을 시작⭕️ ※ 스트림(stream) : 조각조각 나누어 실시간으로 받아오는 데이터 흐름1. 스트림은 어떤 기준으로 쪼개지는가?복합적인 요인.서버 전송 방식네트워크가 전달할 수 있는 패킷 단위브라우저의 버퍼에 얼마가 쌓이면 읽을래?즉, 문서 용량이 크면 더 많이 쪼개지고, 네트워크 품질도 영향 준다. 1) 서버 전송 방식서버가 HTML을 .. 2025. 4. 26. [NFT] 기본 개념 https://dive.hyundaicard.com/web/content/contentView.hdc?firstBanner=Y&deviceApp=Y&contentId=4594&fbclid=PAAabtvuWC21yYmXqY5r0yENNKq8MRfMTtd5F2kRuio3xQ40uJjQcW6w3NURs_aem_AW2E7rHoXoGk3tQwd5YImYpA4LFreca7YKn0mQ8ua0XKdOuYSR3yWY8A_Pea9jvESYtOjhNfWedq12U857rbJuETyfumNoNnzvxnpEycEGzX39iYa96MLTLWSQP75nd-M-I NFT 용어 백서 세상 쉬운 NFT 입문서, #3 용어편 dive.hyundaicard.com https://dive.hyundaicard.com/web/content/c.. 2022. 5. 26. [Chrome 개발자 도구] 네트워크 패널 DevTools - Network 구글 크롬 개발자도구 Chrome DevTools Network panel ::용도 리소스가 예상대로 다운로드 또는 업로드되고 있는지 확인해야 하는 경우 리소스가 실제로 업로드되거나 다운로드되고 있는지 확인합니다. HTTP 헤더, 콘텐츠, 크기 등과 같은 개별 리소스의 속성을 검사합니다. 네트워크 요청시 보여지는 내용들 [자료] Developers Chrome https://developer.chrome.com/docs/devtools/network/ 인프런 강의 "Vue.js 시작하기 - Age of Vue.js" https://www.inflearn.com/course/age-of-vuejs 캡틴 판교 - 프런트엔드 개발자가 알아야하는 HTTP 프로토콜 Part 1 https://joshua1988... 2022. 3. 16. 인증Authentication/인가Authorization 📍 인증Authentication : 내가 누구인지! 비밀번호 관리 DB에 저장 시 개인정보를 해싱(암호화)하여 복원할 수 없도록 함. 예:난독화 통신 시 개인 정보를 주고 받을 때 SSL을 적용하여 암호화(HTTPS 주소창 앞에 자물쇠) 암호화는 어떻게 하나? 단방향 해쉬 hash함수는 자료구조에서 빠른 자료의 검색, 데이터 위변조 체크를 위해 쓰임 복원 불가능 단방향 해쉬함수는 암호학적 용도로 사용 MD5, SHA-1 : 보안 취약, SHA-256등이 있음 결과만 보면 당장 식별이 불가능한 값같아 보이지만 하지만 같은 알고리즘으로 '1234'를 해싱하면 같은 값이 나옴 단점 input이 똑같을 때, output도 똑같음 > 보안 취약 SALTIING & Keystretching Salting : 입력.. 2021. 12. 20. [WEB] 웹 저장소 - 쿠키/로컬스토리지/세션스토리지 🍪 Cookie 배경 http의 특성인 '비연결성', '무상태성'으로 인해, 요청과 응답이 완료되면 연결을 끊음. → 한 사이트에 여러번 방문해도 새로 방문한 것이 됨. 이에 Netscape사이트 방문자가 이미 사이트를 방문했는지 판단하기 위해 사용하기 시작. Unix 프로그래밍에서 사용하던 매직쿠키(프로그램이 수신한 뒤, 변경하지 않고 보내는 데이터 패킷)에서 유래. 최대 4KB까지 저장 서버 데이터를 공유하는 용도 : 서버 요청을 할 때마다 자동으로 실려서 따라옴 SSR에서 더욱 중요! SSR 시점에 localStorage의 값을 알 방법이 없음. But!! 쿠키데이터는 알 수 있음. → 서버에서 html를 렌더링 할 때, 더욱 많은 정보를 담을 수 있음 → 로딩시간 단축 HTTP요청시 Headers.. 2021. 12. 20. [WEB] 웹 렌더링 SSG, SSR, CRS 이란? SSG (Static-Site Generation) 빌드 타임에 js를 변환하여 html을 미리 만들어 둠 > 요청이 들어오면 이미 완성된 html을 반환 빠름 단점 정적 파일로 제공되기 때문에 현재의 사용자 수준에 상응하는 웹 서비스를 제공하기 어려움. SSR(Server-Side Rendering) 전통적인 렌더링 방식 페이지를 새로고침 > 서버에 요청이 들어오면 html로 바로 만들어서 응답 SEO에 유리함 단점 페이지 이동 시 화면 깜박임 새로운 파일을 받아 다시 로드하므로, 클라이언트에서 메모리에 데이터를 유지할 수 없음 CSR(Client-Side Rendering) SPA 처음 웹사이트 진입 시, 비어 있는 html 응답 > 클라이언트 브라우저에서 어플리케이션 렌더링 진행 초기 로드 이후, .. 2021. 12. 13. HTTP(HyperText Transfer Protocol)이란? HyperText 문서와 문서가 링크로 연결되어 있음 Transfer 전송하다. "HTML로 만든 웹 페이지 문서(파일)를 보낸다" Protocol 컴퓨터 간 어떻게 HTML 파일을 주고 받을 지에 대한 소통 방식 또는 약속 즉, HTTP는 'hyper text문서를 어떻게 주고 받을지 정해둔 약속' 특징 1. 요청 / 응답 (Request / Response ) PC 간의 소통은 메세지 형식으로 이루어진다. 서로 다른 PC가 서버에 Request하면, 서버는 Response하며 PC간의 정보와 상태를 공유해 줌. 2. Stateless state상태 + less 없음 HTTP 개별 통신은 모두 독립적임 과거의 HTTP 통신 결과(state)를 보존하지 않음 매 통신 마다 사전에 필요한 모든 정보를 담아.. 2021. 9. 25. 이전 1 2 다음
