분류 전체보기 (44) 썸네일형 리스트형 Vue.js 개발을 위한 주요 ES6 문법 https://joshua1988.github.io/web-development/translation/essential-es6-features-for-vuejs/ 매우 유용하다!! @ '', "" 보다는 `(백틱) 사용을 지향한다. 1) JS에서 HTML 코드 작성시 한줄로 쓰기 불편하지만 `은 줄간격을 띄어써도 가능하다. 2) +로 문자열과 변수를 조합시켜주어야하지만 템플릿 리터럴의 ${} 문법을 활용하여문자열을 쪼개지 않고도 동적으로 활용이 가능하다.EX) 'HELLO' + this.name + '!!' ☞ `HELLO ${name} !!` @ 화살표 함수 function(idx) {} 인자를 (idx) => {} 로 단축화 할수 있다.하지만 인스턴스 속성에서는 사용이 불가하다.EX) computed.. [아톰] 패키지 백업하기 ATOM BACKUP 블로그에 있는 설치 글을 보면 Sync Settings에 관련된 내용이 있을 것이다.(https://webkimsora.tistory.com/26) 해당 패키지는 설치한 패키지들을 git gist를 통해 백업하여타 환경에서도 바로 작업환경으로 만들어줄수있는 기특한 아이다. 이 부분은 본 블로그 혹은 타 블로그를 통해 손쉽게 사용방법을 알 수 있는데정작 백업하는데에 헷갈려서 기억하기위한 용도로 적어두는 포스팅임을 참고바란다! 우선 아톰에는 커맨드 패드가 있다. (ctrl+ shift + P) 패키지에서 사용되는 유용한 단축키들을 입력 및 실행시켜주는건데sync 패키지 역시 이걸 통해 사용을 할수 있다. Setting 툴(ctrl + , )로 가서 설치된 패키지에서 해당 패키지를 검색해서 들어가보면초반에 설.. [VUE] computed 계산된 속성 @ WATCH + https://kr.vuejs.org/v2/guide/computed.html#computed-%EC%86%8D%EC%84%B1%EC%9D%98-setter-%ED%95%A8%EC%88%98 method와 computed 차이 @ computed (계산된 속성) methods와 computed의 차이 computed는 data 속성에 변화가 있을때 자동으로 다시 연산을 한다. computed에서 사용하고 있는 data속성인 message라는 프로퍼티가 변화가 있을때만 다시 연산을하고 한번 연산한 값을 캐싱 해놓았다가 필요한 부분에 다시 재 사용한다. 같은 페이지내에서 같은 연산을 여러번 반복해야 할 경우에 성능면에서 효율적으로 사용할 수 있다. 반면 methods는 캐싱이라는 개념이 없기 때문에 매번 재 렌더링된다. 캐싱 효과가 필요하다면 computed를 사용하고 캐싱이 필요없다면 methods를 사용하도록 하자.getter getter는 객체의 프로퍼티를 가져오는 함수를 말합니다. getter의 장점 계산 미루기 (Lazy.. select box 커스텀 및 값 가져오기 [jquery] 모바일 video autoplay 관련 정리와 인앱 브라우저 체크 방법 이전에 PC 크롬에선 audio autoplay가 안되는 이슈가 있었다. 사용자 웹접근성을 기반으로 위배되지 않도록 제약이 걸리는 경우가 대다수인데, 특히나 모바일같은경우엔 더욱 철저하게 지켜진다. 모바일은 다양한 브라우저와 인앱 브라우저 등이 있다. 이때 video (mp4) 자동 재생에 관련해서 이슈가 굉장히 많은데, 유형은 크게 2가지로 나뉘어진다. 1. 영상지원이 안되는 경우 해당 비디오의 재생여부를 확인할 수 있는 javascript가 있다. HTMLMediaElement.canPlayType() 구문 섹션str = audioOrVideo .canPlayType ( mediaType ); 매개 변수 섹션미디어 종류DOMString미디어의 MIME 타입을 포함.반환 값 섹션String. 가능한 값.. [CSS] rotate 했을때 스크롤이 보이는 경우 프로젝트 진행중 팝업 닫기 버튼에서 transform rotate를 사용하였더니이따금씩 회전할때 바디 내부에 스크롤이 갑자기 생기는 경우가 있었다. (X,Y축 전부 생성) 1. 기본적으로 부모격에 overflow hidden을 주면 된다 생각했지만 해결이 되지않았다. 2. 해당 엘리먼트와 부모를 inline-block 요소로 잡아줬는데도 해결이 되지 않았다. 이후 검색을 통해 확인해보니 text-indent로 이 현상이 일어날 수 있어 해당 css를 삭제하였더니 해결! 업로드한 이미지의 컬러를 추출해주는 툴 「Pictones」 https://pictones.firebaseapp.com/ 사진 이미지를 업로드하면 해당 이미지에서 6가지 컬러를 추출해주는 사이트 이벤트 중첩 막기 (바인딩 해제) 제이쿼리를 사용하다보면 이벤트 부여로 on을 쓰는 경우가 많다.이전에는 bind를 사용하였으나, 이벤트 작성 후 바인딩 해제하기 편리하여 on으로 많이 사용하는 편. $(element).on('event', function(){~~~}); -> $(element).off('event'); off()로 쓰면 해당 엘리먼트 이벤트 전체 해제,off('event')로 쓰면 해당 이벤트만 해제 [jquery] scroll fullpage animation 스크롤 페이지 이전 1 2 3 4 5 다음
