본문 바로가기

분류 전체보기

 (112)
[ Git ] Git을 단축어로 사용 ! alias 정리 ( with. fzf , tig ) alias 설정하기 alias는 git의 명령어들을 단축어로 설정해서 사용하는 기능인데, 예를 들면 아래와 같이 git checkout master를 git ch master 의 형태로 짧은 단축어로 줄여서 사용하는 기능이다. 1 commands로 설정 하나씩 추가 하기 > git config --global alias.ch checkout 2 .gitconfig파일에 설정 한번에 여러개 추가하기 > vi ~/.gitconfig .gitconfig 파일 [alias] > 이 위치에 원하는 단축어들을 넣어서 사용 fzf로 더 편한 add , checkout 하기 fzf는 터미널을 더 편하게 사용할 수 있게 도와주는데, 지금은 더 편한 add , checkout하는 방법을 정리했다 1 fzf 설치하기 hom..
아이폰 input , select 확대 기능 없애기 IOS 모바일 에서 input selectbox을 누르면 자동으로 그쪽에 확대가 되는 문제를 발견했다. 검색해 보니 font-size가 16 이하이면 focus된 input으로 자동으로 확대가되는 기능인데 그 기능을 빼야한다고해서 제거 하는 법을 찾았다. 문제 상황 1 제일 쉬운 방법 font-size 키우기 input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], ..
[ JS | VUE ] element 중간에 새로운 element 삽입하기 ul태그 안에 v-for로 data들이 뿌려진 li element들이 있는데, 이 li 사이에 일정 간격을 두고 배너가 들어가야 하는 상황이었다. 적용 전 방법 1 첫번째로 든 생각은 데이터들이 다 뿌려진 후인 mounted에서 li를 querySelectorAll로 가지고와서 원하는 사이에 배너 html을 끼워넣는 방법이였다. → Element.insertAdjacentHTML() 이용 element의 2번째 4번째에 나와야 하는데 idx값은 element의 순서보다 -1된 값이니 idx값이 2의 배수인지 확인할땐 -1된 값을 index에 할당해 비교하고 적용할땐 원래 idx값을 사용했다 방법 2 두번째 방법은 v-for로 불러올때 v-if로 index값을 활용해 배너를 원하는 위치에 넣어주는 방법이였..
[ Vue ] 새 프로젝트에서 SCSS 사용하기 sass랑 sass-lodaer를 설치하면 되는 간단한 사용법이지만 주의해야 할 점이 있어 정리하는 포스트🤣 ! 알아두기 Vue CLI로 프로젝트를 시작할때 위의 이미지와 같은 preset을 선택한 경우 최신 버전의 sass-loader를 사용하면 아래와 같은 오류를 만날 수 있다 [ Vue Error ] sass-loader 설치 오류 : TypeError: this.getOptions is not a function CLI로 새 프로젝트를 생성하고 scss를 사용하려고 sass-loader를 설치하는데 이상한 오류가 났다. TypeError: this.getOptions is not a function 문제 Default ([Vue 2] babel, eslint) CLI로 프로젝트.. im-desig..
[ Vue Error ] sass-loader 설치 오류 : TypeError: this.getOptions is not a function CLI로 새 프로젝트를 생성하고 scss를 사용하려고 sass-loader를 설치하는데 이상한 오류가 났다. TypeError: this.getOptions is not a function 문제 Default ([Vue 2] babel, eslint) CLI로 프로젝트 만들때 vue 버전 선택시 Default ([Vue 2] babel, eslint) 를 선택했는데 sass-loader@11.0.0이 vue@2.6.12에서 작동하지 않는것 같다. 해결 sass-loader를 10.1.1로 다운 그레이드하여 문제를 해결! // 이전 버전의 sass-loader가 있다면 삭제 npm uninstall sass-loader //10 버전으로 다시 설치 npm i sass-loader@10 ✔︎ 참고 stack..
[ CSS ] 비슷해서 헷갈리는 transform, translate, transition Style줄 때 기계처럼 적용하는 transform, translate, transition 단어들이 비슷해서 가끔 적용 시 헷갈릴 때가 있다🥲 그래서 간단히 정리하고 넘어가도록 한다 ! transform : element 변형 시 사용 translate : transform에 속해있는 translate는 transform과 같이 사용할 수 있다 ( scale, rotate 같은 애 ) transition : element 변형 시 속도, 시간, 횟수 들을 조절 transform Element를 변경시킬 때 사용 ( 위치 이동 , 회전 , 크기 조절 등 ) span{ transform : 변형속성 ( 값 , 값2 ) // 여려개 속성 변경시 transform : 변형속성1 ( 값 ) 변형속성2 ( 값 ,..
[ Vue Error ] Eslint 배포 오류 : Use //eslint-disable-next-line to ignore the next line. You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use /* eslint-disable */ to ignore all warnings in a file. 수정하고 배포하려고 하는데 이런 오류가 나면서 build 오류가 났다. ESlint 때문인듯한데 저장하고 확인할때마다 오류 난 부분도 없었고 local에서 실행도 잘 되었던터라 당황.. 문제 vue.config.js 다른 에러 잡는다고 검색하다 넣은 이 부분이 문제가 되었던것 아래처럼 설정하면 콘솔에 오류가 뜨면서 뷰로 구현한 화면에도 검정 배경에 오류가 뜨게 되는데 그걸 막아주던애 그래서 내가 오류를 ..
[ Vue ] vue 프로젝트에 Jquery 설치하기 Jquery쓰지 말라는 개발자들의 이야기는 진짜 많이 들었다. 간단한 class추가, element선택은 JS로 가능하니 최대한 안쓰려고 하고 있었다. 특정 element 클릭시 스르륵 그 element로 이동하는 스크롤 이벤트를 찾아봤는데 window.scrollTo({ top: 100, left: 100, behavior: 'smooth' }); behavior가 크롬에선 사용되는데 사파리에선 안되길래 JS로 방법을 찾아봤다. JS로 하면 코드도 엄청 어려울 뿐만 아니라 코드가 엄청 길어서 결국 프로젝트에 jquery를 데리고 오게 되었다..😅 설치 npm install --save jquery 사용 jquery를 사용하는 파일에 import 후 사용 import $ from 'jquery'; 나는 ..
[ Vue Error ] export 'default' (imported as '...') was not found in ... export 'default' (imported as 'router') was not found in './route/router' 개인 프로젝트 수정하려고 오랜만에 npm run serve 입력했을 뿐인데 warning이 떠버렸다. 왜 그때 안잡고 그냥뒀지 ..... 🤥 ( ? ) main.js 오류를 보자니 세번째줄인 import router from'./route/router'; 에서 import 한게 문제가 있나본데😅 router.js 결론 router을 export 할때 defalut를 사용하지 않아서 그런 오류가 뜨는 거였다. ( import export 제대로 사용하지 못함 ) 해결 방법 1 import 하는 방법을 변경 main.js import { router } from './route..
[ Nuxt ] nuxt-link 다양하게 사용하기 ! ** 본글은 nuxt에 대한 기본적인 설명이 없으므로 nuxt에 대해 알고계셔야 도움 될 내용입니다 ! ** 페이지를 연결할때 (이동시킬 때 ) 사용하는 는 와 같은 역할을 한다. 의href와 같이 to를 이용해 형태로 사용한다 화면에 그려지고 난 뒤에는 아래와같이 a태그로 보여진다 이름을 가진 라우터를 사용할때나 데이터 값을 넣어 사용할때에는 v-bind:to=".." 를 사용한다 Props 사용하기 1 . replace ( 기본값 false ) 클릭할 때 router.push() 대신 router.replace()를 호출 뒤로가기를 하더라도 히스토리 레코드를 남기지 않으므로 이전 화면으로 돌아가지 않는다 2 . append ( 기본값 false ) 항상 상대 경로가 현재 경로에 추가된다. ex ) 예..

티스토리툴바