Javascript

[Javascript] JS로 간단하게 상단 이동 버튼 만들기 - scrollTo()

요즘 목록 페이지들은 대부분 무한 스크롤 형태로 구현되어 있다. 예전과 같은 페이지네이션 형태를 채택하는 서비스는 점점 줄어드는 중이다. 이런 무한 스크롤 리스트의 경우, 사용자의 경험을 위해 필히 상단으로 이동하는 버튼을 만들어야 한다. 아주 간단한 자바스크립트 메소드로 해결 가능! Window.scrollTo() Javascript는 Window.scrollTo()라는 메소드를 제공한다. 해당 메소드는 Window 내에서 원하는 위치로 스크롤을 이동시킬 수 있다. // 기본 형태 window.scrollTo(x-좌표, y-좌표) scrollTo의 인자로 behavior를 추가하면 모션 설정도 가능하다. // behavior에는 auto와 smooth를 입력할 수 있다. (기본값은 auto) windo..

[Javascript ] substr() / substring() - 문자열 자르기

substr() 문자열을 자르는 메서드. 문자열의 특정 위치에서 시작해 일정 길이의 문자를 반환한다. 기본 형태는 다음과 같다. str.substr(start[, length]) substring() 문자열을 자르는 메서드. 대상 문자열의 시작 인덱스로부터 종료 인덱스 전까지의 문자열을 반환한다. 기본 형태는 다음과 같다. str.substring(indexStart[, indexEnd]) substr()와 substring()의 차이 substr의 두 번째 인자는 반환할 문자의 총 개수를 지정한다. 반면 substring의 두 번째 인자는 종료 인덱스를 지정한다. (slice와 유사) 예시를 통해 두 가지 메서드의 차이점을 확인해보자. // substr let str = "abcdefg"; str.su..

[Javascript] Array.reverse() - 배열 순서 반전

reverse() reverse() 메서드는 배열의 순서를 반전한 값을 반환한다. a.reverse() 사용 예시 const a = [1, 2, 3]; console.log(a); // [1, 2, 3] a.reverse(); console.log(a); // [3, 2, 1] https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse Array.prototype.reverse() - JavaScript | MDN reverse() 메서드는 배열의 순서를 반전합니다. 첫 번째 요소는 마지막 요소가 되며 마지막 요소는 첫 번째 요소가 됩니다. developer.mozilla.org

[Javascript] 정규표현식 기초 - 정규표현식 패턴

정규표현식이란? 정규표현식이란 특정 패턴의 문자열을 찾기 위한 표현 방식으로, 잘 이용하면 Javascript를 이용한 검증 과정을 보다 간단하게 만들 수 있다. 가장 간단하게 접근할 수 있는 test 메소드를 이용한 정규표현식 검증부터 살펴보자. 정규표현식 만들기 정규표현식은 두 개의 슬래쉬( / ) 안에 입력한다. 휴대폰 번호를 검증하는 정규표현식 예시를 통해 기본 형태를 살펴보자. const re = /010-\d{3,4}-\d{4}/ // \d{3,4}는 3글자이거나 4글자인 숫자, \d{4}는 네글자인 숫자를 의미한다. re.test("010-9123-4567") // true 위의 정규 표현식은 대상 객체가 010-{3~4글자의 숫자}-{4글자의 숫자}로 이루어져있으면 true를 반환한다. 요..

[Javascript] Object.keys() / Object.values() / Object.entries() / Object.assign()

Object.keys() Object.keys()는 대상 객체의 key 값을 모아 배열로 반환한다. Object.values()는 대상 객체의 value 값을 모아 배열로 반환한다. const object1 = { a: 'somestring', b: 42, c: false }; console.log(Object.keys(object1)); // ["a", "b", "c"] Object.values() Object.values()는 대상 객체의 value 값을 모아 배열로 반환한다. const object1 = { a: 'somestring', b: 42, c: false }; console.log(Object.values(object1)); // ["somestring", 42, false] Object..

[Javascript] Spread Operator - 스프레드 연산자, 전개 구문

Spread Operator란? 스프레드 연산자는 ES6에 추가된 문법으로 ... 와 같이 마침표 세 개로 표현한다. 스프레드 연산자를 사용하면 배열이나 문자열과 같이 반복 가능한 객체를 개별 요소로 분리할 수 있다. 스프레드 연산자, 전개 구문, 펼침 연산자 등등 여러가지 이름으로 불리며, MDN에는 전개 구문으로 번역되어 있다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax 전개 구문 - JavaScript | MDN 전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으..

[Javascript] 알파벳 대소문자 변환 - toUpperCase() / toLowerCare()

toUpperCase() toUpperCase는 문자열을 대문자로 변환해 반환한다. const sentence = 'The quick brown fox jumps over the lazy dog.'; console.log(sentence.toUpperCase()); // expected output: "THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG." toLowerCase() toLowerCase는 문자열을 소문자로 변환해 반환한다. const sentence = 'The quick brown fox jumps over the lazy dog.'; console.log(sentence.toLowerCase()); // expected output: "the quick br..

[Javascript] forEach() 반복문

forEach() arr.forEach(callback(currentvalue[, index[, array]])[, thisArg]) forEach 반복문의 기본 형태는 위와 같다. currentvalue를 필수로 하는 콜백함수를 받는다. 이 때 index까지는 자주 사용하지만 세번째 매개변수까지 사용하는 경우는 드물다. (세번째 매개변수인 array의 경우 forEach를 호출한 배열을 반환한다.) 단, map과는 다르게 forEach()는 그 결과값을 반환하지 않는다. 또한 for문과는 다르게 break, continue 등으로 반복을 제어할 수 없다. 즉, 중간에 반복을 종료할 수 없다는 뜻. 사용 예시 const arr = [1, 2, 3, 4] arr.forEach((el, i) => { con..

[Javascript] sort() - 정렬 (오름차순/내림차순/문자열 등등)

sort() sort()는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다. 이 때 매개변수를 활용해 어떻게 정렬할 것인지 순서를 지정해줄 수 있다. // 기본 형태 arr.sort([compareFunction]) // compareFunction은 정렬 순서를 정의하는 함수 정렬하는 방법 compareFunction(a, b)가 생략된 경우, 배열들이 유니코드 값 순서대로 정렬된다. compareFunction(a, b)가 반환하는 값이 0보다 작은 경우에는 a가 b보다 먼저 온다. compareFunction(a, b)가 반환하는 값이 0보다 큰 경우에는 b가 a보다 먼저 온다. compareFunction(a, b)가 0을 반환할 경우 정렬 순서를 변경하지 않는다. compareFunc..

[Javascript] toString() - 문자열로 변환 +α

toString() obj.toString() // 기본 형태 객체를 문자열로 변환한다. String(obj)와 동일한 기능을 하지만, 주요한 차이가 몇 가지 있다. 객체에 변환할 숫자가 직접 들어가 있을 경우에는 오류가 발생한다. 해당 숫자가 상수 혹은 변수값에 할당되어있을 경우에만 기능한다. (하단의 예시 1, 예시 2 참고) 변환 시 매개변수에 2부터 36까지의 숫자가 들어가있을 경우, 10진수를 해당 진수로 변환할 수 있다. (예시 3) // 예시 1 1234.toString() // 오류 // 예시 2 const aaa = 1234 aaa.toString() // "1234" // 예시 3 aaa.toString(2) // "10011010010" aaa.toString(16) // "4d2" ..