음악, 삶, 개발

위와 같이 일러스트레이터에서 만든 path 들의 모음이 있다. 이를 VSCode 로 복붙해보면.. 이렇게 각각의 path 태그로 연결이 된다. 하지만 이렇게 path 값이 분리되어있으면 사용하기 불편하다. path 안에 d 값을 하나의 변수로 저장해서 사용하는것이 용이하기때문이다. 따라서 이때는 일러스트레이서 Compound path 로 만들어줘야한다. Compound path 를 만드는 방법은 전체 path 들을 선택후 단축키 Cmd + 8 이다. 이제 다시 VSCode 에서 복붙하면... 위와 같이 하나의 path 태그안에 d 속성값으로 들어가있는것을 볼수있다. 여기서 style 안에 0 0 512 512 값을 viewBox 로 사용하고 d 안에 값을 path 값으로 사용하면 된다.

우리가 생각하는 드래그는 3개의 정확히 부분으로 나뉜다. 1. 'mousedown' 2. 'mousemove' 3. 'mouseup' 'mousedown' 이 발생했을시, 'mousemove' 와 'mouseup' 의 eventListener 가 등록되어야하며, 'mouseup' 리스너는 결과적으로 'mousemove' 와 자기자신에 대한 listener 를 제거해야한다. 이 listener 의 추가와 제거는 동일한 콜백함수의 reference 로 이루어진다. 절대 익명 함수로 작성하지말고, 독립된 변수를 만들어 함수객체를 생성후, 인자로 넘겨야한다. const mouseDown = (x, y) => { const mouseMove = (e) => { // Do something in Move (a.k...

Canvas 성능 향상의 포인트는 최대한 Canvas 에 직접적으로 무언가를 지시하는 횟수를 줄이는것이 관건이다. 즉 Context 에 곧바로 지시하는 횟수를 최소화하는것이다. Canvas 에서도 기본적으로 context.lineTo 같은것들을 지원하지만, Path2D 객체를 사용하여 그릴 경로를 먼저 다 정한뒤에, 이 객체를 fill 이나, stroke 의 인자로 넘겨야하는것이다. 만약에 100만개의 사각형을 그린다고 생각해보라. const drawAlotOfRects = (context) => { const amount = 1000000 context.strokeStyle = 'white' for (let i = 0; i < amount; ++i) { const p = new Path2D() p.re..

위와 같이 font-size 를 변경했음에도, 크롬의 font 가 변경되지않았다. 원인은 크롬 확장팩이었다. 이것때문에 몇시간을 소비하여, 너무 열받아 글을 남겨놓으려한다. 어떤 확장팩이 뒤에서 !important 를 겁나게 달아서, 지맘대로 style 태그를 날리고있었다... 리액트로 개발할때, 크롬 확장팩은 설치하지않는것이 좋다 !!! 혹시 내가 CSS 를 먹이지않았음에도, 자동으로 버튼이 스타일링되거나 했다면, 무조건 크롬 확장팩이 뒤에서 style 태그를 js 로 쏴주고있어서, 크롬 개발툴로 들어가 추적해서 찾아내야한다.. 왜 이 이야기를 하냐면... dark reader 와 같은 CSS 를 변경해주는 확장팩이 아닌.... 다른 용도의 확장팩임에도 style 태그를 뒤에서 지맘대로 쏴준다는것이다...

Array 의 대부분의 메소드들은 콜백함수를 인자로 넘기게되는데, 이때 인자가 하나만 들어가는 콜백함수의 경우 굳이 () 를 하지않아도 된다. const arr = [1, 2] const good = arr.map(item => item * 100) const bad = arr.map((item) => item * 100) // 굳이 (item) 안해도됨, 그냥 item 으로.

Array 가 제공하는 함수들의 강력한점은 composition 한 일들을 구사할수있는것이다. 아래는 나이가 40세 이상일 경우 이 나이들을 string 으로 변환하는 코드이다. const people = [ { name : 'kim', age : 10 }, { name : 'seo', age : 35 }, { name : 'choi', age : 45 }, { name : 'park', age : 55 }, ] const oldPeople = people .map((p) => p.age) // age 만으로 이루어진 배열 return .filter((age) => age >= 40) // 이 배열에서 다시 40 이상인 요소들만으로 이루어진 배열 return .join('_') // 요소사이에 _ 삽입하..

reduce 는 배열의 요소들의 특정 프로퍼티의 합을 계산한다던지 하는 counter 를 만들때 유용하다. 콜백함수의 첫번째 인자값은 계속해서 누적 되게된다. 이 reduce 의 두번째 인자로는, 콜백 함수의 첫번째 인자의 초기값을 넘기게된다. const people = [ { name : 'kim', age : 10 }, { name : 'seo', age : 20 }, { name : 'choi', age : 30 }, ] const ageTotal = people.reduce((counter, person) => counter + person.age, 0) console.log(ageTotal) // 60 아래는 더 쉬운 예제...

some 은 Array 의 요소들중 하나라도 내가 정한 조건에 충족하면 true 를 return 하는 함수이다. 인자로 조건을 확인하는 콜백함수를 넘기게된다. const people = [ { name : 'kim', age : 10 }, { name : 'seo', age : 64 }, { name : 'choi', age : 55 }, ] const hasOldPeople = people.some((p) => p.age >= 50) console.log(hasOldPeople) // true 반면 every 는 모든 조건이 충족해야만 true 를 return 하게 된다. some : 배열중에 어떤 것이라도 하나 만족되는것이 있는지 없는지 확인할때 사용. every : 모든것이 만족되는지 ..

map 은 Array 에서 각 요소들을 다른 방식으로 매핑해주는것이다. 또는 각 요소들이 객체일 경우, 일부 property 만을 추출하는 새로운 array 로 만들때도 유용하다. const people = [ { name : 'kim', age : 10 }, { name : 'seo', age : 64 }, { name : 'choi', age : 55 }, ] const ages = people.map((p) => p.age) console.log(ages) // [10, 64, 55]

Array 의 filter 함수를 사용하면, 특정 조건이 맞는 요소들만을 가진 새로운 Array 를 얻을수있다. 다음 코드는 50세 이상의 사람들만을 추출하는 코드이다. const people = [ { name : 'kim', age : 10 }, { name : 'seo', age : 64 }, { name : 'choi', age : 55 }, ] const oldPeople = people.filter((p) => p.age >= 50) console.log(oldPeople) // [ { name: 'seo', age: 64 }, { name: 'choi', age: 55 } ] 당연히 oldPeople 이 가진 요소들은 people 의 요소들의 reference 이다. 따라서 oldPeople..