reduce로 객체 같은 값끼리 분류
const myArray = [ { group: "one", color: "red" }, { group: "two", color: "blue" }, { group: "one", color: "green" }, { group: "one", color: "black" } ]; // 배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값); const groupValues = myArray.reduce((acc, current) => { acc[current.group] = acc[current.group] || []; acc[current.group].push(current.color); return acc; }, {}); // 위에서 만든 객체를 key로 돌려서 새로운..
2021. 10. 26.
CSS방법론 SMACSS (Scalable and Modular Architecture for CSS)
SMACSS는 기본스타일(Base), 레이아웃스타일(Layout), 모듈스타일(Module), 상태스타일(State), 테마스타일(Theme)로 총 5가지로 나뉩니다. 이렇게 함으로 규칙과 패턴이 생기고 스타일을 이해하기 쉽게 정리합니다. 기본스타일(Base) 초기 설정을 말하며 reset.css도 포함됩니다. 아이디나 클래스 선택자를 포함하지 않으며 !important는 허용하지 않습니다. body, p, table, form, fieldset, legend, input, button ... { margin: 0; padding: 0; } 레이아웃스타일(Layout) 여러 요소를 배치하고 구별하는데 사용합니다. 주요 컴포넌트는 아이디, 하위 컴포넌트는 클래스를 사용합니다. 클래스명을 사용할때는 접두사로..
2021. 8. 6.
배열 중복 제거
Set Set은 unique값만 저장할 수 있도록 하기 때문에 array에 넣게 되면, 중복되는 값이 사라집니다. Set 을 이용하는 것 대신에 Array.from 도 가능합니다. const array = ['0', 1, 2, '0', '0', 3]; [...new Set(array)]; Array.from(new Set(array)); // ['0', 1, 2, 3] Filter filter는 array 내의 각 element 에 조건을 주어, true 값을 return 한 element 만 모아서 새로운 array 를 만드는 것입니다. 반대로 중복값만 가져올 수도 있습니다. const array = ['0', 1, 2, '0', '0', 3]; array.filter(item, index) => ar..
2021. 6. 30.
