전체 글340 [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. [Github] 파일/폴더명의 대소문자를 구분하지 않는 문제 ISSUE Github 연동이 되어있는 프로젝트에서 파일명이나 폴더명의 대소문자를 수정하는 경우가 있다. (예를 들어 컴포넌트 이름을 header.vue -> Header.vue로 수정하는 경우) 이때 git status를 확인해보면 대소문자 변경이 제대로 적용되지 않은 것을 확인 할 수 있는데, 해결방법은 아래와 같이 두 가지가 있다. 해결방법 gif mv 이용 : 파일의 경우 git mv yOuRfIlEnAmE yourfilename or git mv -f yOuRfIlEnAmE yourfilename git 2.0.1 이하의 버전에서는 -f 플래그가 필요하다. git config 변경 git에는 대소문자를 구분할지 구분하지 않는 파일 시스템을 예상할지 여부를 알려주는 구성 설정이 있다. 파일이 아닌.. 2022. 12. 10. [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. [Node.js] npm version warning Warning 메세지 npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I'll try to do my best with it! 원인 npm 7 미만의 환경에서 npm 7 이상에서 만들어진 package-lock.json 파일 기반으로 패키지 다운받으려 할 때 발생하는 경고 메시지이다. npm 7 부터는 package-lock.json의 버전이 2로 바뀌었기 때문이다. package-lock.json이란? npm을 사용해서 node_modules 트리나 package.json 파일을 수정하게 되면 자동으.. 2022. 9. 18. 이전 1 2 3 4 5 6 ··· 57 다음 반응형
