D.evelop/Web14 URL에 물음표가 왜 붙어요? <form>의 기본 1. 문제 : 동료에게 "이 url에 물음표가 왜 붙어요?"라는 질문을 받았다# 예시http://localhost:3000/login? 해당 결과에 따로 router.push('?')나 query string 처리를 두지 않았기 때문에 ?가 붙는 이유를 알 수 없었다. 예시 { handleLogin() }}> LOGIN const handleLogin = async () => { const data: any = await fetchLogin({ userId, email }); if (data?.status === 200) { localStorage.setItem("accessToken", data?.data?.accessToken); window.location.reload(); //.. 2025. 6. 28. [3] HTML의 렌더링에 대해 궁금했던 것들 - Render Tree Render Tree DOM과 CSSOM 결합 → Render Tree 생성 → Layout (Reflow) → Paint 1. Render Tree는 "화면에 보일 요소만" 포함한다.Render Tree 생성할 때 display: none 요소는 왜 제외될까? (display: none과 visibility: hidden의 차이)DOM에는 문서에 있는 모든 노드가 들어 있지만, 화면에 표시될 필요 없는 요소까지 그릴 필요는 없다.1) display: none = "아예 화면에 렌더링하지 마!" 그러므로 Render Tree 만들 때 아예 제외된다. 완전히 숨겨지는 것이기에 존재하지도 않는다. 2) visibility: hidden = 존재는 하되 "보이지 않게"만 해줘그래서 Render Tree에.. 2025. 5. 25. [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. 이전 1 2 다음
