보호되어 있는 글입니다.

리셋버튼을 누르면 선택으로 바뀌게 하기 선택 바나나 딸기 사과 리셋 const select = document.querySelector('select'); const button = document.querySelector('button'); select.addEventListener('change', function () { const value = select.options[select.selectedIndex].value; console.log(value); }); button.addEventListener('click', function () { select.options[0].selected = true; }); 버튼을 클릭했을 때 select.options[0]는 선택 태그이고 select.o..

문제 S사에서는 각 부서에 필요한 물품을 지원해 주기 위해 부서별로 물품을 구매하는데 필요한 금액을 조사했습니다. 그러나, 전체 예산이 정해져 있기 때문에 모든 부서의 물품을 구매해 줄 수는 없습니다. 그래서 최대한 많은 부서의 물품을 구매해 줄 수 있도록 하려고 합니다. 물품을 구매해 줄 때는 각 부서가 신청한 금액만큼을 모두 지원해 줘야 합니다. 예를 들어 1,000원을 신청한 부서에는 정확히 1,000원을 지원해야 하며, 1,000원보다 적은 금액을 지원해 줄 수는 없습니다. 부서별로 신청한 금액이 들어있는 배열 d와 예산 budget이 매개변수로 주어질 때, 최대 몇 개의 부서에 물품을 지원할 수 있는지 return 하도록 solution 함수를 완성해주세요. 제한사항 d는 부서별로 신청한 금액이..

수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요. function solution(participant, completion) { participant.sort(); completion.sort(); for (let i = 0; i < participant.length; i++) { if (participant[i] !== completion[i]) { return participant[i] } } } console.log..

1. 사용법 폼 엘리먼트(input, textarea, select 엘리먼트)에 양방향 데이터 바인딩 가능. (Vue 인스턴스 ⇄ Template 과 같이 두 방향 모두 데이터에 접근 할 수 있도록 하는 것을 양방향 데이터 바인딩) 모든 폼 엘리먼트의 초기 value와 checked, selected 속성을 무시. 컴포넌트의 `data` 옵션 안에 있는 JavaScript에서 초기값을 선언해야 한다. (붸리베리중요!!! 까먹지말자) 2. 작동원리 v-model 속성은 v-bind와 v-on의 기능의 조합으로 동작한다. HTML 입력 요소의 종류에 따라 v-model 속성이 각각 다음과 같이 구성된다. input, textarea 태그에는 value / input checkbox, radio에는 check..

1. 절대 경로 @ : src(루트)부터 시작 2. 상대 경로 ../ : 상위 폴더로 올라갈 때 ./ : 현재 같은 폴더에 있을 때 import 단축키 html 안에 컴포넌트 파일 이름을 적다 보면 아래 굵은 글씨와 같이

1. 데이터 속성 HTML5부터는 데이터 속성이라는 개념이 생겼다. 데이터 속성은 HTML 요소의 'data-'로 시작하는 속성이다. 이러한 데이터 속성은 특정한 데이터를 DOM 요소에 저장해두기 위한 목적. 데이터 속성은 'data-' 로 시작해야 하며, 브라우저는 이러한 데이터 속성에는 어떠한 행동도 관여하지 않기 때문에 개발자는 요소에 특정한 데이터를 저장하고 싶은 경우 자유롭게 사용할 수 있다. ex ) input 태그에는 data-value 라는 데이터 속성을 내가 만들었다. 속성명은 data-value이지만 HTML 표준 속성인 value 속성과는 상관이 없다. 내가 임의로 만든 속성이므로! 2. 장점 이전과 같이 hidden으로 태그를 숨겨두고 데이터를 저장할 필요가 없다. 따라서 HTML ..

1. New Project를 누른다. 2. Vue.js 를 선택하고 프로젝트 이름을 적은 뒤, Create 3. Git > Github > Share Project on GitHub 4. Repository name 추가 설명 -App.vue가 메인페이지 npm이란? Node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램 -HTML로 컴파일 웹브라우저는 vue 파일을 해석할 수가 없다. 그래서 App.vue 파일을 html로 바꿔준다. (이것을 컴파일이라고 한다.) 사실은 index.html 이 메인 페이지! -Main.js 인스턴스 라우터를 연결해줌 -각 폴더별 설명

Memory Heap: 메모리 할당이 일어나는 곳 Call stack: 코드 실행에 따라 스택 프레임이 쌓이는 곳 Web APIs : DOM, AJAX, Timer 등 브라우저에서 제공하는 api Callback queue : 콜백 함수들이 대기하는 곳 Event Loop : call stack이 비워질 때마다 callback queue에 대기 중인 콜백함수가 있다면, callback 함수를 call stack에 보내줌. 자바스크립트는 싱글 스레드(single-threaded) 언어이기 때문에, 한 번에 하나의 작업만 처리할 수 있습니다. 하지만 이벤트 루프(event loop)라는 메커니즘을 통해 비동기(asynchronous) 처리가 가능해집니다. 이벤트 루프는 자바스크립트 엔진이 비동기 작업을 처리..

1. fill() 배열의 start index부터 end index 전까지(end index는 미포함) value값으로 채워주는 함수 파라미터 value 배열에 채울 값을 지정합니다. start value 값을 채울 배열의 시작 index입니다. 입력하지 않으면 기본값은 0입니다. end value 값을 채울 배열의 종료 index입니다. 입력하지 않으면 기본값은 배열의 길이(arr.length)입니다. 리턴값 지정한 값으로 채워진 배열을 리턴합니다. const arr1 = [1, 1, 1, 1]; console.log(arr1.fill(2)); // [2, 2, 2, 2] const arr2 = [1, 1, 1, 1]; console.log(arr2.fill(2, 1)); // [ 1, 2, 2, 2 ..

1. 개념 Vue를 사용하면 직접 Dom요소에 접근할 경우가 거의 없다. 하지만 가끔 Dom을 직접 접근하여 컨트롤 해야 될 경우가 생길 수 있다. (아마 특정 영역에 focus를 주기 위해 많이 사용하지 싶다.) 이때 사용하는 속성이 $ref 이다. (자바스크립트의 querySelector, getElementsByClassName, getElementById 와 같은 역할) 2. 장점 자식 컴포넌트에 직접적으로 접근할 수 있음 DOM 조작 메서드 없이 편리하게 엘리먼트를 조작할 수 있음 3. $ref 기본기 ref="target" 1. 접근하고 싶은 태그에 ref 속성명을 할당 2. ref는 id처럼 중복이 불가능 console.log('target', this.$ref.target) 1. $refs..

function zigZag(){ let num = 0; for (let i = 1; i

1. event.preventDefault 기본(default)를 막다(prevent)라는 단어에서 유추 할수 있듯이 html에서 표준으로 제공하는 태그의 기본 이벤트 발생을 막는 메서드입니다. 예를 들어 앵커태그 태그는 각각 페이지 이동이나 form 데이터 전송 등의 기본 이벤트들이 있는데 preventDefault() 메서드를 통해 해당 이벤트 발생을 막을 수 있습니다. 이벤트 흐름의 어떤 단계에서라도 preventDefault()를 호출하면 이벤트를 취소합니다. 즉, 이벤트에 대한 구현체의 기본 동작을 실행하지 않습니다. Event.cancelable을 사용해서 이벤트의 취소 가능 여부를 알아낼 수 있습니다. 취소 불가능한 이벤트에 대해 preventDefault()를 호출해도 아무 효과가 없습니다..

1.정의 주어진 배열의 값들을 오름차순으로 접근해 callbackfn을 통해 true를 반환하는 요소를 기준으로 신규 배열을 만들어 반환한다. 콜백함수의 인자는 순서대로 값(value), 인덱스(index), 원 배열(array)이다. let numbers = [1, 4, 9] let parameters = numbers.filter((num, index, arr) => {console.log(num, index, arr)}) // 결과 1 0 [ 1, 4, 9 ] 4 1 [ 1, 4, 9 ] 9 2 [ 1, 4, 9 ] 2. 사용법 const person = [ { name: 'a', money: 500000 }, { name: 'b', money: 400000 }, { name: 'c', money:..

Fetch fetch는 원격 저장소의 데이터를 로컬에 가져오기만 한다. pull 을 실행하면, 원격 저장소의 내용을 가져와 자동으로 병합 작업을 실행하게 됩니다. 그러나 단순히 원격 저장소의 내용을 확인만 하고 로컬 데이터와 병합은 하고 싶지 않은 경우에는 fetch 명령어를 사용할 수 있습니다. fetch 를 실행하면, 원격 저장소의 최신 이력을 확인할 수 있습니다. 이 때 가져온 최신 커밋 이력은 이름 없는 브랜치로 로컬에 가져오게 됩니다. 이 브랜치는 'FETCH_HEAD'의 이름으로 체크아웃 할 수도 있습니다. 예를 들어, 로컬 저장소와 원격 저장소에 B에서 진행된 커밋이 있는 상태에서 fetch 를 수행하면 아래 그림과 같이 이력이 남겨집니다. 이 상태에서 원격 저장소의 내용을 로컬 저장소의 '..