반응형 전체 글127 MutationObserver로 DOM 변화 감지 MutationObserver 는 DOM의 변화를 감시합니다. 특정 Node를 target으로 정해 observe 함수를 실행하여 감시하다가 해당 target에 변경이 일어나면 대상 node의 변화된 정보를 가져옵니다. // 대상 node 선택 const target = document.getElementById('id'); // 감시자 인스턴스 만들기 const observer = new MutationObserver(mutations => { mutations.forEach(m => { console.log(m); }); }); // 감시자 설정 const config = { attributes: true, childList: true, characterData: true } // 감시 시작 obse.. 2021. 12. 7. 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. Vue 환경변수 Vue에서 환경변수를 사용하기 위해서는 프로젝트 루트경로에 .env 파일을 생성해야한다. .env 파일은 키 = 값 형태로 정의할 수 있고 반드시 앞에 VUE_APP_을 붙여줘야한다. 개발 모드와 배포 모드를 구분하여 환경을 구성해야 한다. VUE_APP_API_URL=http://localhost:8888 .env 파일은 .env.development와 .env.production 파일에 없는 공통 값을 지정하기 위해 사용한다. .env.development는 npm run serve를 별다른 옵션없이 사용하면 development 환경으로 인식하기 때문에 이 환경변수를 사용한다. .env.production 파일은 배포 모드에서만 동작한다. 환경변수를 테스트할때는 npm run serve를 다시 실행.. 2021. 9. 7. 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. querySelector로 index 조회 jquery의 index()처럼 특정 nodeList가 몇번째 index인지 조회하는 방법입니다. 아래와 같이 active class를 갖고있는게 몇번째 index인지 찾습니다. list1 list2 list3 list4 // jquery $('.nav .active').index(); // 2 // vanilla js Array.from(document.querySelectorAll('.nav li')).indexOf(document.querySelector('.active')); // 2 ES2015에서 추가된 Array.from() 메서드를 사용하면 NodeList나 HTMLCollection을 배열로 반환 받을 수 있습니다. 2021. 8. 3. for loop에서 async/await 개발을 진행하다 보면, 각 Array에 대한 item을 비동기 처리를 해야하는 경우가 생깁니다. ES2017(ES8)의 async , await 등장으로 이전에 사용하던 callback 및 promise.then을 이용한 처리보다 더 직관적으로 비동기 처리를 할 수 있게 되었습니다. async function processArray(arr){ arr.forEach(item => { await func(item); }); } 이 코드는 syntax error가 발생합니다. 왜냐하면 processArray 함수는 async로 선언되었기 때문에 비동기 함수이지만 forEach내 익명 함수는 동기식이기 때문입니다. for...of문 사용 const a = [1,2,3]; async function process.. 2021. 7. 5. 이전 1 ··· 3 4 5 6 7 8 9 ··· 22 다음 반응형
