반응형 Front-end16 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. a href="javascript:" vs a onclick="" vs ... 는 버튼이 될 수 있다. 는 앵커 Anchor라고 부르며, 다른 사이트로 이동할 수 있는 링크를 걸어줄 때 주로 사용하는 태그입니다.href 속성에는 이동할 링크 주소를 넣을 수 있고 태그 안에는 화면에 보여질 텍스트를 넣을 수 있습니다.누르시오누르시오파란 글씨와 밑줄이 앵커의 트레이드 마크라고 할 수 있지만 조금 촌스럽게 느껴지다 보니 최근에는 밑줄을 없애거나 색을 바꾸기도 합니다. 제가 사용하는 티스토리 테마에서도 앵커가 조금 다르게 표현이 되고 있는 것 같습니다.HTML 태그 중에 이 있지만 아무래도 스타일을 바꾸는 데 앵커가 더 편한 점이 있어서 앵커를 버튼으로 활용하는 경우가 많습니다.앵커를 버튼으로 사용하려면 단순한 다른 페이지로의 이동 외에 다양한 기능을 수행할 수 있어야 합니다.즉, cl.. 2024. 7. 4. History API를 이용한 시간 여행 우리는 이렇게 생긴 뒤로 가기, 앞으로 가기 버튼을 이용해 30분 전에 봤던 페이지로 돌아갈 수도 있고 가장 최근에 본 페이지로 다시 이동할 수도 있습니다. 이것이 가능한 이유는 어딘가에 기록들이 저장되어 있기 때문입니다.사용자가 어떤 페이지를 방문할 때마다 브라우저의 세션 히스토리 스택에는 페이지에 대한 기록이 쌓입니다.하나의 페이지에 대한 정보는 하나의 엔트리에 저장되며, 엔트리는 state와 url 정보를 가지고 있습니다.History API는 세션 히스토리에 접근하여 엔트리를 조작할 수 있는 기능을 제공합니다. history 전역 객체를 통해 다음과 같은 메서드들을 사용할 수 있습니다. 1. history.back()뒤로 가기 2. history.forward()앞으로 가기 3. history.g.. 2024. 5. 16. React에서 폼 form을 다루는 방법 1. 참조를 이용하는 방법 useRef() 훅은 컴포넌트 생명주기 동안 사용할 수 있는 ref 객체를 반환해 줍니다. 이 객체는 current 프로퍼티에 렌더링에 필요하지 않은 값을 저장해 두고, 필요할 때마다 참조할 수 있도록 해줍니다. CreateForm.js는 아이디와 패스워드를 저장할 수 있는 ref 객체(loginId, password)를 엘리먼트의 ref 속성에 추가해주고 있습니다. submit 이벤트가 발생하면 ref 객체의 current.value에 있는 값을 id, pw에 각각 저장한 다음 onAccess 함수를 통해서 상위 컴포넌트로 올려 보내고 다시 초기화시켜 줍니다. 만약 입력한 아이디를 유지하고 싶으면 loginId.current.value = ""; 부분을 삭제하면 됩니다. 이 .. 2023. 5. 25. AJAX를 왜 사용하는가 AJAX란 무엇인가 AJAX(Asynchronous Javascript And XML)는 비동기 자바스크립트 그리고 XML이란 뜻을 가지고 있으며 XMLHttpRequest라는 객체를 이용해서 서버와 통신하는 방법을 말합니다. 웹 화면단에서 서버와 통신하는 전통적인 방법은 폼 태그 를 사용하는 것입니다. 그런데 폼을 제출 할 때에는 페이지 전체의 새로고침이 발생하게 됩니다. 회원가입이나 로그인, 게시글 작성과 같은 일회성 이벤트는 폼으로도 충분하지만, 현재 페이지의 상태를 유지하면서 수시로 서버와 데이터를 주고 받아야하는 경우 한계에 부딪힐 수 있습니다. 현대의 웹에서 가장 중요한 키워드가 '동적인 페이지'와 'UX'라는 점을 고려하면 비동기 통신은 선택이 아닌 필수라고 할 수 있습니다. 이런 요구에 부.. 2023. 5. 8. HTML&CSS 작성 치트키, Emmet 에밋 사용법 Emmet은 HTML, CSS 를 간편하게 작성할 수 있도록 도와주는 툴킷입니다. 1. 도구 VSCode에 내장되어 있어 별도의 설치없이 Tab 키만 누르면 사용할 수 있습니다. 인텔리제이 역시 에디터에서 기본적으로 Emmet을 지원하며, 에밋을 작성한 뒤 Tab 키를 누르면 HTML로 변환됩니다. setting > editor > emmet 에서 Tab 대신 다른 키로 변경이 가능합니다. 2. 뼈대 만들기 ! + Tab !를 입력한 뒤 Tab키를 누르면 위와 같은 html 기본 골격과 메타태그를 만들어줍니다. 3. 살 붙이기 아래 HTML은 기본적인 웹 페이지의 구조를 나타낸 것입니다. HTML은 기호도 많이 들어가고 양도 많아 직접 타이핑하는 것이 굉장히 귀찮습니다. 하지만 Emmet을 사용하면 축약.. 2023. 3. 21. 이전 1 2 3 다음 반응형
