모바일 메뉴가 화면에 나오면 스크롤이 일어나지 말아야 할 때도 있다. 스크롤 방지를 안 하면  스크롤 방지모바일 메뉴가 보이면 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()에 대해 정리해 보았다.반복이 필요하면 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)})//결..

블로그 제작 시 코드 문을 잘 보이게 하기 위해서 highlight.js라이브러리를 사용하다가 react문에서는 적절하게 표현되지 않아 최종적으로 react-highlight 라이브러리를 적용했다. react-highlight npm react-highlightReact component for syntax highlighting. Latest version: 0.15.0, last published: 2 years ago. Start using react-highlight in your project by running `npm i react-highlight`. There are 200 other projects in the npm registry using react-highlight.www.npm..

자바스크립트에서 특정 위치에 해당하는 문자 찾기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[..