이번에 프로젝트가 끝나가면서 rgb색상으로 그라데이션을 만드는 기능을 추가해야 할 일이 있었다. 기존 : 2가지 rgb색상으로 데이터의 개수 만큼 그라데이션을 만듦추가 : 3가지 rgb색상으로 데이터의 개수 만큼 그라데이션을 만듦 추가 되는 기능은 기존 2가지 rgb색상에 흰색을 추가하여, 중간값은 하얀색으로 나오게 하는 것이었다.데이터의 개수에 따라 그라데이션 개수도 달라진다.기존: 3개의 데이터가 있다면, 흰색->빨강으로 그라데이션 생성이번에 이거 만들면서 기존에 짜여진 코드 보고 이걸 어떻게 짰지.. 하면서 정리 해놓으려 한다.자세한 내용은 아래 링크에서 확인하길 ( 자세히 적혀 있음 )https://zzang9iu.tistory.com/31 내가 원하는 갯수 만큼 rgb색상을 그라데이션으로 만들기..
이번에 그라데이션을 정리할 때 쓴 코드인데, 외울 필요도 없고 왜 이렇게 되는 지 이해 할 필요도 없다. 그냥 아래거 갖다쓰면 된다. 물론 공부하고 싶은 사람은 공부해도 상관 없지만.. 여기서는 그냥 갖다 쓰기로 하자. 1. RGB코드 -> HSL코드 rgb2hsl = function(color) { var r = color[0]/255; var g = color[1]/255; var b = color[2]/255; var max = Math.max(r, g, b), min = Math.min(r, g, b); var h, s, l = (max + min) / 2; if (max == min) { h = s = 0; // achromatic } else { var d = max - min; s = (l ..
보통 배열 같은 경우는 그냥 length를 함께 쓰면 길이값이 구해진다. 그런데 객체의 길이값을 구하기 위해서는 Object.keys를 함께 써야 구할 수 있다. 기본 문법은 아래와 같다. Object.keys([객체명].values).length ============================================================================ 아래는 실제로 안에 키/값 이 있는 객체의 길이를 구해본 것이다. 이렇게 range라는 객체의 길이가 49라는 것을 알 수 있었다.
오늘 v-for문을 이용해서 리스트를 출력하는데 아래와 같은 에러가 발생했다. error: Elements in iteration expect to have 'v-bind:key' directives (vue/require-v-for-key) 이건 그냥 component에서 v-for문을 쓸 때 key값을 설정하라는 말이다. 지금까지는 그냥 Vue 인스턴스에서 v-for문을 자주 쓰기도 했고, 해당 기능은 Vue 2.2.0버전에 생겼다고 한다. 그래서 지금까지는 못 본 에러가 아닐 까 쉽다. 해결법은 간단하다. 그냥 v-for문을 입력한 태그에 v-bind:key만 넣어주면 된다.
javascript를 쓰다보면 배열을 합치거나, 새로운 속성을 추가하는 일이 많은데, 그때 많이 쓰는게 바로 push와 concat 함수이다. 자주 쓰지만, 설명해보라고 하면 어버버.. 할 것 같다. 그래서 정리해본다. ============================================================================ 가장 큰 차이점은 아래와 같다. 1. push는 기존 배열에 원소를 추가한 뒤 총 길이를 리턴한다. 2. concat은 기존 배열에 원소를 추가한 뒤 새로운 배열을 리턴한다. 즉, push는 기존 배열의 데이터가 수정되고, concat은 새로운 배열을 리턴하기 때문에 기존 데이터는 변경되지 않는다. 사용법은 아래와 같이 사용한다. 1. push : 결과..
오늘은 javascript에서 지원하는 flat 함수를 정리해보겠다. 카카오API를 가져오는 공부를 하는데.. 주소를 가져올 때 배열을 3개, 4개 씩 가져오는 것이었다.. Vue의 v-for 디렉티브를 이용할 때는 배열이 1개인 게 뿌려주기 쉽기 때문에, 배열을 합쳐줘야 하는데... 그냥 push나 concat을 이용하여 합쳐주니 다음과 같은 모습이 되었다.. 우선 내가 배열을 3개 만들었고, resultArray라는 배열을 만들어 그 안에 push해주고 있다. 그런데 resultArray에는 다음과 같이 담겼다.. 즉 배열안에 배열이 들어갔다는 말이다. 나는 배열안에 배열을 넣는 게 아닌, 배열안에 있는 객체들을 resultArray에 넣고 싶은데... 그때 사용 할 수 있는 게 flat함수이다. 이..