본격 팀 프로젝트가 시작됐다!내가 해보고싶다한 기능을 구현하기위해 테스트를 해보다가.. 예상치못하게 참고한 코드들이 하나도 이해가 안돼서 ㅎㅎㅎ ㅠㅠ한참을 고민했다..일단 기반이되는 scrollTo()를 먼저 정리해보자! window.scrollTo()문서 내 특정 좌표로 스크롤을 이동한다!SyntaxscrollTo(x, y);scrollTo(({top: y, left: x, behaviour: option}); x, y값은 이동할 거리(단위: 픽셀), behaviour는 움직임에대한 옵션을 설정할 수 있다. behaviour 옵션smooth: 부드럽게 이동instant: 한번에 이동auto: smooth를 지원하지 않는 경우, 브라우저에서 지원하는 방식으로 스크롤 (대부분 목표 위치로 즉시 이동)beh..
프로그래머스 - 달리기 경주 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문제 설명과 입출력이 직관적으로 다가와서 쉬운 편이라고 생각했으나..객체와 배열의 특징에 대해 다시 한 번 생각을 정리할 수 있는 문제였다! 문제 첫 시도 (오답)callings.forEach(player => { let curRank = players.indexOf(player); let tmp = players[curRank - 1]; players[curRank - 1] = player; players[curRank] = tmp;});return players; ind..
최종 결과 🎂 과제 목표1) HTML로 기본 구조를 만든다.2) 자바스크립트로 할 일 추가 기능을 구현한다. (입력 필드, 버튼) 🎂 추가로 시도한 것1) 할 일 완료 표시, 체크박스 꾸미기2) 할 일 삭제 기능3) 배경, 버튼 그라데이션 색상 적용4) 입력창이 빈 상태일 경우 alert 띄우기 구현 방법🥐 입력을 받아 할 일 목록에 추가하기 + 입력창이 비었을 때 alert + 삭제 추가 '할 일(task)'들은 같은 분류의 요소들이 모여있는 목록이기에 ul로 만들기로 했고, 사용자가 입력한 요소들을 li로 추가하도록 구성했다. // task 추가const taskAddButton = document.querySelector('#taskAddButton');taskAdd..
todo-list 삭제 버튼에 추가한 이벤트가 제대로 적용되는지 확인하려는데 html 파일을 실행하자마자 콘솔에 빨간 불이 들어왔다.미리 버튼을 추가해두고 테스트했을 때는 발생하지 않았는데, 기존에 있던 테스트용 요소들을 모두 지우고 실행했을 때 발생하는 것으로 보아 addEventListener는 버튼이 생기기도 전에 호출되는데 해당 아이디를 가진 object가 없으니 이런 오류가 나는구나 추측이 됐다. 알아야 할 것동적으로 생성한 요소에 이벤트를 추가하기 위해 생각해야하는 것은 다음과 같다.1) addEventListener는 EventTarget 인터페이스의 메서드로, 가장 일반적으로 DOM 객체에 어떤 이벤트가 발생했을 때 어떤 동작을 수행할지 설정하는 기능을 한다.2) createElement..
프로그래머스 대충만든 자판 문제를 풀이하다가 NaN과 논리연산에 의문이 생겨 조금 더 알아보았다! 우선 프로그래머스 문제의 조건은 다음과 같다.1) 자판에 문자가 1개 이상 할당될 수 있고, 두번째에 할당되어있는 문자를 입력하려면 해당 자판을 두번 누르면 된다.2) 문자열 배열이 주어졌을 때 그 문자들을 자판으로 입력하기위해 필요한 '자판을 누르는 최소 수'를 구한다. 내가 접근한 방법1) 자판으로 입력할 수 있는 문자들을 객체의 키로 만들고, 여러 자판을 눌렀을 때 그 문자가 나오는 가장 작은 수를 구해둔다.-> 매번 가장 작은 수를 구하지 않고 저장해뒀다가 활용하기 위함2) 문자열 배열을 돌며 각 문자를 입력하기 위해 필요한 수를 객체에서 찾아 더한다. 궁금했던 부분function solution(k..
DOM (Document Object Model, 문서 객체 모델)DOM은 HTML, XML 문서에 접근하기 위한 인터페이스이다. Javascript와 같은 언어가 문서에 접근할 수 있도록 콘텐츠, 구조, 스타일 요소를 구조화시켜 제공하고, 이를 변경할 수 있도록 한다. Javascript가 DOM을 다루는 대표적인 언어이긴 하지만, 이외의 다른 프로그래밍 언어들도 DOM에 접근하고 사용할 수 있다! DOM은 웹페이지(HTML 문서)를 트리 구조로 표현한다. 즉, 웹페이지는 하나의 최상위 노드(root 노드)에서 시작하는 자식 노드들을 가진다. 노드의 타입은 총 12개이며, 주요 노드는 아래의 4가지이다. DOM 트리의 주요 노드1) document node (문서 노드): DOM 트리 구조의 최상위 ..