본문 바로가기
[VSCode] 맥북에서 한줄 선택(드래그) 단축키 윈도우에서는 ctrl + shift + l 로 코드 한줄 드래그가 되었다. 하지만 맥북으로 넘어오면서 먹히질 않아서 한참 찾다가 발견하였다. VScode의 왼쪽하단 톱니바퀴를 클릭 > Keyborad Shortcuts > "cursorEndSelect" 검색 아래와 같이 default 단축키 값이 나온다. shift + command + right(화살표 오른쪽) 커서가 만약에 코드 라인 제일 끝에 있다면, "cursorHomeSelect"의 기본 단축키 값인 shift + command + left(화살표 왼쪽) 으로 해당 한 줄을 드래그할 수 있다. 참고 링크 : VSCode 단축키 https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.p..
[Mac] 화면 캡처 및 기록 단축키 화면 캡처 및 기록 단축키는 모여있다. 전체 화면 캡처 : command + shift + 3 부분 화면 캡처 : command + shift + 4 화면 영상 기록 : command + shift + 5 화면 영상 기록은 어떻게 사용하는 것일까 🤔 command + shidft + 5를 누른과 동시에 마우스 화살표 모양 대신 카메라 모양이 나온다. 기록할 모니터에서 한번 클릭하면 다시 마우스 화살표 모양이 나오는데, 그 때부터 해당 화면의 사용자 동작을 녹음한다. 녹음을 끝내고 싶을 때 command + ctrl + esc 를 누르게 되면 전체 또는 부분 화면 캡처를 마치면 화면 오른쪽 하단에 나오는 축소판 화면이 나오면서 영상 녹음이 끝난것을 알 수있다. 다운로드나 데스크탑 영역에서 작업물을 확인 가..
[git] Command Line에 작업 반영 명령 줄곧 VSCode 터미널(커멘트 라인)에 명령어를 입력하여 작업물을 커밋하곤 했었는데 소스트리라는 GUI를 사용하게 되면서 명령어 입력하여 커밋하는 순서를 잊진 않을까 하여 기록으로 남기고자 한다. 😀 git status git add . git commit -m "커밋 내용" origin main git pull origin main git push origin main 여기서 main은 디폴트 브랜치를 뜻한다. 최근에 master에서 main으로 변경되었다. master는 종속의 관계 의미가 있기 때문에 평등?한 의미를 위해서 main으로 변경하였다고 하지만 실무에서는 master로 쓰이는 곳이 많다. 네이밍 변경에 관련해선 아래 링크를 참고해도 좋다. https://github.com/github/..
[plugin] swiper 중복 사용 tablet과 mobile 환경에서 슬라이더 플러그인 클래스는 동일한데 분리되어 보여야할 경우가 있다. 그럴 때 유용하게 쓰일수 있는 스크립트를 공유한다. 해당 슬라이더 개수를 파악하여 인덱스를 이용해 각각의 슬라이더에 자바스크립트로 아이디 값을 할당 후 스와이퍼를 동작 시킨다. html javascript $('.category-add-slider').each(function (i, v) { let sliderName = 'slider' + i; $('.category-add-slider')[i].id = sliderName; let sliderId = '#' + sliderName; let categoryAddSlider = new Swiper(sliderId, { loop: true, autopla..
[javascript] var, let, const, 호이스팅, 스코프에 관하여 * 호이스팅(Hoisting)이란 var로 선언된 변수, 함수가 어떤 코드 보다 위로 끌어올려져 실행되는 자바스크립트가 갖는 특징을 말한다. var 변수 선언과 var로 선언된 함수선언문에서만 호이스팅이 일어난다. 일어나는 순서는 1. var 변수 선언 2. var로 선언된 함수선언문 * 함수선언문 var inner = function(){} let inner2 = function(){} * 함수 표현문 function funcName(){} * 선언, 초기화, 할당, 참조 - 선언 : 자바스크립트 엔진에게 해당 변수 존재를 알려줌 - 초기화 : 값을 저장하기 위한 메모리 공간 확보 - 할당 : 변수에 값을 저장 - 참조 : 변수에 저장된 값을 읽어 들이는 것 * 브라우저별 사용하는 자바스크립트 엔진 -..
[plugin] slick.js 자동재생 멈춤 메서드 slick.js 플러그인을 입힌 자동재생 슬라이더에서 특정 슬라이드에 머물게 하는 메서드가 있다. slickPause 또한 hover, focus시에 멈추게 하는 값이 있다. pauseOnHover: true, pauseOnFocus: true 하나의 슬라이더에 slick.js 를 입힌 후에 1. hover시 멈추게, 2. focus시 멈추게, 3. 특정 엘리멘트를 클릭 시 멈추게하는 예시는 아래와 같다. $('.single-slick').slick({ autoplay: true, autoplaySpeed: 5000, dots: true, pauseOnFocus: true, pauseOnHover: true, responsive: [ { breakpoint: 1081, settings: { arrows:..
[plugin] swiper version6 이상 로컬 연결하기 swiper 예전 버전에선 압축 파일을 다운로드하여 로컬에 연결하면 되었었는데, 최신으로 변경 되면서 로컬로 연결하면 console 창에 swiper-bundle.min.js.map 연결이 원활하지 않다고 나온다. 따라서 https://swiperjs.com/get-started#download-assets 이 주소로 접속하여 아래 세가지 파일을 다운받는다. 1. swiper-bundle.min.css 2. swiper-bundle.min.js 3. swiper-bundle.min.js.map 다운 받는 방법은 해당 파일을 클릭하면 나오는 url에서 'browse'를 제거하면 해당 소스코드가 보일 것이다. 그 후 로컬에 연결하여 콘솔을 보면 노란색의 연결 이슈가 사라진것을 볼수 있다. 😊
[plugin] slick.js slide 컨텐츠 너비로 설정하기 slidesToShow 설정 후에 슬라이드 너비가 셋팅되어있기 때문에, 캡처본 처럼 두 줄이상으로 보일 경우가 있다. 그럴 경우에는 slick.js의 옵션인 variableWidth값을 셋팅 해주면 된다. 아래는 해당 옵션 추가 예시이다. let slidetNavIdSetting = { variableWidth: true, slidesToShow: 4, slidesToScroll: 1, swipe: false, infinite: false, asNavFor: sliderId, dots: false, centerMode: false, focusOnSelect: true, } $(sliderNavId).each(function(index, val){ if($(val).find('.menu-item').len..

티스토리툴바