Develop_NOTE

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 =..

Git branch? Git에서 브랜치(branch)는 프로젝트의 다른 버전을 독립적으로 개발하거나 수정하기 위해 사용된다. 각각의 브랜치는 프로젝트의 특정 상태를 나타낸다. branch의 주요 목적? 여러 개발자가 동시에 다른 기능 또는 수정 사항을 작업 할 수 있게 해준다. 브랜치는 다른 기능이나 수정 사항을 독립적으로 개발하고, 테스트 할 수 있는 환경을 제공하기 때문에 협업시 매우 큰 도움이 된다. 이를 병렬 개발 이라고 한다. 'master' or 'main' 브랜치에는 항상 안정적인 상태의 운영중인 사이트에 업데이트 되어있는 코드가 유지되며, 새로운 기능이나 수정사항을 개발하는 브랜치에서 테스트하거나 개선 작업을 진행 할 수 있다. 이를 안정성 유지 라고한다. 각 브랜치는 프로젝트의 특정 상태..

flex 레이아웃 이란? flex레이아웃은 css3의 속성 중 하나로, 웹 페이지를 이루고있는 요소들을 유연하게 정렬하고 배치하는데 사용되는 방법이다. 즉, 요소들을 효율적으로 배치 할 수 있기때문에 다양한 디바이스와 해상도에 대응하는 반응형 웹 사이트를 보다 간편하게 구현하는데 도움이 된다. IE의 서비스가 종료된 시점인 지금에서는 grid와 함께 매우 적극적으로 사용해도 무방한 css3 속성이다. 속성 display: flex -선택자 요소 안에 있는 컨테이너 항목을 내용에 따라 유연한 레이아웃으로 처리해준다. -확인링크: https://jsfiddle.net/zsk3behm/ ※ flex의 성질은 그대로 가져오되 인라인 타입으로 처리해주는 'display: inline-flex' 속성도 있다. A ..

Vue.js의 조건문(v-if)란? Vue.js에서 사용하는 조건부 렌더링을 위한 디렉티브이다. v-if를 사용하면 특정 조건이 참일 때만 HTML을 렌더링하거나, 표시 할 수 있다. 그렇기 때문에 보통 조건부에 따른 UI를 제어 할 때 유용하게 사용 된다. v-if 기본 문법 v-if를 사용하여 조건부를 정의 할때는 HTML UI의 상태를 데이터로 저장해둔다. 그리고 그 상태에따라 HTML을 보여줄것인지, 말 것 인지에 대해 Vue.js문법으로 작성한다. 기본문법은 아래와 같다. 이 메시지는 조건이 참일 때에만 보입니다. export default { data() { return { showMessage: true // 조건에 따라 메시지를 보이거나 숨기기 위한 데이터 }; } }; 위 코드 기준 sh..

Vue.js 반복문(v-for)란? 간단하게 얘기하자면 퍼블리셔가 상품목록을 구현한다고 했을때 'div','li' 이런 태그들을 수십개,수백개 똑같은 마크업 형태로 반복 작성하게되는데 이것을 수십개,수백개 마크업하지않고 축약해 줄 수 있는 기능을 제공하는게[ Vue.js의 반복문 'v-for'이다. 단순히 같은형태의 마크업만 반복해줄 뿐 아니라 배열(Array),객체(Object)형태로 이루어진 데이터들의 각 항목을 반복하면서 데이터 리스트를 기반으로 HTML을 생성해 줄 수 있다. 보통은 데이터리스트 기반으로 HTML을 생성하기위해 사용한다. v-for 기본 문법 기본 문법은 아래와 같다. 사과 1. 원하는 태그 안에 v-for="작명 in 반복횟수" 기입 2. v-for가 기입된 태그 안에 :key=..

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

filter() 메소드란? 'filter()'메소드는 자바스크립트의 데이터타입 배열(Array)에 사용되는 내장 된 함수이다. filter()메소드를 사용하면 배열 내 요소들을 필터링하여 새로운 배열을 생성하는 기능을 구현 할 수 있게 해준다. 동장방식은 아래와같다. 1. 'Array.filter()' 메소드의 콜백함수는 각 배열 요소에 대해 호출한다. 2. 각 요소는 조건 함수에서 'true'를 반환(return)하면 filter()를 통해 생성된 배열에 포함된다. 3. 반대로 조건 함수에서 'false'를 반환(return)하는 요소는 결과 배열에서 제외된다. 4. 최종적으로 필터링된 요소들로 이루어진 새로운 배열이 filter() 메소드를 통해 반환(return)된다. 예시 코드 [1, -2, 3,..

Vue.js의 데이터바인딩이란? 웹 애플리케이션에서 UI와 데이터를 동기화하는 기능을 제공하는 Javascript 프레임워크이다. Vue.js의 데이터바인딩을 활용하면 데이터의 변화에 따라 화면의 내용이 자동으로 업데이트되어 사용자에게 동적인 웹 애플리케이션을 제공할 수 있게한다. 예를 들자면 쇼핑몰에 올라가는 상품의 가격 처럼 가변적인 데이터들에 사용 할 수 있겠다. 이를 위해서 Vue의 실시간 자동 렌더링 기능을 사용하기위해서 데이터바인딩을 사용한다. 선언적 렌더링 data() & 데이터바인딩 문법 위의 렌더링 기능을 사용하기 위해 아래와 같이 작성한다. {{ price1 }} 속성 바인딩 단순 텍스트 뿐 아니라 HTML의 속성(property)도 데이터 바인딩이 가능하다. v-bind:속성명="da..

삼항연산자란? - 자바스크립트의 삼항연산자는 작성한 조건을 평가하여 두 가지 값을 반환하는 간단한 조건문 구문이다. 작성한 조건에 따라 값을 선택적으로 할당하거나 반환(return)할 수 있다. 일반적인 작성형식 (condition) ? trueValue : falseValue condition: 평가 할 조건을 의미한다. true 또는 false로만 평가한다. trueValue: 조건이 true일때 반환 할 값을 의미한다. flaseValue: 조건이 false일때 반환 할 값을 의미한다. 예제코드 음수인 조건을 만들고 이 조건이 양수인지,음수인지를 판별하여 콘솔로그에 출력하는 예제를 보자면 아래와 같다. const number = -5; //삼항연산자로 조건 판별 const message = (num..

Jquery에는 유용한 선택자들이 많다. 그 중 "visible" 이라는 선택자가 존재하는데, 아래와같은 코드에서 visible처리가 되어있는 요소만 선택할 수 있는 선택자다. visible hidden hidden hidden hidden 이 선택자 또한 자바스크립트로 어렵지않게 구현이 가능하다. 마크업 구조는 위와 동일하다. visible hidden hidden hidden hidden // 제이쿼리 :visible과 동일한 기능을 가진 함수 function isVisible(el) { return el.offsetWidth > 0 && el.offsetHeight > 0; } //visible element 확인 const boxs = document.querySelectorAll(".box");..