채니의 개발일기

Access-Control-Allow-Origin: * 모든 출처에서의 요청을 허용한다는 것을 의미. 즉, 어떤 웹 사이트에서든 해당 서버의 리소스에 접근할 수 있다. Ajax 사용을 허용하는지 확인하려면: 개발자 도구 사용: 1. 웹 브라우저에서 개발자 도구를 열고 (대부분의 브라우저에서 F12 키 또는 Ctrl+Shift+I로 열 수 있습니다) 'Network' 탭으로 이동 2. 해당 API 또는 리소스에 요청을 보냅니다. 3. 'Network' 탭에서 해당 요청을 선택하고, 응답 헤더를 확인한다. Access-Control-Allow-Origin 헤더의 값을 확인한다 2. 코드를 사용하여 확인: 1. JavaScript의 XMLHttpRequest 또는 fetch API를 사용하여 해당 리소스에 요..

XMLHttpRequst - XMLHttpRequest객체는 웹 브라우저의 API 중 하나로, 웹페이지가 서버와 비동기적으로 데이터를 교환할 수 있게 해주는 핵심객체이다. - 이 객체를 사용하면 페이지 전체를 새로고침하지 않고도 서버로부터 데이터를 받아올 수 있다. - 사용자 경험이 향상되며, 애플리케이션의 반응성이 높아진다. 기본사용방법 : "XMLHttpRequst'객체를 생성하는 방법에는 여러가지 방법에는 웹브라우저의 종류에 따라 다를 수 있다. 1. XMLHttpRequset 객체 생성 이용 방법 : 대부분의 현대 웹 브라우저에서는 'XMLHttpRequset'객체를 내장하고 있다. 생성방법은 다으과 같다. var xhr = new XMLHttpRequest(); 2. ActiveXobject 객..

DOM API ** DOM이란? 웹페이지 구조를 표현하는 프로그래밍 인터페이스 DOM은 웹페이지의 모든 요소를 객체로 표현하며, 이 객체들은 프로퍼티와 메서드를 가지고 있어 웹페이지의 내용,구조, 스타일 등을 동적으로 변경 할 수 있다. : Ajax 를 이용하여 웹페이지의 일부만을 갱신하려면 더욱 다양한 DOM 속성을 활용해야한다. 따라서, DOM과 관련된 다양한 API를 이용하여 노드를 동적으로 생성하고, 조작할 수 있어야 한다. 노드의 추가 : 웹페이지의 DOM 구조를 동적으로 변경하기 위해 노드를 추가하는 것은 자주 사용되는 작업 중 하나 1. appendChild() : appendChild() 메소드는 새로운 노드를 해당 노드의 자식 노드 리스트의 맨 마지막에 추가한다. 만약 추가하려는 노드가 ..

노드 - DOM에서 노드(Node)는 웹 문서의 구조를 이루는 개별적인 단위를 의미함 - 웹 문서는 여러 종류의 노드들로 구성되어 있으며, 이러한 노드들은 트리 구조로 서로 연결되어 있다. 노드 트리 (node tree) - 주요 노드 유형 1. 문서노드(Document Node) : DOM 트리의 최상위 노드로, 전체 문서를 대표한다. 2. 요소노드 (Element Node) : HTML 태그를 대표하는 노드로, 대부분의 DOM 조작 작업이 이 노드와 완련 있다. 3. 속성노드 (Attribute Node) : 요소의 속성(ex id, class, href 등)을 대표하는 노드 4. 텍스트 노드(Text Node) : HTML 태그 내의 텍스트르 대표하는 노드로, 실제 텍스트 내용 포함 5. 주석노드(..

DOM(문서객체모델) : 웹 문서의 구조를 표현하는 프로그래밍 인터페이스로, 웹 문소를 트리구조로 표현하며, 각 노드는 문서의 각 부분(요소,속성, 텍스트 등)을 나타낸다. : DOM을 사용하면 프로그래밍 언어(주로 자바스크립트)를 통해 웹 문서의 구조, 스타일, 내용 등을 동적으로 조작하고 변경 할 수 있다. : 이는 웹페이작 사용자의 상호작용에 반응하거나, 데이터를 동적으로 로드하고 표하는 등의 동작을 가능하게 한다. 다음과 같은 HTML문서가 있다고 가정해보자. Welcome to My Website This is a paragraph. 위 문서의 DOM트리 구조는 다음과 같다. Document |-- DOCTYPE: html |-- Element: html |-- Element: head | |-..

Ajax는 웹페이지에서 서버와 비동기적으로 통신하여 페이지를 새로고침하지 않고도 데이터를 갱신할 수 있게 해주는 기술이다. 주요구성요소 1. HTML,CSS : 웹페이지의 구조와 디자인을 정의한다. (HTML은 웹페이지의 콘텐츠와 구조, CSS는 페이지의 스타일과 레이아웃을 정의) 2. DOM(Document Object Model)모델 : 웹 페이지의 구조와 내용을 프로그래밍적으로 조작하고 접근할 수 있게 해주는 인터페이스. 자바스크립트를 통해 DOM을 조작하여 웹페이즈이 내용을 동적으로 변경할 수 있게한다. 3. JSON과 XML: 데이터의 교환형식. 웹 서버와 클라이언트 간에 데이터를 주고받을 때 사용되는 표준 포맷이다. JSON은 JavaScrip Object Notaition의 약자로, 데이터의..