JS7 [JavaScript] elem.scrollIntoView() - 특정 요소 위치로 화면 스크롤 이동하기 javascript에서 화면의 특정 위치로 이동시켜주는 함수가 존재한다. 버튼을 눌렀을때 원하는 내용이 있는 위치로 이동시켜야 한다거나 그럴때 사용할 수 있다.scrollIntoView() 메소드가 존재하는데 element기반으로 사용하는거라 특정 element를 기준으로 스크롤을 이동시킨다. ▷ 구문element.scrollIntoView();element.scrollIntoView(alignToTop); // Boolean parameterelement.scrollIntoView(scrollIntoViewOptions); // Object parameter 보는것처럼 3개의 문법이 존재하는데첫번째로 아무 매개변수도 사용하지 않고 그냥 사용하는방법과두번째로 Boolean parameter true/fa.. 2024. 4. 30. this와 this를 지정하는 방식 call, apply, bind에 대해 알아보자 Background const stephen = { age: 12 }; function printAge() { console.log(this.age); } printAge(); // undefined 왜 age가 출력되지 않은걸까? this는 stephen이 아닌 window를 가리키고 있다. 함수는 별도의 this 지정을 안 해주면 window 객체를 가리킨다. this란 함수를 실행한 객체를 가리키는 키워드이다 함수를 호출할 때 결정된다. 전역범위에서 this는 전역객체를 가리킨다 함수에서 호출되면 this는 함수를 호출한 객체를 가리킨다 일반함수 호출이면 : 전역객체 메소드 호출이면 : 메소드가 속한 객체 생성자 함수 호출이면 :생성된 객체 이벤트핸들러에서 this는 이벤트를 발생시킨 요소를 가리킨.. 2024. 4. 20. 비동기 함수가 예상한 값 대신에 Promise { <pending> }을 반환하는 이유 만약 비동기 함수가 예상한 값 대신에 Promise { }을 반환한다면, 이는 해당 프로미스가 아직 처리되지 않았음을 의미합니다. 이러한 상황은 주로 비동기 작업을 제대로 처리하지 않았을 때 발생하는데 비동기 함수가 보류 중인 프로미스를 반환하는 일반적인 이유는 다음과 같습니다 1. await 키워드의 누락한 경우 async 함수를 사용할 때 프로미스와 함께 await 키워드를 사용하여 프로미스가 처리될 때까지 기다려야 합니다. await 없이 함수를 호출하면 즉시 보류 중인 프로미스가 반환됩니다. async function myAsyncFunction() { const result = await someAsyncOperation(); return result; } 2. 프로미스를 반환하지 않은 경우 비.. 2024. 2. 19. substr와 substring의 차이 substr와 substring은 둘다 문자열에서 부분 문자열을 추출하는 메서드이다 하지만 알고리즘 문제를 풀면서 substring의 시간, 공간 효율성이 더 좋아서 이 둘의 차이점을 파헤쳐보았다. substr(시작 인덱스, 길이) 시작인덱스부터 길이만큼의 문자열을 반환한다. 길이가 양수이면 시작인덱스부터 해당 길이만큼의 문자열을 반환하고 (좌 -> 우) 길이가 음수이면 역으로 문자열 끝에서부터 길이만큼의 문자열을 반환한다 (좌 2023. 12. 8. ++a와 a++의 차이 | for의 로직 | for과 while의 차이 | Reference란 ++a와 a++의 차이 ++는 사실 하나의 함수이며 ++a와 a++둘 다 a에 1을 더한다 하지만 1을 더하는 순서에 차이점이 있다. ++a 1을 더한값을 바로 리턴한다 function(a) { return a+1; } a++ 변수에 a를 할당하고 변수+1한 값을 리턴한다. function(a) { const oldValue = a; a+1; return oldValue+1; } 정리하자면 let b = ++a // a에 1을 더한 뒤 b에 리턴한다 let b = a++ // b에 a를 리턴한 뒤 a에 1을 더한다. 따라서 아래와 같은 상황을 주의해야한다. let a = 5; let aa = ++a // 6 a = 5; let bb = a++ // 5 for구문 안에서는 i 값을 따로 변수에 리턴하지 않.. 2023. 11. 18. Regex 1. 정규표현식 개념 정규 표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴이다. 이 패턴들은 RegExp의 exec 메소드와 test 메소드 그리고 String의 match, replace, search, split 메소드와 함께 쓰인다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions 헷갈린 개념 혹은 | 특수 문자 \ [^ ] : [ ] 이 외 ^[ ] : [ ] 로 시작 확장문자 (: backslash) s : 공백 문자(스페이스, 탭, 폼 피드, 라인 피드) b : 단어의 경계 B 이를 제외한 모든 문자 매칭 d : 숫자 D : 숫자가 아닌 문자 [^0-9] 와 동일 w : 알파벳.. 2023. 8. 25. 이전 1 2 다음