본문 바로가기
반응형

javascript58

코딩테스트 - 신규 아이디 추천 https://programmers.co.kr/learn/courses/30/lessons/72410 코딩테스트 연습 - 신규 아이디 추천 카카오에 입사한 신입 개발자 네오는 "카카오계정개발팀"에 배치되어, 카카오 서비스에 가입하는 유저들의 아이디를 생성하는 업무를 담당하게 되었습니다. "네오"에게 주어진 첫 업무는 새로 programmers.co.kr function solution(new_id) { const answer = new_id.toLowerCase() .replace(/[^a-z0-9-_.]/gi, '') .replace(/[.]{2,}/gi, '.') .replace(/^[.]|[.]$/gi,'') .padEnd(1, 'a') .slice(0, 15) .replace(/^[.]|[.]$/.. 2022. 3. 7.
Broadcast Channel API BroadcastChannel API는 동일한 출처의 다른 창,탭,iframe 간에 통신할 수 있는 API입니다. BroadcastChannel API로 브라우저의 다른 탭에서 현재 사이트를 열었는지 확인하거나, 사용자가 로그인하거나 로그아웃할때와 같이 동일한 출처 내의 다른 탭에서 사용자의 작업을 감지할 수 있습니다. Broadcast Channel API는 호스트가 다르면 작동하지 않습니다. https://www.abc.com/ https://abc.com/ 창 중 하나가 시크릿 모드이거나 여러 브라우저에서 (예: Firefox에서 Chrome으로)브로드캐스트 채널이 작동하지 않습니다. const bc = new BroadcastChannel('my-site'); bc.onmessage = (even.. 2022. 3. 3.
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.
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.
반응형

티스토리툴바