모바일 메뉴 오픈 시 스크롤 방지
·
React
모바일 메뉴가 화면에 나오면 스크롤이 일어나지 말아야 할 때도 있다. 스크롤 방지를 안 하면  스크롤 방지모바일 메뉴가 보이면 body에 스타일을 주어 스크롤을 방지한다.// 모바일 메뉴 오픈시 스크롤 방지 useEffect(() => { if (showMobileMenu) { document.body.style.overflowY = "hidden"; document.body.style.position = "fixed"; document.body.style.width = "100%"; document.body.style.height = "100%"; } else { document.body.style.position = "relative"; ..
map(), filter(), find()
·
Javascript
자주 사용하고 있는 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)})//결..
특정 위치에 해당하는 문자 찾기
·
Javascript
자바스크립트에서 특정 위치에 해당하는 문자 찾기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 함수
·
Javascript
자바스크립트에서 특정 문자 위치 찾는 방법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..
Set 함수
·
Javascript
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..
배열 중복 제거하기
·
Javascript
자바스크립트에서 배열 중복 제거하는 방법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()..
배열 중복 카운트
·
Javascript
자바스크립트에서 배열 중복 개수 구하기중복 개수 구하는 방법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일과 마지막일 구하기
·
Javascript
자바스크립트에서 현재 달 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일이 이전 달의 ..
switch
·
Javascript
switch 조건문복수의 if 조건문은 switch문으로 바꿀 수 있으며 switch문은 다양한 상황에서 비교할 수 있게 해준다.switch조건문은 switch문과 case문으로 구성되며 switch의 변수와 case의 상수를 비교하여 일치하면 실행, 일치하지 않으면 다음 case문으로 넘어간다.switch() 괄호 안에는 변수, 상수, 비교 연산자 등 자유롭게 설정 할 수 있지만, case 문 뒤에는 상수 값만 올 수 있다.문법switch (expression) { case caseExpression1: statements case caseExpression2: statements // … case caseExpressionN: statements default: stat..
반복문
·
Javascript
자바스크립트 반복문종류for 문for...in 문for…of 문forEach()while 문do…while 문 for 문문법: for ( [초기문]; [조건문]; [증감문] ) {반복 코드}변수 선언 시, const 를 쓰면 값 변경이 불가 하여 let 사용해야 한다.for (let i = 0; i  for…in 문문법 : for( const key in 객체 ) {반복 코드}const obj = { id: '1', user: 'Mia'}for (const key in obj){ console.log(`${key} : ${obj[key]}`);}// 결과// "id : 1"// "user : Mia" for…of 문문법 : for( const item of 이터러블 ) {반복 코드}con..
minsun309
'Javascript' 태그의 글 목록 (3 Page)