본문 바로가기

Issues

[Npm & Vue.js] Error: Cannot find module 'vue-loader-v16/package.json'
상황 vue create하고 npm run serve를 했더니 아래와 같은 오류 발생. Error: Cannot find module 'vue-loader-v16/package.json' 해결 npm uninstall vue-loader-v16 npm i vue-loader-v16 차례대로 삭제했다가 다시 install하고 npm run serve 해보니 정상적으로 작동하였다.
[Git & Vue.js] vue create로 만든 폴더에 바로 git 연결하고 싶을때
vue create 폴더명 cd 폴더 git init git remote add origin 연결할 깃허브주소 git clone하면 폴더가 생성되고 그안에 vue create해도 폴더가 또 생성되어서 매번 옮기거나 폴더가 안에 하나 더 생겼었는데 위 방법으로 하면 폴더에 바로 git 연결이 가능하다. fatal: not a git repository (or any of the parent directories): .git 만약 위 오류가 뜬다면 git init을 다시 실행 후 해보거나 깃허브 주소를 확인하면 된다.
[APP & javascript] ios, Android 앱 마켓 이동하기(+ ios 앱스토어 이동 오류)
이슈 flow (safari) 앱이 있음 > ~앱으로 이동하시겠습니까? confirm 이 뜸 > 2.5초 전 누르면 즉시 앱 실행 (앱으로 이동했기때문에 더이상 js가 타지않아 마켓 실행되지않음) > 2.5초 후 누르면 > 앱 실행 > 마켓으로 이동 (confirm이 뜬 상태라 js는 이미 실행되었어야하는데 막힌상태. confirm닫자마자 js 차례로 실행됨. 앱이 있는데도 마켓으로 실행이 됨) 아래 소스는 기존 소스로 javascript 앱 마켓이동, 앱 다운로드 유도 등으로 인터넷에 치면 자주 보이는 소스이다. ios 같은 경우에는 앱이 있는지 없는지에 대한 callback이 없으므로 유저의 앱의 다운로드 유무에 대해 알수가 없다. 따라서 앱을 실행하고 일정시간 이후에 그 페이지에 계속 남아있다면 앱..
[javascript & HTML5] video tag autoplay + muted 음소거 해제하기 (html video태그)
동영상 full screen + muted + autoplay + loop 로 재생한 후 음소거 클릭이벤트로 컨트롤하기 음소거컨트롤버튼
[javascript & html] input file 첨부파일 n개 이상이면 자르기 (DataTransfer)
문제상황 리뷰 등록하는 페이지에서 이미지 파일은 최대 3개까지 첨부가 가능하다. 따라서 3개 이상 첨부 시, 앞에 3개만 보여줘야 한다. input file의 change 이벤트 안에 files를 찍으니 fileList라는 Object로 들어와서 강제로 수정하려고 하니 수정 불가 예) 첨부: 사진1, 사진2, 사진3, 사진4, 사진5 결과: 사진1, 사진2, 사진3 해결방법 DataTransfer() 로 다시 배열을 재구성하여 this.files에 담아주었다. const maxLength = 3; if (this.files.length > maxLength) { const transfer = new DataTransfer(); Array.from(this.files) //새로 배열 만들 그릇 .slice..
[Webpack] 작업 폴더 밖으로 컴파일하고싶을때 (publicPath와 outputPath)
publicPath 브라우저에서 참조될때 출력 파일의 공용 URL 주소 outputPath 컴파일 된 파일이 배치될 파일 시스템 경로 기본구조 현재 작업폴더 application/layout안의 dist폴더 루트가 시작하는곳 (url로 접근할 수 있는 곳) application/www/여기서부터~ 따라서 dist 폴더에서 작업하면 www 폴더 밑에 컴파일 된 파일이 위치하도록 해야함 문제상황 publicPath로 ../../../ 해서 작업 폴더 밖으로 컴파일을 시도하였으나 아무리 뒤로 가도 /dist 폴더 안에만 컴파일됨 해결방법 outputPath에서 상대경로(../../)로 설정했더니 원하는 위치로 컴파일 됨
[Webpack] 렌더링된 image url이 base64로 나올때
문제상황 scss 소스 상에서는 상대경로로 작성한 이미지파일 경로가 개발자도구에서는 base64로 나오는 상황 [scss] 상대경로로 작성 [개발자도구] base64로 변환되어있음 해결방법 webpack.config.js 파일에서 limit을 수정해줘야 한다. limit 보다 작은 파일은 base64로 변환하고 큰 파일은 그대로 보여주기 때문! limit이 원래는 10000 이었는데 1로 수정해주고 npm run watch 다시 돌려주니 정상적으로 작동하였다.
[IOS & javascript] new Date() invalid date 오류!
문제상황 new Date("2021-10-10 10:00:00");​ 기본 new Date()를 사용했는데 IOS 에서 invalid date 가 나옴. 해결방법 new Date("2021-10-10T10:00:00"); IOS 경우에는 가운데에 T를 넣어주면 해결된다. 또는 moment 라이브러리를 사용하는 것을 추천한다.
[HTML & Mobile] input 키패드 실행버튼 텍스트 검색으로 나오게 하기
문제상황 모바일 기기마다 검색 input의 키패드의 검색버튼이 "완료" 또는 "이동" 등으로 다르게 나와서 "검색"으로 텍스트 변경요청 해결방법 1 1. form에 action="" 추가하기 (사용하지 않으면 빈값으로 그냥 두기) 2. input의 type을 "search" 바꾸기 (기존에는 type="text" 였음) 해결방법 2 input 태그의 type을 text 또는 search로 하고 enterkeyhint="search" 속성 추가하기 (enterkeyhine는 물론 모바일에서 적용하기 위함이지만 ie는 지원안한다고 하니 참고) 출처: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint 참고 IOS에서..

티스토리툴바