도리쓰에러쓰

1. 크로스 브라우징이란? 웹 페이지 제작 시 모든 브라우저에서 깨지지 않고 의도한 대로 나오게 하는 작업을 말한다. 크로스 브라우징을 고려하지 않으면 HTML, CSS, JS 등 코드가 원하는대로 작동이 안될 수 있다. 이러한 이유로 브라우저마다 렌더링 엔진이 다르기 때문에 전부 정상적으로 작동하도록 설정해줘야 한다. 💡 렌더링 엔진: 페이지를 렌더할 때 실질적으로 페이지를 작업해주는 브라우저의 엔진 (웹킷, 프레스토 등등) 2. 크로스 브라우징 사전 대응 방법 우선 가장 높은 점유율을 가지고 있는 브라우저를 알고 있는게 중요하다. 🔽 아래 사이트를 참고하여 사람들이 주로 사용하는 브라우저가 어떤게 있는지 알아본 후 그 브라우저를 타겟으로 잡아 대응해야한다. Statcounter Global Stats..

1. 이벤트 버블링 (Event Bubbling) 이벤트 버블링 (Event Bubbling)이란 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상이다. 아래 버블링 예제 코드를 보자. ... 내용1 내용2 내용3 ... // js 코드 const divs = document.querySelectorAll('div'); const clickEvent = (e) => {console.log(e.currentTarget.value)}; divs.forEach((div) => {div.addEventListener('click', clickEvent)}); 위 예제는 div를 클릭하면 해당 div의 value가 콘솔로 출력된다..

1. CORS란? CORS는 SOP(Same-Origin Policy; 동일 출처 정책)를 위한 에러이다. 💡 SOP(Same-Origin Policy; 동일 출처 정책) - 출처가 동일한 프로토콜, 포트번호, 도메인에서만 자원을 사용 가능하도록 하는 보안정책 아래 사진처럼 CORS 에러는 요청 브라우저에서 다른 도메인(프로토콜, 포트번호)을 가진 서버로 요청할 때 브라우저에서 발생하는 보안정책이다. 즉, 요청한 출처와 API의 서버 출처가 다르기 때문에 브라우저에서 CORS 에러가 생기는 것이다. ❓ 출처가 다른 경우는 어떤 경우일까 1️⃣ 프로토콜이 다른 경우 (http ▶ https는 가능하지만 반대의 경우엔 에러 발생) 2️⃣ 도메인이 다른 경우 (www.google.com ▶ www.naver...

밑줄 친 단어는 Dictionary를 확인하세요 ! 💡 Dictionary 1. DNS(Domain Name System) - 웹사이트의 IP 주소와 URL을 연결해주는 시스템 - 사용자가 외우기 힘든 IP 주소 대신 URL로 쉽게 사이트 주소를 찾을 수 있도록 도와준다. - 인터넷 전화번호부와 같다. 2. DNS(Domain Name Server) 서버 - 할당된 도메인 영역에 대한 정보를 가지고 있는 서버 - 주로 도메인을 IP 주소로 변환한다. 3. DNS 리커서(DNS Recursor) - 인터넷의 다른 DNS 서버에 답변을 요청하여 의도된 도메인 이름의 적절한 IP 주소를 찾는 일을 한다. 4. DNS 룩업(Lookup) - DNS 서버에서 인터넷 도메인 이름을 사용해 IP주소를 알아내는 과정 ..

1. 브라우저란? 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램 브라우저는 유저가 선택한 자원을 서버로부터 받아와 유저에게 보여준다. 이 자원은 페이지 외에도 이미지, 비디오 등의 컨텐츠들도 포함된다. 받아온 자원들은 렌더링 과정을 통해 유저에게 보여준다. 2. 브라우저 렌더링 과정 1️⃣ Parsing단계 :: HTML 파일과 CSS 파일을 파싱하여 각각 Tree를 만든다. - HTML 파일을 해석하여 DOM(Document Object Model) Tree를 구성 - 파싱 중 HTML에 CSS가 포함되어 있다면 CSSOM(CSS Object Model) Tree 구성 작업도 함께 진행 2️⃣ Style단계 :: 두 Tree를 결합하여 Ren..