FrontEnd92 [React.js] https에서 http API request 호출하기 ISSUE Mixed Content: The page at ... was loaded over HTTPS, but requested an insecure script 'http://..' https 웹사이트에서 http request를 시도하면 위와 같은 에러 구문이 발생한다. 해당 에러는 https 환경에서만 발생하는 에러라서 dev 환경에서는 문제없이 잘 동작하지만, 배포 직후 에러가 발생해 당황스러울 수 있다. 위 에러는 git-pages로 정적 파일을 호스팅했을 때 발생한 에러이다. dev 환경에서는 http에서 http를 호출하기 때문에 에러가 발생하지 않지만, git-pages로 배포를 하면 호스팅 주소가 자신의 git repogitory 주소가 되기 때문에 자동으로 https로 배포가 되므로.. 2023. 2. 16. [JavaScript] reduce를 사용하여 순차적으로 프로미스 실행시키기 Promise.all() Promise.all()은 여러 개의 비동기 작업을 병렬(순서를 보장하지 않음)로 실행시키는 경우 사용된다. 여러 개를 동시에 실행하고 가장 마지막 작업이 완료될 때 완료 상태의 프로미스를 반환한다. const myPromises = [ new Promise((resolve) => setTimeout(() => {resolve('A (slow)'); console.log('A (slow)')}, 1000)), new Promise((resolve) => setTimeout(() => {resolve('B (slower)'); console.log('B (slower)')}, 2000)), new Promise((resolve) => setTimeout(() => {resolve(.. 2023. 1. 28. [Vue.js] SPA로 동작하는 Vue에서 DOMContentLoaded SPA 환경에서의 DOMContentLoaded 동작 SPA 환경에서는 아래와 같은 DOMContentLoaded 시점에 IntersectionObserver를 추가해주는 로직을 적용하는 과정이 의도한 것과 같이 동작하지 않는다. document.addEventListener("DOMContentLoaded", function() { var lazyImages = [].slice.call(document.querySelectorAll("img.lazy")); if ("IntersectionObserver" in window) { let lazyImageObserver = new IntersectionObserver(function(entries, observer) { entries.forEach(func.. 2022. 11. 7. [css] 모바일 환경(터치 스크린)에서의 hover 이슈 스마트폰과 태블릿과 같은 터치 디바이스에서는 PC와 다르게 hover가 적용되지 않는다. 따라서, 반응형 작업을 하다보면 등록되어 있는 hover css로 인해 여러가지 사이드 이펙트가 일어날 수 있다. 예를 들어, 태블릿의 가로모드는 PC뷰 세로모드는 모바일뷰를 가지는 서비스가 있다고 할 때 가로모드에서 hover 이벤트를 발생 시키고 세로모드에서 동작 후 가로모드로 돌아오면 hover 이벤트가 살아있다거나.. 터치 시에 동작하는 이벤트 순서는 아래와 같다. touchstart - touchend - mouseover - mousemove - mousedown - mouseup - click 마우스가 존재하지는 않지만, 내부적으로는 터치 이벤트 뿐만 아니라 마우스 이벤트도 함께 발생한다. 터치 인터페이.. 2022. 9. 20. [Vue.js] v-html 대체하기 v-html이란? v-text(이중 중괄호, mustaches) 디렉티브는 HTML이 아닌 일반 텍스트로 데이터를 해석한다. 따라서 아래 코드는 그대로 텍스트로 보여지게 된다. Using mustaches: {{ rawHtml }} Using mustachs: This should be red. v-html을 사용하면 태그가 포함된 문자열을 HTML로 출력해줄 수 있다. Using v-html directive: Using v-html directive: This should be red. v-html의 문제점 웹사이트에서 임의의 HTML을 동적으로 렌더링하면 XSS취약점으로 쉽게 이어질 수 있다. 따라서 신뢰할 수 있는 콘텐츠에서만 HTML 보간을 사용하고 사용자가 제공한 콘텐츠(유저로부터 입력받는 부.. 2022. 8. 6. [React.js] Warning: Expected server HTML to contain a matching <div> in <div>. 문제 상황 export default function ExComponent() { const items = window.localStorage.getItem('items'); return ... } Next.js에서 SSR(Server Side Rendering)을 사용한다면 위와 같은 코드 이용 시 아래와 같은 오류가 발생할 수 있다. Warning: Expected server HTML to contain a matching in . 해결 방법 첫 번째 렌더링이 서버의 초기 렌더와 일치해야하기 때문에, 브라우저에서만 실행되어야하는 코드는 useEffect 코드 내부에서 실행되어야 한다. window 객체는 클라이언트 측에서 브라우저의 요소들과 자바스크립트 엔진들을 담고 있는 객체이기 때문에 useEf.. 2022. 7. 16. 이전 1 2 3 4 5 ··· 16 다음 반응형
