![]()
1. 브라우저가 URL을 해석/파싱한다. 주소창에 www.naver.com을 입력하고 엔터를 누른다 - https : 프로토콜 - www.naver.com : Domain Name - 443 : Port 어떤 프로토콜을 사용할 것인지, 어떤 URL로 서버에 요청을 보낼 것인지, 어떤 포트번호로 요청할 것인지 해석하는 과정이 이루어 진다. 2. URL이 문법에 맞으면 Punycode encoding을 URL의 HOST 부분에 적용한다. 3. HSTS(HTTP Strict Transport Security)목록을 로드해서 확인한다. http 연결을 거쳐서 https로 전환되는 과정은 쿠키 탈취 등 보안상 안전하지 못하기때문에, https 를 클라이언트에게 강제하도록 하기위해 HSTS를 사용한다. 브라우저는 ..
![]()
브라우저의 기본 구조 1. 사용자 인터페이스 (UI) 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분 2. 브라우저 엔진 사용자 인터페이스(UI)와 렌더링 엔진을 연결함 사용자가 UI 주소표시줄에 URI를 입력하면, URI를 전달받은 브라우저 엔진이 자료 저장소에서 해당 URI에 알맞는 자료를 찾는다. 그리고 해당 자료들을 렌더링 엔진에 전달한다. 만일 자료 저장소에 저장된 자료들이 없다면, 브라우저 엔진은 URI값만 렌더링 엔진에 전달한다. 3. 렌더링 엔진 브라우저 엔진으로부터 전달받은 HTML과 CSS를 파싱하여 요청한 웹페이지를 표시한다. 4. 통신 HTTP요청과 같은 네트워크 요청을 수행함. 서버에서 받은 URI에 해당하는 응답 데이터를 렌..
처음에 적용한 방법 {props.data?.fetchUseditems.map((product, i) => ( {product.images[0] ? ( ) : product.images[1] ? ( ) : product.images[2] ? ( ) : ( . . find함수를 새까맣게 잊어버리고 있었다....🫠 개선 find 함수를 사용하여 제품 이미지 배열에서 truthy 한 값을 찾아 URL 구성에 사용한다. {props.data?.fetchUseditems.map((product, i) => ( {product.images.length ? ( img )}`} /> ) : ( . . https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Glob..
게시글 수정 페이지에서 reactQuill에 게시글 수정 전에 입력한 값을 받아오려고 했다. 기존 코드 import dynamic from "next/dynamic" import "react-quill/dist/quill.snow.css" const ReactQuill = dynamic(async () => await import("react-quill"), { ssr: false, }) export default function BoardWriteUI(props: IBoardWriteUIProps) { const QuillRef = useRef() let quill = QuillRef.current?.getEditor() } reactquill ref.getEditor is not a function ..
