단일 데이터 가져오기 getDoc() 컬렉션 '문서' 가져오기 (문서 참조)const docRef = doc(collection(db, "{collection}"), "{id}");"{`collection`}" : 참조할 컬렉션 명을 넣으면 된다. "{`id`}": 해당 컬렉션에서 찾을 문서`id`를 넣으면 된다.그럼 컬렉션의 id에 맞는 문서를 `docRef` 변수에서 참조할 수 있다. 문서의 데이터 가져오기const docSnap = await getDoc(docRef);docSnap.data();`getDoc()`: 문서를 참조했던 `docRef` 변수 전달문서의 `고유id`를 넣어 놨기 때문에 단일 데이터 가져옴 (조건에 맞는)`docSnap` 변수에 데이터를 포함한 각종 정보 저장`doc..
gitgit은 소스코드의 변경 사항을 추적 및 관리하는데에 사용된다. 코드의 변경 사항들이 전부 기록된다. 개인 프로젝트 및 팀 프로젝트를 관리 할 때 아주 요긴하게 사용된다. git 설치1. git을 사용하려면 설치를 해야한다. 아래 주소에서 잘 다운받고 대충 설치하면 된다. (전부 기본값으로 설치했음) Git git-scm.com git 초기화프로젝트를 `git`으로 관리하기 위해서는 초기화를 최초 1회 진행해야 한다. `git`으로 관리할 프로젝트 폴더로 이동한다. 터미널에서 `git init` 명령어를 입력한다. (최초 1회만)입력 후 폴더 내에 `.git` 이 생성된걸 확인한다.여기까지만 하면 이제부터 이 폴더는 git으로 관리되는 폴더가 되는 것이다. 💡 초기화를 했으면 코드를 저장 ..
문제명함 지갑을 만드는 회사에서 지갑의 크기를 정하려고 합니다. 다양한 모양과 크기의 명함들을 모두 수납할 수 있으면서, 작아서 들고 다니기 편한 지갑을 만들어야 합니다. 이러한 요건을 만족하는 지갑을 만들기 위해 디자인팀은 모든 명함의 가로 길이와 세로 길이를 조사했습니다. 아래 표는 4가지 명함의 가로 길이와 세로 길이를 나타냅니다.명함 번호가로 길이세로 길이16050230703603048040가장 긴 가로 길이와 세로 길이가 각각 80, 70이기 때문에 80(가로) x 70(세로) 크기의 지갑을 만들면 모든 명함들을 수납할 수 있습니다. 하지만 2번 명함을 가로로 눕혀 수납한다면 80(가로) x 50(세로) 크기의 지갑으로 모든 명함들을 수납할 수 있습니다. 이때의 지갑 크기는 4000(=80 x ..
문제S사에서는 각 부서에 필요한 물품을 지원해 주기 위해 부서별로 물품을 구매하는데 필요한 금액을 조사했습니다. 그러나, 전체 예산이 정해져 있기 때문에 모든 부서의 물품을 구매해 줄 수는 없습니다. 그래서 최대한 많은 부서의 물품을 구매해 줄 수 있도록 하려고 합니다. 물품을 구매해 줄 때는 각 부서가 신청한 금액만큼을 모두 지원해 줘야 합니다. 예를 들어 1,000원을 신청한 부서에는 정확히 1,000원을 지원해야 하며, 1,000원보다 적은 금액을 지원해 줄 수는 없습니다. 부서별로 신청한 금액이 들어있는 배열 d와 예산 budget이 매개변수로 주어질 때, 최대 몇 개의 부서에 물품을 지원할 수 있는지 return 하도록 solution 함수를 완성해주세요.문제가 길지만 필요한 기능만 정리해보면 ..
문제배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다. 단, 제거된 후 남은 수들을 반환할 때는 배열 arr의 원소들의 순서를 유지해야 합니다. 예를 들면,- arr = [1, 1, 3, 3, 0, 1, 1] 이면 [1, 3, 0, 1] 을 return 합니다. - arr = [4, 4, 4, 3, 3] 이면 [4, 3] 을 return 합니다. 배열 arr에서 연속적으로 나타나는 숫자는 제거하고 남은 수들을 return 하는 solution 함수를 완성해 주세요. 코드function solution(arr){ var answer = arr.filter((cur, id..
filter() 함수자바스크립트에서 `filter()` 함수는 배열의 각 요소를 조건에 맞춰 걸러 새로운 배열을 만드는 함수이다. 주어진 조건을 만족하는 요소만 담은 배열을 리턴한다. 예시const array = [1, 2, 3, 4, 5];const filteredArray = array.filter(function(element) { return element > 2;});console.log(filteredArray); // [3, 4, 5]배열 `array`에서 요소를 순회조건 `element > 2` 을 만족하는 요소만 필터링필터링된 요소를 `filteredArray`에 반환 매개변수`filter()`는 3개의 매개변수를 가진다. `element`: 배열의 현재 처리중인 요소`index`..
Emmet에밋은 HTML과 CSS 작성을 빠르게 할 수 있도록 도와주는 도구이다. 현재는 기본적으로 VS Code등 다양한 편집기에서 에밋을 지원하고있다. HTML 자동 완성우선 `` 태그를 에밋으로 생성해보자. 2가지 방법으로 생성이 가능한데 ! 혹은 html:5 를 입력하고 `tab` 키나 `enter`를 눌러주면 된다. HTML 기본 태그 생성하기 자식 태그 > > 기호로 자식이라는 것을 명시해주기만 하면 하위 태그가 생긴다. (div 하위에 ul 하위에 ui를 만들어라) 형제 태그 +div>h1+p 다시 올라가기 ^div>ul>li^ol 반복 *ul>li*5 그룹화div>(header>ul>li)..
문제0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 `numbers` 가 매개변수로 주어집니다. `numbers`에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세요. ex)[1, 2, 3, 4, 6, 7, 8, 9] => 14 코드const solution = numbers => 45 - numbers.reduce((acc, cur) => acc + cur , 0); 0~9까지의 합을 구한다(45) `reduce()` 함수를 사용하여 배열의 합을 구한다45에서 배열의 합을 빼면 숫자를 찾을 필요 없이 문제가 해결 된다 💡 reduce() 함수 알아보기 배열의 합을 구해보자 | reduce() 함수 #자바스크립트reduce 함수자..
화살표 함수함수의 정의 방식으로, 함수를 간결하게 표현 할 수 있다. 왜 이런걸 만들어서 사람 피곤하게 하니 라고 생각했었지만 자주 보고 쓰다 보면 어느 새 손에 익더라.. (아마도) 예시const add = (a, b) => a + b;console.log(add(1, 2)); // 3아주 아주 기초적인 `(a+b)`의 결과를 리턴해주는 함수다. 이런 기초적인 코드 구조가 이해 안된다면 코딩은 일찌감치 포기하지 말고 열심히 하십쇼. 정상입니다. 화살표 함수의 특징매개변수가 하나일 경우 소괄호`()` 생략 가능단일 표현식인 경우 중괄호 `{}`와 `return` 키워드 생략 가능 이번에는 함수가 어째서 저렇게 변신했는지 차례대로 살펴보자 #1 가장 익숙한 함수 모양// 가장 익숙한 함수 모양 #1fu..
reduce 함수자바스크립트에서 제공되는 함수 중 하나로, 배열의 각 요소끼리 합한 결과를 제공한다. 이제 배열의 합을 구할때 for문은 갖다 버리도록 하자. 기본구조array.reduce(callback(accmulator, currentValue, currentIndex, array), 0)매개변수 설명`callback`: 쓰는데 중요하지 않으니 패스하기로 함 (사실 설명 못하겠음)`accmulator(acc)`: (필수) 값을 누적하는 변수. 초기값으로 초기화 된다. (코드에서 맨 뒤에 보이는 0이 초기값이다.)`currentValue(cur)`: (필수) 현재 처리중인 요소`currentIndex(idx)`: 현재 요소의 인덱스`array`: 호출한 원본 배열`initialValue`: 초기값..