Develop_NOTE

Watcher(감시자) 이란? watcher는 데이터 변경을 모니터링 하고, 데이터가 변경 될 때 특정 동작을 수행하게 하는 Vue의 항목이다. 사용 예시를 예를 들자면, 특정 데이터가 변경 될 때 로그를 출력하거나, 특정 동작을 트리거(trigger)하기를 원할 때, Watcher를 사용 할 수 있겠다. watch 항목 사용하기 위 코드 기준으로 "watch" 라는 항목을 생성해주고, month데이터가 변경될 때마다 이를 감시해주는 month()라는 콜백함수를 생성해뒀다. v-model로 인하여 month라는 데이터가 변경 될 때마다 이제 콘솔에 "month값이 변경되었습니다." 라는 메세지가 출력 되는 것을 확인 할 수 있다.

HTML의 'data' 속성이란? - 사용자 정의 데이터를 HTML 요소에 저장할 수 있는 방법을 제공해주는 속성 - 'data'속성은 접두사를 가진 속성으로, 해당 요소와 관련된 정보를 HTML에서 마크업 할때 사용. ex) 'data-' - 보통 이러한 데이터는 javascript나 css에서 사용 될 수 있다. 'data'속성의 일반적인 형식 my key 위의 코드에서 data- 접두사 뒤에붙는 'key'는 사용자가 작명한 이름이고 value는 그에 해당되는 데이터 값이다. 이 데이터값은 HTML 요소에서는 보이지 않지만 Javascirpt나 CSS를 통해 접근 할 수 있다. javascript로 'data'속성 값 접근하기 1.getAttribute() 메소드 사용 const MY_KEY_EL =..

sort() 메소드란? 'sort()'메소드는 자바스크립트의 데이터타입 배열(Array)에 사용되는 내장 된 함수이다. sort()메소드를 사용하면 배열의 요소들을 정렬하는 기능을 제공한다. sort() 메소드는 원본 배열을 변경하며, 정렬된 배열을 반환 한다. 'Array.sort()' 메소드를 호출하면, 배열의 요소들은 기본적으로 문자열로 변환되어 오름차 순으로 정렬된다. 예시 코드 숫자 오름차순 정렬 숫자 배열을 sort배열의 오름차 순대로 정렬을 하자면 아래와 같이 할 수 있다. const numbers = [4, 3, 1, 3, 5]; numbers.sort(); //출력 결과: [1, 2, 3, 4, 5]; 숫자 내림차순 정렬 반대로 내림차 순으로 정렬을 하기를 원한다면 아래와 같이 할 수 있..

탭버튼 클릭시 해당 컨텐츠 노출하는 방식은 흔하게 웹사이트에서 쓰는 동적인 움직임이다. Jquery로 처리하면 간단하긴 하지만 순수 JS로 처리해도 어렵지 않음으로 속도가 빠른 JS로 처리하는것을 추천한다. HTML 마크업 구조 - current 란 클래스를 가진 button에는 스타일이 적용되며 다른 버튼은 스타일이 사라짐. - current 란 클래스를 가진 content는 노출되며 다른 컨텐츠는 숨김 TAB 1 TAB 2 TAB 3