전체 글338 [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. [Node.js] npm install vs npm ci 차이점 npm(Node Package Manager)이란? 프로젝트에 필요한 라이브러리를 다운로드 또는 관리 할 수 있도록 해주는 프로그램이다. 일반적으로 npm을 사용하게 되면(npm init 시) package.json 파일을 프로젝트 폴더 바로 아래에서 생성하여 모듈과 해당 모듈의 버전을 관리한다. 요즘 CLI를 통해서 프로젝트를 생성하게 되면 기본적으로 함께 포함되어 있다. 또는 그렇지 않은 경우 npm init을 통해 기본 세팅이 가능하다. npm install이란? npm install [ ...] npm install, 또는 npm i는 종속성을 설치하는데 사용된다. 모든 종속성을 설치한다. 종속성 버전을 지정할 때 ^ 또는 ~를 사용하는 경우 npm이 지정한 버전과 동일한 버전을 설치하지 못할 수.. 2022. 8. 9. [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. 이전 1 2 3 4 5 6 ··· 57 다음 반응형