본문 바로가기
728x90
반응형

IT/JavaScript와 Framework109

for, for...in, for...of 비교 console.clear(); const animals = ['cat', 'dog','sheep', 'hippo', 'tiger', 'pig']; console.log('----------for'); for(let i = 0; i 2023. 12. 8.
DOM (Document Object Model) DOM 웹의 문서와 웹의 태그와 관련된 객체를 의미 태그와 노드는 거의 같은 개념 HTML 요소들의 구조화된 표현 DOM 객체구조는 "노드 트리"라고 표현 텍스트 노드 1. 제일 먼저 생성하고자 하는 엘리먼트 요소를 생성(즉, 태그를 생성) --> createElement() 2. 원하는 텍스트를 변수에 저장 --> createTextNode() 3. 해당 객체에 붙여준다 --> appendChild() // 테스트시 개발자 도구-> Elements 에서 확인해야 추가된 태그가 보인다. 2023. 12. 6.
AJAX Cross Domain 문제 AJAX 비동기 통신을 할 때, 도메인이 서로 다른 경우 호출이 안되는 문제 발생 ==> 서로 다른 도메인 사이에는 데이터를 주고 받을 수 없다. WHY? JS 보안정책 중에 하나 => Same-Origin Policy 정책 위반 예) www.aaa.com VS www.bbb.com --> 도메인이 다른 경우 aa.testserver.com vs bb.testserver.com --> 도메인은 같고,호스트가 다른경우 방법 (정석이 아님) 1. 서버 설정을 바꿔주는게 가장 좋음 2. 프락시 서버를 이용하는 방법 3. JSONP 를 이용하는 방법 -> 비표준 -> 태그 사용 -> GET 방식이라 넘기는 파라미터 값들이 너무 많다면 권장되지 않음 4. 헤더(Header) 를 변경하는 방법 IIS 에서 설정법 .. 2023. 12. 1.
Fetch API 개념 ES6의 비동기 통신 처리 방법 AJAX와 같은 비동기 통신 처리를 보다 손쉽게 사용할 수 있도록 도와주는 API AJAX관련 라이브러리들은 - XMLHttpRequest - jQuery, Fetch API, Axios 라이브러리 등등 구식 브라우저는 지원안함 (폴리필을 임포트하여 사용하면 가능) fetch(url, [options]) - options 를 생략하면 GET 방식으로 전송 요청을 진행 - Promise 객체가 반환됨 response.text() : 응답이 텍스트 response.json() : 응답이 JSON fetch API 개발을 하려면, 서버 환경이 꼭 필요함. - APM 패키지 같은 솔루션을 사용함. 2023. 11. 23.
728x90
반응형