일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- 백준
- array
- HTML
- Python
- hash table
- computed
- JavaSceipt
- 자료구조
- SasS
- Algorithm
- sorting
- dynamic programming
- greedy
- string
- JavaScript
- JS
- 컴포넌트
- 코딩테스트
- github
- 알고리즘
- 변수
- CSS
- math
- scss
- 자료형
- 프로그래머스
- leetcode
- java
- 파이썬
- vue.js
- Today
- Total
목록전체 글 (172)
Posis
이번 포스팅에서는 간단하게 v-bind와 v-on의 약어를 소개하겠습니다. v-bind v-bind는 데이터를 바인딩시킬 때 사용합니다. Hello Vue.js!! 위와 같이 fontColor의 데이터를 바인딩할 때 사용합니다. 하지만 매번 v-bind를 작성하면 개발 속도가 늦춰질 수 있기 때문에 다음과 같은 약어를 제공합니다. Hello Vue.js!! // 생략 속성 앞에 콜론(:)만 붙여주면 사용가능합니다. v-bind는 다양한 곳에 사용할 수 있습니다. class, href 등등 v-on v-on은 메소드내에 이벤트를 바인딩 시길 때 사용합니다. {{ msg }} 이번에는 add라는 메서드를 바인딩했습니다. 이도 위와 같이 약어를 사용해 보겠습니다. {{ msg }} // 생략 속성 앞에 골뱅이..
클래스와 스타일 바인딩 데이터 바인딩의 일반적인 요구사항은 엘리먼트의 클래스 목록과 인라인 스타일을 조작하는 것입니다. 클래스와 스타일 모두 속성이므로, v-bind를 사용하여 처리할 수 있습니다. 사용방법 Hello Vue.js!(isActive = {{ isActive }}) Hello Vue.js!(isActive = {{ isActive }}) class를 사용해 style을 넣을 때 보통은 class = 'style'의 형식으로 작성합니다. Vue.js에서는 v-bind:class(약어 -> :class)를 활용해서 객체를 전달하여 클래스를 동적으로 전환할 수 있습니다. 위 코드는 active 클래스는 isActive의 진실성에 의해 결정되는 구문입니다. isActive의 값이 처음에는 fals..
배열 데이터를 나열하고, 각 데이터를 인덱스에 대응하도록 구성한 데이터 구조 삽입(Insert) 순서대로 저장합니다. 즉, 새로 삽입되는 요소는 배열의 마지막에 위치 중복된 데이터도 저장 가능 다중배열이 가능, 배열 안에 배열이 존재 배열의 구조 배열의 장단점 장점 빠른 접근이 가능 단점 추가/삭제가 쉽지 않음 미리 최대 길이를 지정해야 함 JS에서의 배열은 다른 형태로 만들어집니다. 이에 대해서는 다른 포스트로 자세하게 다뤄보겠습니다. 배열의 크기를 바꿀 수 없음 배열의 사용시기 데이터 개수가 명확학 정해져 있을 때 검색을 해야할 경우
[LeetCode][JavaScript] 9. Palindrome Number 문제 출처: https://leetcode.com/problems/palindrome-number/ Palindrome Number - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 문제 설명 숫자를 뒤집고 Input의 값과 동일하면 true, 틀리다면 false 단, 음수일 경우 무조건 false입니다. [직접 푼 코드] var isPalindrome = function (x) { ..
Getter 위 예제는 reverseMsg는 computed에서 만들어놓은 Readonly전용 함수입니다. 개발자가 직접적으로 msg의 data를 변경하지 않는다면 캐싱된 data를 얻어올 수만 있는 상황입니다. 하지만 vue.js문법을 통해서 setter를 통해서 값을 지정해서 변경시킬 수 있습니다. Setter reversedMsg메서드의 set은 직접적으로 값을 할당할 때 사용됩니다. 제가 콘솔에 쪽에 찍힌 거와 같이 메서드 실행 순서는 화면이 렌더 될 때 get()이 실행되고 캐싱되어서 화면에 나옵니다. 그 이후 버튼을 클릭하면 add() -> set(value) -> get()가 실행되는 것을 알 수 있습니다. 이를 통해서 computed에서도 setter(즉, 값을 지정)를 사용할 수 있다는 ..
이번 포스팅에서는 computed에 대해서 알아보겠습니다. computed 연결된 data의 값이 변경되었을 때, 복잡한 계산식을 계산해서 값을 캐싱해서 return 해주는 속성입니다. 캐싱 값을 계산하여 잠시 동안 저장해두는 것을 의미합니다. {{ msg }} 문자열 뒤집기 {{ reverseString }} 위 예제 코드는 'Hello Vue.js!!' 문자열을 뒤집어주는 코드입니다. 함수를 살펴보면 reverseString()은 msg의 문자열을 뒤집어주는 역할, changeMsg()는 isDone의 boolean값을 바꿔주기만 한다. 예제 코드를 실행하면 나오는 첫 화면입니다. 여기서 문자열 뒤집기 버튼을 클릭하면 'Hello Vue.js!!'가 뒤집어진 문자열이 화면에 나타나게 됩니다. 이때 콘..