전체 글(183)
-
[JS] reset 버튼
리셋버튼을 누르면 선택으로 바뀌게 하기 선택 바나나 딸기 사과 리셋 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..
2022.01.20 -
예산
문제 S사에서는 각 부서에 필요한 물품을 지원해 주기 위해 부서별로 물품을 구매하는데 필요한 금액을 조사했습니다. 그러나, 전체 예산이 정해져 있기 때문에 모든 부서의 물품을 구매해 줄 수는 없습니다. 그래서 최대한 많은 부서의 물품을 구매해 줄 수 있도록 하려고 합니다. 물품을 구매해 줄 때는 각 부서가 신청한 금액만큼을 모두 지원해 줘야 합니다. 예를 들어 1,000원을 신청한 부서에는 정확히 1,000원을 지원해야 하며, 1,000원보다 적은 금액을 지원해 줄 수는 없습니다. 부서별로 신청한 금액이 들어있는 배열 d와 예산 budget이 매개변수로 주어질 때, 최대 몇 개의 부서에 물품을 지원할 수 있는지 return 하도록 solution 함수를 완성해주세요. 제한사항 d는 부서별로 신청한 금액이..
2022.01.17 -
완주하지 못한 선수
수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 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..
2022.01.17 -
[Vue] v-model
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..
2022.01.13 -
[Vue] 절대경로 상대경로
1. 절대 경로 @ : src(루트)부터 시작 2. 상대 경로 ../ : 상위 폴더로 올라갈 때 ./ : 현재 같은 폴더에 있을 때 import 단축키 html 안에 컴포넌트 파일 이름을 적다 보면 아래 굵은 글씨와 같이
2022.01.13 -
[JS] 데이터 속성 (data-xxx)
1. 데이터 속성 HTML5부터는 데이터 속성이라는 개념이 생겼다. 데이터 속성은 HTML 요소의 'data-'로 시작하는 속성이다. 이러한 데이터 속성은 특정한 데이터를 DOM 요소에 저장해두기 위한 목적. 데이터 속성은 'data-' 로 시작해야 하며, 브라우저는 이러한 데이터 속성에는 어떠한 행동도 관여하지 않기 때문에 개발자는 요소에 특정한 데이터를 저장하고 싶은 경우 자유롭게 사용할 수 있다. ex ) input 태그에는 data-value 라는 데이터 속성을 내가 만들었다. 속성명은 data-value이지만 HTML 표준 속성인 value 속성과는 상관이 없다. 내가 임의로 만든 속성이므로! 2. 장점 이전과 같이 hidden으로 태그를 숨겨두고 데이터를 저장할 필요가 없다. 따라서 HTML ..
2022.01.10 -
[WebStorm] 프로젝트를 깃허브로 연결하기
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 인스턴스 라우터를 연결해줌 -각 폴더별 설명
2022.01.06 -
[JS] 동작원리 (Stack, Queue, event loop)
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) 처리가 가능해집니다. 이벤트 루프는 자바스크립트 엔진이 비동기 작업을 처리..
2022.01.04 -
[JS] fill
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 ..
2022.01.03 -
[Vue] Dom접근 하기 - $ref, $refs
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..
2022.01.03 -
zigzag
function zigZag(){ let num = 0; for (let i = 1; i
2021.12.21 -
[JS] event.preventDefault()
1. event.preventDefault 기본(default)를 막다(prevent)라는 단어에서 유추 할수 있듯이 html에서 표준으로 제공하는 태그의 기본 이벤트 발생을 막는 메서드입니다. 예를 들어 앵커태그 태그는 각각 페이지 이동이나 form 데이터 전송 등의 기본 이벤트들이 있는데 preventDefault() 메서드를 통해 해당 이벤트 발생을 막을 수 있습니다. 이벤트 흐름의 어떤 단계에서라도 preventDefault()를 호출하면 이벤트를 취소합니다. 즉, 이벤트에 대한 구현체의 기본 동작을 실행하지 않습니다. Event.cancelable을 사용해서 이벤트의 취소 가능 여부를 알아낼 수 있습니다. 취소 불가능한 이벤트에 대해 preventDefault()를 호출해도 아무 효과가 없습니다..
2021.12.16 -
[JS] Filter()
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:..
2021.12.15 -
[Git] fetch
Fetch fetch는 원격 저장소의 데이터를 로컬에 가져오기만 한다. pull 을 실행하면, 원격 저장소의 내용을 가져와 자동으로 병합 작업을 실행하게 됩니다. 그러나 단순히 원격 저장소의 내용을 확인만 하고 로컬 데이터와 병합은 하고 싶지 않은 경우에는 fetch 명령어를 사용할 수 있습니다. fetch 를 실행하면, 원격 저장소의 최신 이력을 확인할 수 있습니다. 이 때 가져온 최신 커밋 이력은 이름 없는 브랜치로 로컬에 가져오게 됩니다. 이 브랜치는 'FETCH_HEAD'의 이름으로 체크아웃 할 수도 있습니다. 예를 들어, 로컬 저장소와 원격 저장소에 B에서 진행된 커밋이 있는 상태에서 fetch 를 수행하면 아래 그림과 같이 이력이 남겨집니다. 이 상태에서 원격 저장소의 내용을 로컬 저장소의 '..
2021.12.14 -
[Git] stash
1. 윈도우 기준 Ctrl + Shift + A 누른다. 그러면 위와 같은 Actions 검색란이 뜬다. 여기서 stash를 검색한다. 2. 가장 위에 Stash Changes 를 눌러 stash를 진행한다. 메세지는 알기 쉽게 적어주고, create stash 누르면 끝 3. 그리고 다시 액션을 검색 한 뒤에, 이번엔 Unstash Changes 를 클릭한다. 그러면 위처럼 내가 Stash 해둔 목록이 나온다. 클릭한 뒤에 그 Stash에서 달라진 파일이 어떤것들인지 볼 수 있고 Drop을 하면 해당 Stash를 지울 수 있으며 Clear를 하면 전체 Stash를 지워버린다. 그리고 가장 중요한, 그 Stash 시점으로 돌아가려면 Apply Stash를 누르면 된다.
2021.12.14 -
[JS] 마우스 이벤트 종류
1. click 사용자해 해당 element를 클릭했을 때(버튼을 눌렀다가 떼었을 때) 발생 합니다. 2. mousedown 사용자가 해당 element에서 마우스 버튼을 눌렀을 때 발생합니다. 3. mouseup 사용자가 해당 element에서 눌렀던 마우스 버튼을 떼었을 때 발생합니다. 4. dblclick 사용자가 해당 element에서 마우스 버튼을 더블 클릭했을 때 발생합니다. 5. mousemove 사용자가 해당 element에서 마우스를 움직였을 때 발생합니다. 6. mouseover 사용자가 마우스를 해당 element 바깥에서 안으로 옮겼을 때 발생합니다. 7. mouseout 사용자가 마우스를 해당 element 안에서 바깥으로 옮겼을 때 발생합니다. 8. mouseenter 사용자가 ..
2021.12.10 -
[JS] 이벤트 버블링 / 캡쳐링 / 위임
1.이벤트와 이벤트 핸들링 자바 스크립트의 대부분의 코드는 이벤트(event)에 의해 동작된다. 이벤트란 클릭이라던가 키 입력 같이 사용자가 행하는 모든 동작을 의미하는데, 이러한 이벤트가 발생했을 때 이에 맞는 상황을 지정해주고 처리하는 것을 이벤트 핸들링이라 한다. element.addEventListener(event, function, useCapture) 위처럼 addEventListener()를 사용할 때, 세 번째 인자인 useCapture와 관련된 개념이 바로 이벤트 버블링(Bubbling)과 캡쳐링(Capturing)이다. default 값은 false (버블링)이며, true로 변경 시 캡쳐링을 통해 이벤트를 전파한다. 2. 이벤트 버블링 이벤트 버블링은 특정 화면 요소에서 이벤트가 발..
2021.11.30