몽땅뚝딱 개발자

◽ queryCommandSupported() 해당 브라우저에서 command 지원여부를 알 수 있는 API이다. but,, 더 이상 사용되지 않는다. (Deprecated) isSupported = document.queryCommandSupported(command); ◽ 예제 if (document.queryCommandSupported("cut")) { console.log("지원함"); } else { console.log("지원안함"); } 출처 Document.queryCommandSupported() - Web APIs | MDN The Document.queryCommandSupported() method reports whether or not the specified editor co..

◽ 설치하기 npm i vue-debounce ◽ debounce란? 연이어 함수가 호출될 때 가장 마지막이나 가장 처음의 1회만 이벤트가 발생하도록 하는 기술이다. 예를 들어, 검색어를 입력할 때 하나의 모음/자음을 입력할 때 마다 API를 호출하는 것은 비효율적이고 과도한 비용을 들게 한다. 따라서 사용자가 타이핑을 마쳤다고 생각하는 지점에서 호출해야한다. 기존에 발생한 이벤트(=사용자가 검색어를 입력할 때 발생한 이벤트)를 하나로 묶은 상태에서 가장 마지막으로 호출된 시점에서 API를 호출하면 되는 것이다. ◽ 예제 📄 main.js import vueDebounce from "vue-debounce"; Vue.use(vueDebounce); 📄 test.vue - HTML 영역 📄 test.vue..

오늘도 외쳐보는 "왜 찾지를 못하니.......!!!!!!!" 에러 Failed to compile. ./src/styles/index.scss (./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-3-1!./node_modules/postcss-loader/src??ref--9-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-3-3!./src/styles/index.scss) Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Undefined variable. ╷ 157 │ background-color: $n..

엘리먼트들을 정렬하는 방식은 float, flex, grid 등이 있다. 내가 배웠던 방식은 float으로 맞추던 방식(only one,,)이었는데 벌써 '옛것'이 되어버렸다고 한다. 실제로 flex를 사용해보니 float을 사용하는 것보다 코드의 양도 적고 한번에 해결할 수 있다는 느낌이다. 훨씬 간단한 flex를 알아보자... ◽ Flex의 속성들 각 박스들은 이고 박스를 둘러싼 엘리먼트는 으로 구성했다. 박스를 둘러싼 엘리먼트인 box-wrap에 display: flex;를 주면 아래와 같이 개발자도구에서 바로 flex와 관련된 속성들을 확인할 수 있기때문에 더욱 쉽게 적용할 수 있다. 1) justify-content - center - flex-start - flex-end - space-bet..

◽ Nprogress란? 로딩표시를 위한 라이브러리이다. ◽ 설치하기 1) npm $ npm install vue-nprogress 2) CDN 방식 nprogress - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers Simple slim progress bars - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each mon..

되도록.. 이 디렉토리에는 에러일지를 쓰고싶지 않지만.. 앞으로도 많이 쓰게될 것 같다. (😭) 나에게 아직까지는 무서운 Git... 에러 추적하지 않는 파일: (커밋할 사항에 포함하려면 "git add ..."을 사용하십시오) src/apis/api/test.js src/mixins/test.js src/styles/common.scss 원인 작업하고 있던 브런치에서 다른 브런치로 체크아웃 할 일이 생겨 기존 브런치의 변경사항을 모두 rollback 했다. (나는 변경사항을 남겨둘 필요가 없어서 rollback을 했고 만약 저장해둬야한다면 임시저장인 stash를 하면 된다고 한다.) 그리고 다른 브런치에서 소스수정 후 push하고 다시 원래 작업하고 있던 브런치로 돌아와 [git status] 명령어를..

◽ 네비게이션 가드(navigation-guard) 네비게이션 가드란 특정 URL에 접근할 때 해당 URL의 접근을 막는 방법이다. ◽ 종류 1) 전역가드: 어플리케이션 전역에서 동작한다. - to: 이동할 URL 정보가 담긴 라우터 객체 - from: 현재 URL 정보가 담긴 라우터 객체 - next: to에서 지정한 URL로 이동하기 위해 반드시 호출해야하는 함수 const router = new VueRouter(); // beforeEach()를 호출하고나면 모든 라우팅이 대기상태가 된다. // URL로 라우팅하기위해서는 next()를 호출해야한다. router.beforeEach(function( to, from, next ) { // 'isPassed'는 내가 정의한 속성값으로 로그인을 한 경..

◽ .sync prop에 대해 양방향 바인딩이 필요한 경우가 있다. "undate:myPropNm" 같은 패턴이 권장되어 아래와 같이 작성하면 양방향 바인딩을 할 수 있다. 그리고 위와 같은 패턴을 .sync 수식어를 통해 표현하여 줄일 수 있다. 출처 https://kr.vuejs.org/v2/guide/components-custom-events.html#sync-%EC%88%98%EC%8B%9D%EC%96%B4 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

◽ window.scrollTo(xpos, ypos) 특정 위치로 스크롤을 이동시키는 메서드이다. window는 생략이 가능하다. x-좌표: 문서의 왼쪽 상단부터 시작하는 픽셀단위의 가로축 y-좌표: 문서의 왼쪽 상단부터 시작하는 픽셀단위의 세로축 window.scrollTo( 0, 1000 ); ◽ window.scrollTo(xpos, ypos)의 속성 - scroll-behavior: 스크롤 효과 지정, auto가 기본값이며 instant, smooth가 있다. - top: 세로 위치 - lef: 가로 위치 출처 및 참조 https://developer.mozilla.org/ko/docs/Web/API/Window/scrollTo 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도..

◽ window.pageYOffset scrollY의 다른 이름이다. 스크롤이 수직으로 얼마나 스크롤 됐는지 픽셀단위로 반환한다. 스크롤에 따라 상단 메뉴를 다르게 보이게 하는 상황 등에서 쓰인다. 최신 버전에서는 pageYOffset를 사용한다. scrollY는 작동하지 않을 수도 있다. yOffset = window.pageYOffset; 출처 및 참조 https://developer.mozilla.org/ko/docs/Web/API/Window/pageYOffset 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.