Javascript array method 간단 정리 – 1

자바스크립트 배열을 유용하게 조작할 수 있는 메소드를 정리해보려고 한다! 출처는 mdn이고, 제목 그대로 간단 정리니까 더 유용한 예는 직접 만들어보면서 찾아보기로! 이번 글에서 다룰 메소드 = [pop, concat, every, fill, filter, find, findIndex, indexOf, includes, flat, forEach, join] # array method pop() : 배열의 마지막 요소를 제거하고 반환 concat() : 인자로 받은 배열이나 값을 기존 […]

Read more
1일 1코딩) Programmers Lv1. 두 개 뽑아서 더하기

문제 : https://programmers.co.kr/learn/courses/30/lessons/68644 코드 1. 내가 푼거 (처음에는 모든 인덱스를 다 돌았다 반성하자!) 코드 2. 어느 배우신 분의 코드 미쳤다 미쳤어! spread operator에다가 new Set 까지.. 오늘의 공부는 이것이다. 느낀점 역시 코딩은 재능인가. 좋은 코드보고 사고하는 법을 많이 배워야겠다.

Read more
1일 1코딩) Programmers Lv1. 크레인 인형뽑기 게임

문제 ) https://programmers.co.kr/learn/courses/30/lessons/64061 코드 1 (내 마음에 드는거) 코드 2) (프로그래머스 컴파일이 픽한 코드) – 왜 이 코드가 픽되었는지 궁금.. 속도가 더 빠른거면 왜 빠른지도…(아시는 분 댓글 주시면 감사하겠습니당) 주변 개발자들에게 조언을 구해야겠다! 느낀 점! 나는 난독이 문제다. 글을 읽고 이해하는 연습부터 해야겠다. 그리고 이해가 안될때는 배열을 그리면서 해보자!

Read more
(Vanilla JS) form 유효성 검사(정규식 이용, 빈 값 검사)

처음 프로젝트를 하면서 js form 유효성 검사를 하게 되면서 공부함 이름이나 전화번호 같이 정해진 형식이 있는 경우나 빈 입력값이 있으면 안될 경우엔 서버로 데이터를 전송하기 전에 front단에서 먼저 검증을 해야함 정규식 패턴 이용 : 먼저 형식별로 변수를 지정한 후에, 조건문에서 검증할 수 있음 검증예시 2. 체크박스에 빈 값 검사 : 반복문을 이용해 checked값이 True인 경우만 […]

Read more
ScrollIntoView() : Navigation 클릭하면 해당 Section으로 이동

오늘의 정리 1. Navigation을 클릭하면 해당 Section으로 부드럽게 이동하는 기능 구현 2. Coding HTML (먼저 HTML에서 Navigation에 dataset을 이용해 이동할 section name을 넣어놓는다.) JS nav__menu.addEventListener(“click”, (event) => { const target = event.target; const link = target.dataset.link; const elem = document.querySelector(link); elem.scrollIntoView({ behavior: “smooth” }); }); 3. 설명 navbar에 click event를더하고, event parameter의 target을 이용해 클릭한 […]

Read more
Header scroll-animation : 스크롤 내리면 Background 색상 변경

오늘의 정리 1. 스크롤을 내릴 때 transparent => 색상이 변하는 기능을 구현하기 2. Coding const header = document.querySelector(“#header”); const headerHeight = header.getBoundingClientRect().height; window.addEventListener(“scroll”, () => { if (window.scrollY > headerHeight) { header.setAttribute(“style”, “background: white;”); } else { header.setAttribute(“style”, “background: transparent;”); } }); 3. 설명 해당 DOM의 높이를 변수로 잡는다. – getBoundingClientRect().height; window에 scroll 이벤트를 더한 […]

Read more