D.evelop/Web15 비밀번호 맞는데 로그인이 안 된다? - 쉽게 찾기 힘든 원인 비밀번호 맞는데 로그인이 안 된다?혹시 이런 상황인가요?"어제까지 잘 됐는데, 오늘 갑자기 로그인이 안 된다.""비밀번호 분명히 맞게 입력했는데 계속 실패한다.""비밀번호를 재설정했는데, 새 비밀번호로도 안 된다." "다른 브라우저에서는 되는데, 크롬에서만 안 된다.""비밀번호 입력칸을 클릭하면 자동으로 뭔가 채워지는데, 그게 옛날 비밀번호인 것 같다."이 중 하나라도 해당된다면, 당신의 비밀번호가 틀린 게 아닙니다.브라우저가 옛날 비밀번호를 몰래 넣고 있는 겁니다.그리고 만약 당신이 이 서비스를 만든 개발자라면, 이건 사용자 잘못이 아니라 코드에 빠진 한 줄 때문입니다.왜 이런 일이 생기는가크롬(Chrome), 사파리(Safari), 엣지(Edge) 같은 브라우저에는 비밀번호 관리자가 내장되어 있다.로.. 2026. 4. 10. 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. 이전 1 2 다음
