Html에 있는 select태그, option태그로는 커스텀에 한계가 있어 직접 만들어보는 방법을 알아보았다.Html기본 구조는 select태그 역할을 하는 선택된 값과 option들 값들을 분리하여 클래스 명이 selectBox인 div 태그 안에 배치 한다. drink coffee water latte jucie food pizza rice burger bread   Cs..

자주 사용하고 있는 map()과 filter()에 대해 정리해 보았다.반복이 필요하면 map(), 조건에 만족하는 모든 요소가 필요하면 filter() ,조건에 만족하는 첫 번째 요소만 필요하면 find()를 사용하면 된다.map()배열 내의 모든 요소 각각에 대하여 주어진 함수(callback 함수) 적용 후 새로운 배열을 반환한다.문법 : arr.map(callback(currentValue[, index[, array]])[, thisArg]) (Optional - index, array, thisArg)const array = [1, 4, 8, 12, 16];const parameters = array.map((x, index, arr) =>{console.log(x, index,arr)})//결..

자바스크립트에서 특정 위치에 해당하는 문자 찾기charAt()문자열에서 특정 인덱스에 위치하는 유니코드 단일 문자를 반환한다.문자열의 마지막 문자 순번은 stringName.length - 1 이다.index를 제공하지 않으면 기본 값은 0이며 index가 문자열 길이를 벗어나면 빈 문자열을 반환한다.범위를 벗어나는 값이 입력되면 빈 문자열 (””)을 리턴 한다.문법 : str.charAt(index);const string = "apple";console.log(string.charAt(3)) // "l"console.log(string.charAt(10)) // "" 대괄호대괄호와 index를 활용하여, 특정 index의 문자를 읽을 수 있다.범위를 벗어나는 값이 입력되면 undefined를 리턴 한..

자바스크립트에서 특정 문자 위치 찾는 방법indexOf()배열, 문자열에서 주어진 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고, 찾을 수 없는 경우 -1을 반환하며 문자열을 찾을 때 대소문자를 구분한다.문법 : indexOf(searchElement, fromIndex) ( fromIndex는 optional한 값 )const string = "abad";console.log(string.indexOf('a')); // 0const drink = ['milk', 'beer', 'coffee', 'jucie'];console.log(drink.indexOf('coffee')); // 2console.log(drink.indexOf('water')); // -1console.log(drink.index..

자바스크립트에서 배열에 요소를 추가하는 방법추가 - push() / unshift() / splice() / 배열이름[n] push()배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다.문법 : arr.push(element1[, ...[, elementN]])const array = ['A', 'B', 'C']const add = array.push('D');console.log(array) // ["A","B","C","D"]//여러개 추가할 경우const array = ['A', 'B', 'C']const add = array.push('D', 'E', 'F');console.log(array) // ["A","B","C","D","E","F"] unshift()새로운 요소를 ..

Set()Set 은 클래스(class)이므로 new 키워드와 생성자를 사용하여 객체를 생성할 수 있습니다.만약 인수를 전달하지 않으면 빈 Set 객체가 생성됩니다.const set = new Set(); // {}const set2 = new Set('apple'); // {"a","p","l","e"}  값 추가 - add() const set = new Set(); set.add(1);// {1}//연쇄적 호출set.add(1).add(2).add('apple');// {1,2,"apple"}  값 삭제 - delete() / clear()삭제하였다면 true를 반환, 삭제에 실패하였다면 false를 반환한다.set.delete(1);//{2,"apple"} clear()일괄 삭제 할 시 undefi..

자바스크립트에서 배열 중복 제거하는 방법Set()Set을 활용해 유일한 값 {"A","B","C","D","E"} 만 담은 후 전개연산자(...)를 사용하거나 Array.from()을 사용하여 유일한 값만 모여진 배열로 만들면 된다.const array = ['A','A','B','C','D','E','D','A']const uniaue = new Set(array)// 결과: {"A","B","C","D","E"}const result1 = [...new Set(array)];// 결과: ["A","B","C","D","E"]const result2 = Array.from(new Set(array));// 결과: ["A","B","C","D","E"] filter(), indexOf()indexOf()..

자바스크립트에서 객체 접근 방법키에 해당하는 값 접근점 표기법(Dot Notation)객체.key : 마침표( . )를 사용하여 프로퍼티에 접근하는 표기법장점 : 가독성이 좋다.단점 : 대소문자를 구분해서 써야 하며 변수를 포함할 수 없고, 숫자로 시작할 수 없다.괄호 표기법(Bracket Notation)객체['key'] : 대 괄호[ ] 사이에 키의 값을 '문자열' 로 넣어서 접근하는 표기법장점 : 키 값이 변수일 때 주로 사용 가능하며 대소문자를 구분하지 않고, 숫자나 공백이 사용 가능하다. const Person = { name: 'Soo', age: 24, };// 점 표기법console.log(Person.name) // Soo// 괄호 표기법con..

자바스크립트에서 배열 중복 개수 구하기중복 개수 구하는 방법forEach()const array = ['A', 'B', 'C', 'A']const result = {};array.forEach((x) => { result[x] = (result[x] || 0) + 1;})// 결과// {// A: 2,// B: 1,// C: 1// } result[x] = (result[x] || 0) + 1 설명처음 A가 들어오면 result[A] 가 없기 때문에 result[x] = 0 + 1; 여기로 가서 A : 1을 만든다. 순회하다가 중복되는 마지막 A 가 들어오면 이미 result[A]가 존재하기 때문에 result[x] = result[x] + 1 식에 따라 1을 더해 2로 만든다.if(result[..

자바스크립트에서 현재 달 1일과 마지막일 구하는 방법 const today = new Date();const year = today.getFullYear();const month = today.getMonth();// 이번달 1일, 마지막 일const firstDay = new Date(year, month, 1); const lastDay = new Date(year, month + 1, 0); // month에 1더해야함 lastDay month에 1더하고 세 번째 인자에 0을 넣은 이유getMonth()는 0부터 시작하므로, 현재 월의 다음 달을 얻기 위해 + 1을 더한다.해당 달의 0 일을 지정함으로써, 실제로는 이전 달의 마지막 날을 나타내게 됩니다. JavaScript에서는 0일이 이전 달의 ..