e.target.dataset과 jQuery의 .data()의 결과 값은 다를 수 있다.
e.target.dataset과 jQuery의 .data()의 결과 값이 다르다? 어떻게 된일인지 파악해보자. 환경정보 -jQuery : https://code.jquery.com/jquery-3.3.1.min.js 요구사항 data-lang 속성의 값이 'ko'인 타겟을 클릭하면 data-lang 값이 en으로 변경된다. 이 때 변경된 data-lang의 값을 타겟 재 클릭 시 가져오기 이슈사항 vue.js 를 사용하여 동적으로 리스트 생성했고, 동적으로 생성하는 타겟을 클릭 -> 동적으로 타겟의 값이 수정됨 -> 타겟을 재 클릭 시 결과 값이 e.target.dataset과 .data();의 값이 상이함. e.target.dataset의 경우 내가 의도한대로 수정된 결과 값을 리턴한다. 하지만 $(e..
vue.js로 개발 후 firebase로 배포해보기
내가 기억하기 위해 작성 ㅎㅎㅎ(머쓱) 1.파이어베이스 콘솔 사이트로 이동해서 가입한다. https://console.firebase.google.com/ 2.새 프로젝트 추가 - 프로젝트명이 url에 표기됨 [ 대략적 예시) 프로젝트명.firebase.com 형식 ] 3.내 프로젝트로 가서 firebase CLI 설치 [cmd] npm install -g firebase-tools firebase login - 가입한 계정으로 로그인 4.내 프로젝트에서 init [cmd] firebase init 질문들이 나오는데 답변하면 된다. 대충.. - Are you ready to proceed?(Y/n) Y - Database, Hosting에서 스페이스 바 눌러서 체크하고 다 체크하면 엔터쳐서 다음 질문으로..
개발 버전표기 대략적으로 이해하기
버전정보를 잘.... 지키는 곳에서 업무를 해본적이 없어서 검색해서 찾은 정보들을 정리해보았다. 버전의 정의 효율적으로 상품을 관리하기 위한 목적 소프트웨어, 하드웨어 상품의 개발 단계 또는 순서를 번호로 표시한 것 버전에 따라 내용과 기능에 차이가 있으므로 명확히 표시 버전 표기의 이유 ? 버전만으로 핫픽스된 이슈, 스펙의 구현을 볼 수 있어서 대략적인 프로젝트의 히스토리를 확인할 수 있다. 또한 로그 정리에 도움이 된다. *핫픽스(Hotfix)란? 제품 사용 중에 발생하는 버그의 수정이나 취약점 보완, 또는 성능 향상을 위해 긴급히 배포되는 응급 패치 프로그램. *로그(log)란? 로그파일은 운영 체제나 소프트웨어가 실행 중 발생하는 이벤트등의 메세지를 기록한 파일이다. 라이브러리 예시 jQuery...
우리는 때때로 동적으로 컨텐츠를 조작하기도 합니다. 어떠한 컨텐츠를 넣고 싶다는 예제로 알아보도록하겠습니다. // HTML 안녕하시렵니까? 이럴때 사용하는 메서드는 append(), prepend(), appendTo(), prependTo(), after(), before()가 있습니다. 하나하나 알아보겠습니다. append() - 선택된 요소에 포함되며 마지막 위치에 새로운 요소로 추가된다. See the Pen LYPwWyX by leeyoonseo (@okayoon) on CodePen. prepend() - 선택된 요소에 포함되며 첫번째 위치에 새로운 요소로 추가된다. See the Pen XWrvMeE by leeyoonseo (@okayoon) on CodePen. appendTo() - a..
크롬 개발자 툴을 알아보자
https://developers.google.com/web/tools/chrome-devtools/ 개발자도구는 마우스 우클릭 > 검사, 단축키 Ctrl+Shift+I 통해 열 수 있습니다. Device Mode 클릭 시 모바일 크기에 따른 화면 확인 가능 사용자 설정도 추가 가능합니다. edit > add custom device... 막대바 마우스 우측 클릭 시 미디어 쿼리 소스 확인 가능합니다. Elements hide element - visibility:hidden과 같습니다. scroll into view - 해당 태그로 스크롤 합니다. DOM Breakpoints - break on한 태그들을 확인 가능합니다. Break on을 설정해두면 자바스크립트 코드가 해당 dom 요소 변화를 줄 때..
input 타입 range 스타일 수정하기_커스텀 스타일
++ 추가 사항 태그로 제작한 부분이 모바일에서 터치 이동이 안되는 이슈가 있었습니다. 그래서 어쩔수 없이 태그를 사용하여 커스텀하는 형식으로 작업했습니다. 기록상 글을 작성합니다. 글에 IE11이라고 작성된 모든 부분을 Edge로 수정합니다. ++ 원본 코드 확인 바로가기 요구조건 태그를 사용, CSS를 통해 아래와 같이 제작해주세요. 아래 이미지는 캡쳐본으로 저 형태로 제작하는 것이 최종 요구조건 이었습니다. 기존에 태그를 사용해서 작업했던 결과물을 분석합니다. 부모 태그에 너비를 100% 준 다음 왼쪽(진행 후)과 오른쪽(진행 전)의 영역의 값을 JS로 삽입하는 방식이었습니다. 이렇게 된 코드를 방식으로 변경해보도록 하겠습니다. 지원 브라우저 들어가기전에 생각해야하는 부분은 는 IE10부터 지원합니..