1일 1코딩) Programmers Lv1. 체육복 (탐욕법 greedy)

문제 : https://programmers.co.kr/learn/courses/30/lessons/42862?language=javascript 코드1. Note!! 항상 문제를 잘 읽으시오. 중복되어 문제해결에 도움이 안된다면 filter를 사용해서 제거하고, sort로 정렬해서 비교하시오! 화이팅!

Read more
1일 1코딩) Programmers Lv1. K번째 수 (정렬)

문제 : https://programmers.co.kr/learn/courses/30/lessons/42748 코드1. slice와 sort만 알면 크게 어려운 건 아닌거같다. splice와 slice의 차이점만 조심하면 될 듯! 다른사람의 코드2. 상위권에 있는 답안인데 다른것보다 배열 구조분해를 하고, filter를 돌려 배열을 채우는게 새로웠당. filter의 인덱스를 활용해 slice처럼 활용하기! (근데 쓸 수 있으면 slice쓰는게 좋다 다른 사람과의 소통이 더 편하니까)

Read more
1일 1코딩) Programmers Lv1. 완주하지 못한 선수

문제: https://programmers.co.kr/learn/courses/30/lessons/42576 코드1. 처음엔 반복문, includes면 금방이겠거니했다. 하지만 동명이인이 있을 수도 있다는 전제로 인해 방법을 찾다가 어차피 value는 한가지 빼고 같을테니 정렬 후 비교하게 로직을 세웠다. find()를 사용한 이유는 완주하지 못한 선수가 한 명이라는 조건으로 가능했다. 인자 함수를 통과하는 첫번째 요소만 반환될테니! 그런데 만약 완주하지 못한 선수가 한 명이 아니라면? 여기서는 생각이 나지 않아 다른 […]

Read more
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