본문 바로가기

Front-end/Javascript5

eval()과 CSP Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script는 브라우저의 Content Security Policy (CSP) 설정으로 인해 발생하는 문제입니다. CSP는 웹 페이지의 스크립트 실행을 제한하여 보안을 강화합니다. eval()과 같은 위험한 방식이 사용되지 않도록 차단하는 역할을 하죠. 1. eval()은 왜 위험하다는 걸까? eval()은 문자열을 Javascript 코드로 해석해 실행합니다.eval("alert('hello')"); new Function()은 동적으로 함수를 생성하는 방법입니다. let func = new Functi.. 2024. 9. 10.

History API를 이용한 시간 여행 우리는 이렇게 생긴 뒤로 가기, 앞으로 가기 버튼을 이용해 30분 전에 봤던 페이지로 돌아갈 수도 있고 가장 최근에 본 페이지로 다시 이동할 수도 있습니다. 이것이 가능한 이유는 어딘가에 기록들이 저장되어 있기 때문입니다.사용자가 어떤 페이지를 방문할 때마다 브라우저의 세션 히스토리 스택에는 페이지에 대한 기록이 쌓입니다.하나의 페이지에 대한 정보는 하나의 엔트리에 저장되며, 엔트리는 state와 url 정보를 가지고 있습니다.History API는 세션 히스토리에 접근하여 엔트리를 조작할 수 있는 기능을 제공합니다. history 전역 객체를 통해 다음과 같은 메서드들을 사용할 수 있습니다. 1. history.back()뒤로 가기 2. history.forward()앞으로 가기 3. history.g.. 2024. 5. 16.

AJAX를 왜 사용하는가 AJAX란 무엇인가 AJAX(Asynchronous Javascript And XML)는 비동기 자바스크립트 그리고 XML이란 뜻을 가지고 있으며 XMLHttpRequest라는 객체를 이용해서 서버와 통신하는 방법을 말합니다. 웹 화면단에서 서버와 통신하는 전통적인 방법은 폼 태그 를 사용하는 것입니다. 그런데 폼을 제출 할 때에는 페이지 전체의 새로고침이 발생하게 됩니다. 회원가입이나 로그인, 게시글 작성과 같은 일회성 이벤트는 폼으로도 충분하지만, 현재 페이지의 상태를 유지하면서 수시로 서버와 데이터를 주고 받아야하는 경우 한계에 부딪힐 수 있습니다. 현대의 웹에서 가장 중요한 키워드가 '동적인 페이지'와 'UX'라는 점을 고려하면 비동기 통신은 선택이 아닌 필수라고 할 수 있습니다. 이런 요구에 부.. 2023. 5. 8.

Javascript - DOM (Document Object Model) DOM 은 html 문서를 트리형태로 구조화한 인터페이스입니다. DOM 을 이용하면 javascript에서 html 문서에 접근하고 탐색 및 조작을 할 수 있습니다. 1. 탐색 Welcome paragraph item1 item2 위와 같은 html 문서에서 각 요소들을 선택하기 위해서 document의 메서드인 getElementByid() 또는 querySelector()를 이용할 수 있습니다. 이 메서드들은 주어진 조건에 해당되는 element를 반환합니다. //id가 hd인 요소 var heading = document.getElementById("hd"); //class가 pr인 요소 var paragraph = document.querySelector(".pr"); //li 중 2번째 자식 v.. 2021. 12. 8.

Javascript - JSON 데이터 조작하기. (배열과 객체) 1. JSON (JavaScript Object Notation) 이란 JSON의 키-값의 쌍으로 구성된 문자열 형태의 데이터 포맷입니다. 웹이 동작하기 위해서는 클라이언트와 서버 간의 끊임없는 데이터 전송이 필요합니다. 이때 정보를 담아서 주고받을 수 있는 형식 중 하나가 JSON입니다. 아래는 id, name, phone, type, childnode 라는 속성과 그에 대응되는 값으로 구성된 json tree의 예시입니다. var data = [{ "id": 1, "name": "Yong", "phone": "010-0000-0000", "type": "sk", "childnode": [{ "id": 11, "name": "echo", "phone": "010-0000-1111", "type": "k.. 2021. 11. 28.

이전 1 다음

티스토리툴바