정규표현식을 사용하여 어떤 문자열이 특정 문자열로 시작하는지, 끝나는지 확인하는 방법을 알아보겠습니다. 정규표현식을 사용하면, 정확한 문자열을 입력하지 않아도, 패턴만 입력하면 그 패턴과 일치하는 다양한 문자열 조합들을 찾을 수 있습니다. 또한, 정규식에 익숙해지면 사용하는 것도 쉽습니다. 2. 정규표현식으로 문자열 찾기 2. 특정 문자열로 시작하는 정규식 패턴 3. 특정 문자열로 끝나는 정규식 패턴 2. 정규표현식으로 문자열 찾기 RegExp.test(str)를 사용하면, 정규표현식으로 특정 패턴의 문자열을 찾을 수 있습니다. 은 문자열이 정규표현식 패턴에 해당할 때 true, 그렇지 않으면 false를 리턴합니다. 아래 예제에서 패턴은 이며, 단순하게 문자열만 포함되어있으면 test()는 true를 리턴합니다. 정규식 패턴을 사용하면 특정 문자열로 시작할 때, 끝날 때를 체크할 수 있습니다. Output: 2. 특정 문자열로 시작하는 정규식 패턴 아래 예제는 어떤 문자열이 특정…

정규표현식과, 을 사용하여 문자열의 모든 공백을 제거하는 방법에 대해서 알아보겠습니다. 1. 정규표현식으로 모든 공백 제거 2. split()으로 모든 공백 제거 1. 정규표현식으로 모든 공백 제거 함수를 이용하여, 공백 문자에 대한 정규표현식 패턴으로 공백을 찾고, 빈문자열("")로 변환하여 모두 제거할 수 있습니다. : pattern에 해당하는 문자열을 repl로 교체 는 공백 문자 1개에 대한 패턴, 는 문자열에 존재하는 모든 패턴 찾는 것을 의미 는 문자열의 모든 공백을 찾음 : 모든 공백을 빈문자열로 교체하여 제거 Output: 2. split()으로 모든 공백 제거 은 문자열을 str 기준으로 분리하여, 각각의 문자열을 배열에 담아 리턴합니다. 은 배열의 모든 요소를 하나의 문자열로 합치며, 각각의 요소 사이에 str을 추가합니다. 이것들을 이용하여, 문자열을 공백 문자로 분리하고, 각 요소들을 하나의 문자열로 합치면 공백이 제거됩니다. Output:

문자열에서 첫번째 문자를 제거하는 방법에 대해서 알아보겠습니다. 예를 들어, 가끔 문자열 앞에 가 있는 경우, 첫글자를 제거하여 깔끔하게 만들고 싶을 때가 있습니다. 예제를 통해 어떻게 구현하는지 알아보겠습니다. 1. substring()을 이용한 방법 2. slice()를 이용한 방법 3. for문을 이용한 방법 1. substring()을 이용한 방법 substring(start)은 문자열에서 start Index부터 문자열 끝까지 잘라서 문자열로 리턴합니다. 이것을 이용하여, 으로 첫글자를 제외한, Index 1부터 마지막까지 자르면 첫번째 문자만 제거할 수 있습니다. Output: 2. slice()를 이용한 방법 도 slice와 동일하게, 문자열에서 start Index부터 문자열 끝까지 잘라서 문자열로 리턴합니다. 아래와 같이 문자열에서 첫번째 문자만 제거할 수 있습니다. Output: 3. for문을 이용한 방법 for문을 사용하여 첫글자(index 0)를 제외한, 나…

배열의 요소들 중에서 가장 첫번째 값을 제거하는 방법에 대해서 알아보겠습니다. 1. slice()를 이용한 방법 2. shift()를 이용한 방법 3. splice()를 이용한 방법 1. slice()를 이용한 방법 slice(start)는 start Index에서 배열 끝까지 잘라서 리턴합니다. : 배열의 Index 1부터 끝까지 잘라서 리턴 Output: 2. shift()를 이용한 방법 shift()는 배열의 첫번째 요소를 제거하고, 그 값을 리턴합니다. 아래와 같이 첫번째 값을 제거하고, 그 값을 확인할 수 있습니다. Output: 3. splice()를 이용한 방법 splice(start, deleteCount)는 start Index부터 deleteCount 개수만큼 요소를 제거합니다. 리턴 값은 삭제된 값이 들어있는 배열이 리턴됩니다. : 배열의 Index 0에서 요소 1개 제거 Output:

문자열의 마지막 문자를 제거하는 방법에 대해서 알아보겠습니다. 예를 들어, 가끔 문자열 끝에 가 있는 경우, 마지막 문자를 제거하여 깔끔하게 만들고 싶을 때가 있습니다. 이럴 때 사용할 수 있습니다. 1. substring()을 이용한 방법 2. slice()를 이용한 방법 3. 정규표현식을 이용한 방법 4. 마지막 문자가 특정 문자인 경우만 제거 1. substring()을 이용한 방법 는 문자열에서 start Index를 포함하고, end를 포함하지 않는 범위의 문자열을 잘라서 리턴합니다. 즉, 는 Index 0에서 문자열 마지막 문자 이전까지 잘라서 문자열로 리턴하며, 이렇게 마지막 문자를 제거할 수 있습니다. Output: 2. slice()를 이용한 방법 slice()도 substring()과 동일하게 특정 범위 Index의 문자열을 잘라서 리턴합니다. 약간의 차이점이 있는데, slice의 경우 음수 범위의 Index를 입력할 수 있으며, -1은 문자열 끝 바로 이전의 I…

배열에서 마지막 요소를 제거하는 방법에 대해서 알아보겠습니다. 배열의 요소들 중에, 마지막 값만 제거해야하는 경우가 간혹 있는데요. 이럴 때 사용할 수 있습니다. 1. pop()을 이용한 방법 2. slice()를 이용한 방법 3. length를 이용한 방법 1. pop()을 이용한 방법 은 배열의 마지막 요소를 삭제하고, 삭제된 값을 리턴합니다. Output: 2. slice()를 이용한 방법 slice(start, end)는 start Index에서 end Index 이전 요소까지 잘라서 리턴합니다. 음수도 허용되며, -1은 배열의 마지막 요소의 Index를 가리킵니다. : 첫번째 요소부터, 배열의 마지막 요소 이전까지 잘라서 리턴 는 원본 배열을 변경하지 않고, 새로운 배열을 생성하여 리턴 Output: 3. length를 이용한 방법 아래와 같이 배열의 length를 1 줄이면, 배열이 길이가 하나 줄어들고, 마지막 요소가 자동적으로 삭제됩니다. Output:

숫자 앞에 있는 0을 제거하는 방법에 대해서 알아보겠습니다. 월/일을 표현할 때, 07월 04일 처럼 숫자 왼쪽에 0으로 채워진 경우가 있습니다. 왼쪽 0을 제거하는 방법을 소개합니다. 1. parseInt()를 이용한 방법 2. Number를 이용한 방법 3. 정규표현식을 이용한 방법 1. parseInt()를 이용한 방법 parseInt(str, 10)은 str을 10진수로 파싱합니다. 결과 값은 number 타입으로 리턴되며, 문자열로 다시 변환하려면 을 사용하면 됩니다. Output: 2. Number를 이용한 방법 는 문자열을 숫자로 변환합니다. 이 과정에서 숫자 앞의 0이 제거되어 number 타입으로 변환됩니다. 문자열로 다시 변환하려면 을 사용하면 됩니다. Output: 3. 정규표현식을 이용한 방법 와 정규표현식으로 0을 ""으로 변환하여 제거할 수 있습니다. 패턴은 문자열 처음부터 0으로 시작하는 1개 이상의 문자들을 의미 예제에서 패턴과 일치하는 문자열은 “0…

문자열에서 특수문자, 한글만 제거하는 방법에 대해서 알아보겠습니다. 또는, 특수문자와 한글 모두 제거하는 방법도 알아보겠습니다. 1. 문자열에서 특수문자만 제거 2. 문자열에서 한글만 제거 3. 문자열에서 한글과 특수문자 모두 제거 1. 문자열에서 특수문자만 제거 은 문자열에서 패턴에 일치하는 문자열을 찾고 repl로 교체합니다. : 특수문자에 대한 정규표현식 : 는 패턴과 일치하는 모든 문자열을 찾으라는 의미 : 특수문자를 모두 찾아서 ""으로 변경하여 제거 아래와 같이 문자열에서 특수문자만 제거합니다. Output: 2. 문자열에서 한글만 제거 으로 한글만 제거할 수 있습니다. 아래 처럼 한글에 대한 패턴을 만들고, 한글을 찾아 제거합니다. : 한글에 대한 정규표현식 : 는 패턴과 일치하는 모든 문자열을 찾으라는 의미 : 한글을 모두 찾아서 ""으로 변경하여 제거 Output: 3. 문자열에서 한글과 특수문자 모두 제거 한글과 특수문자의 패턴을 함께 사용하여 모두 제…

문자열에서 특정 문자를 모두 제거하는 방법을 소개합니다. 예를 들어, 문자열에서 어떤 특수문자를 모두 제거하거나, 숫자나 어떤 문자를 모두 제거해야하는 경우가 있을 수 있습니다. 예제를 통해 알아보겠습니다. 1. replace()를 이용한 방법 2. 정규표현식을 이용한 방법 3. for문을 이용한 방법 1. replace()를 이용한 방법 replaceAll(str, repl)은 문자열에서 str을 모두 repl로 변경합니다. 이것을 이용하여, 아래 예제처럼 특정 문자를 빈 문자열 로 모두 변환하여 제거할 수 있습니다. Output: str.replace(str, repl)은 문자열에서 가장 먼저 찾은 str을 repl로 1회만 변경합니다. 모든 문자를 변경하려면 replaceAll()을 사용해야 합니다. 2. 정규표현식을 이용한 방법 은 정규식 패턴에 일치하는 문자열을 찾고, repl로 변환합니다. 이것을 이용하여, 아래와 같이 특정 문자를 모두 찾는 정규식 패턴을 만들고, 로 …

문자열에서 특정 Index의 문자를 다른 문자로 변경하는 방법에 대해서 알아보겠습니다. 1. substring()으로 특정 위치 문자 변경 substring(start, end)은 문자열에서 start Index를 포함하고 end Index를 포함하지 않는 범위의 문자열을 잘라서 리턴합니다. 이것을 이용하여, 아래와 같이 특정 Index의 문자만 제외하고 두개의 문자열로 분리하고, 다른 문자를 포함하여 두개의 문자열을 연결합니다. 그럼 특정 Index의 문자를 다른 문자로 교체할 수 있습니다. Output: 2. 배열을 이용하여 특정 위치 문자 변경 문자열을 배열로 변경하고, 특정 Index의 문자를 다른 문자로 변경할 수 있습니다. 그 이후에 문자열 배열을 을 이용하여 하나의 문자열로 연결할 수 있습니다. : charArray의 요소들을 하나의 문자열로 연결하며, 각 문자 사이에 문자를 추가 (즉, 아무 문자도 추가하지 않고 단순히 연결함) Output: 3. 정규표현식으로 …

일정 시간 후에 특정 함수나 코드를 실행하는 방법에 대해서 알아보겠습니다. 또한, 일정 시간 간격으로 주기적으로 함수를 호출하는 방법에 대해서 알아보겠습니다. 1. setTimeout() : 일정 시간 후에 함수 실행 2. setInterval() : 주기적으로 함수 실행 3. 비동기 작업에서 일정 시간 후에 함수 호출 1. setTimeout() : 일정 시간 후에 함수 실행 은 일정 시간 time(millisecond) 후에 함수를 실행합니다. 아래 예제는 2초 뒤에 함수를 실행합니다. Output: 2. setInterval() : 주기적으로 함수 실행 은 일정 시간(time, millisecond) 간격으로 함수를 실행합니다. time 뒤에 함수가 처음 실행되며, time 시간 간격마다 주기적으로 함수 실행됨 아래 예제는 1초 간격으로 특정 함수를 실행하는 예제입니다. Output: 3. 비동기 작업에서 일정 시간 후에 함수 호출 비동기 작업에서는 async, await,…

자바스크립트에는 sleep이나 delay 함수가 제공되고 있지 않습니다. 만약 필요하다면, 직접 구현해서 사용해야 합니다. 이 글에서는 동기적인, 비동기적인 sleep 함수를 구현하는 방법에 대해서 알아보겠습니다. 1. sleep 함수 구현 (Sync) 2. sleep 함수 구현 (Async) 1. sleep 함수 구현 (Sync) while과 Date를 사용하여, 동기적으로 sleep을 구현할 수 있습니다. 로 시간 정보를 가져오고, 지연시켜야 하는 시간 동안 while문에서 멈춰있도록 합니다. 일정 시간이 지나면 while을 탈출하여 다음 코드가 실행되도록 합니다. Output: 2. sleep 함수 구현 (Async) Promise와 setTimeout을 사용하여 다음과 같이 비동기적으로 sleep을 구현할 수 있습니다. Output: 또는, 아래와 같이 async 함수에서 await 키워드와 함께 사용할 수 있습니다.

를 사용하여 숫자 배열을 오름차순, 내림차순으로 정렬하는 방법에 대해서 알아보겠습니다. sort()는 기본적으로 문자열로 변환하여 비교하기 때문에, 숫자 배열의 경우 의도한 것과 다르게 동작할 수 있습니다. 1. 오름차순 정렬 2. 내림차순 정렬 1. 오름차순 정렬 sort()는 배열의 요소들을 문자열로 변환하며, 오름차순으로 정렬합니다. 따라서 숫자 배열을 정렬할 때는 를 사용하면 안되고, 인자로 정렬 규칙을 함수로 전달해야 합니다. 아래 예제와 같이 sort()에 숫자를 오름차순으로 비교하는 함수를 구현하여 전달하였습니다. Output: 위 코드는 화살표 함수를 사용하여, 다음과 같이 간단히 구현할 수 있습니다. 2. 내림차순 정렬 오름차순과 비슷한 방식으로, 내림차순에 대한 정렬 규칙 함수를 구현하여 에 전달해야 합니다. 아래 예제에서는 오름차순과 반대로 비교하도록 구현하여 내림차순 정렬하였습니다. Output: 위의 예제는 화살표 함수를 사용하여 아래와 같이 간단히 구현할 …

객체를 요소로 갖고 있는 배열을 오름차순, 내림차순으로 정렬하는 방법에 대해서 알아보겠습니다. 문자열 배열이나, 숫자 배열은 각 요소 값들로 비교하여 정렬하면 되는데, 객체 배열은 객체가 다양한 값을 갖고 있기 때문에, 특정 값을 기준으로 정렬해야 합니다. 다른 배열 정렬 방법에 대해서 궁금하시다면, 문자열 배열 정렬과 숫자 배열 정렬을 참고해주세요. 1. 오름차순 정렬 2. 내림차순 정렬 1. 오름차순 정렬 아래 예제는 name과 score 값을 갖고 있는 객체 배열을 오름차순으로 정렬합니다. 먼저 score 속성을 기준으로 정렬하고, 그 다음에 name 속성으로 정렬합니다. sort() 함수에는 객체 값을 비교하는 comparator 함수를 전달해야 함 숫자 값들은 처럼 값의 차를 리턴하여 비교 정렬 문자열 값들은 으로 비교 정렬 Output: 화살표 함수로 구현 화살표 함수를 사용하여 아래와 같이 간단히 구현할 수 있습니다. 2. 내림차순 정렬 내림차순으로 정렬하려면, 에 …

를 사용하여 문자열 배열을 오름차순, 내림차순으로 정렬하는 방법에 대해서 알아보겠습니다. 1. 오름차순 정렬 2. 내림차순 정렬 1. 오름차순 정렬 문자열 배열에 대해서 sort()를 호출하면 배열의 요소들이 오름차순으로 정렬됩니다. Output: 영어, 숫자 문자열 배열 정렬 한글 뿐만 아니라, 영어/숫자로 된 문자열의 경우도 오름차순으로 정렬됩니다. Output: 2. 내림차순 정렬 는 배열의 요소를 함수의 비교 결과로 정렬합니다. 기본적으로 는 오름차순으로 비교하는 함수로 동작하고 있어서 함수를 생략할 수 있었습니다. 만약 내림차순으로 정렬하려면, 내림차순으로 비교하는 함수를 구현해줘야 합니다. 아래 예제에서는 로 함수를 만들었고, 오름차순과 반대로 비교하도록 순서를 변경하였습니다. 오름차순의 경우는 로 비교해야 함 Output: 영어, 숫자 문자열 배열 정렬 영어, 숫자 문자열 배열도 동일한 방식으로 내림차순 정렬할 수 있습니다. Output:

어떤 문자열이 특정 문자열로 끝나는지 확인할 때 사용할 수 있는 방법을 알아보겠습니다. 많은 문자열들을 비교할 때, 특정 문자열로 시작하는 문자열에 대해서만 어떤 작업을 수행할 때 이런 방법들을 사용할 수 있습니다. 1. startsWith()를 이용한 방법 2. 정규표현식을 이용한 방법 1. startsWith()를 이용한 방법 str.startsWith(prefix)는 str이 prefix로 시작할 때 true를 리턴하며, 그렇지 않으면 false를 리턴합니다. 이 함수를 이용하여, 아래와 같이 구현할 수 있습니다. Output: 2. 정규표현식을 이용한 방법 은 문자열이 정규표현식 패턴에 해당할 때 true, 그렇지 않으면 false를 리턴합니다. 아래 예제에서 패턴은 이며, 는 문자열의 시작을 의미하는 정규식 는 prefix로 시작하는 문자열을 의미 : 패턴을 갖고 있는 RegExp 객체 생성 : str이 prefix로 시작하는 문자열일 때 true 리턴 Output:

string을 int(number) 타입으로 변환하는 다양한 방법에 대해서 알아보겠습니다. 1. parseInt()로 문자열을 숫자로 변환 2. Number 생성자로 문자열을 숫자로 변환 3. Unary plus(+) 연산자로 문자열을 숫자로 변환 1. parseInt()로 문자열을 숫자로 변환 parseInt(str)은 str을 number 타입으로 변환하여 리턴합니다. 아래와 같이 문자열을 Integer로 변환할 수 있습니다. Output: 2. Number 생성자로 문자열을 숫자로 변환 Number 생성자에 인자로 문자열을 전달하면, 문자열이 파싱되면서 number 타입 숫자가 생성됩니다. 아래와 같이 변환할 수 있습니다. Output: 3. Unary plus(+) 연산자로 문자열을 숫자로 변환 문자열로 된 숫자 앞에 를 추가하면 문자열이 number 타입으로 변경됩니다. 아래와 같이 변환할 수 있습니다. Output:

어떤 문자열이 특정 문자열로 끝나는지 확인할 때 사용할 수 있는 방법을 알아보겠습니다. 1. endsWith()를 이용한 방법 2. 정규표현식을 이용한 방법 1. endsWith()를 이용한 방법 str.endsWith(suffix)는 str이 suffix로 끝날 때 true를 리턴하며, 그렇지 않으면 false를 리턴합니다. 이 함수를 이용하여, 아래와 같이 구현할 수 있습니다. Output: 2. 정규표현식을 이용한 방법 은 문자열이 정규표현식 패턴에 해당할 때 true, 그렇지 않으면 false를 리턴합니다. 아래 예제에서 패턴은 이며, 는 문자열의 끝을 의미 는 suffix로 끝나는 문자열을 의미 : 패턴을 갖고 있는 RegExp 객체 생성 : str이 suffix로 끝나는 문자열일 때 true 리턴 Output:

Javascript에서 현재 시간을 가져올 때, 시스템 설정과 관계 없이 항상 한국 시간으로 가져오는 방법에 대해서 알아보겠습니다. 1. 시스템에 설정된 현재 시간/날짜 가져오기 2. 항상 현재 한국 시간/날짜 가져오기 1. 시스템에 설정된 현재 시간/날짜 가져오기 는 시간/날짜 정보를 갖고 있으며, 시스템에 설정된 지역의 시간 기준으로 출력됩니다. 으로 Date를 출력하면 시스템 설정 시간 기준으로 출력 get 함수로 가져온 년/월/일, 시/분/초 정보는 시스템 설정 지역의 시간으로 출력 로 Date를 출력하면 UTC 시간이 출력됨 아래와 같이 Date 객체에서 날짜, 시간 정보를 읽을 수 있습니다. Output: 2. 항상 현재 한국 시간/날짜 가져오기 시스템 설정과 무관하게, 항상 한국의 현재 시간/날짜 정보를 가져오려면, Date에서 UTC 시간을 계산하고, UTC에서 한국의 시간차(9시간)를 더한 Date 객체를 만들면 됩니다. UTC가 영국 기준이고, 한국은 UTC + …

다양한 방법으로 문자열에서 숫자만 추출할 수 있습니다. 예제와 함께 알아보겠습니다. 1. 정규표현식으로 숫자 추출 2. filter()로 숫자 추출 3. for문으로 숫자 추출 1. 정규표현식으로 숫자 추출 은 문자열에서 패턴에 일치하는 문자열을 찾고 repl로 교체합니다. : 숫자가 아닌 문자로, 와 동일한 의미의 정규식 : 숫자가 아닌 문자를 ""으로 대체하여 제거 아래와 같이 문자열에서 숫자가 아닌 문자를 제거하여, 숫자만 추출할 수 있습니다. Output: 2. filter()로 숫자 추출 는 문자열을 문자 단위로 분리하며, 각 문자 별로 를 수행합니다. 함수의 결과가 true인 문자들만 모아서 으로 연결합니다. isNaN(char) : is Not a Number의 의미로, 문자 char가 숫자로 변환 가능한 경우 true를 리턴 : char가 숫자인 경우만 모아서 배열로 리턴 아래와 같이 문자열에서 숫자만 추출할 수 있습니다. Output: 3. for문으로 숫자 …

함수의 수행 시간이 얼마나 걸렸는지, 시간을 측정하는 방법을 소개합니다. 어떤 기능을 구현했을 때, 성능이 어떤지, 이전보다 개선이 되었는지 느려졌는지 확인해보기 위해 함수의 실행 시간을 측정해볼 때가 있습니다. 1. console.time()을 이용한 방법 2. performance.now()를 이용한 방법 3. Date를 이용한 방법 1. console.time()을 이용한 방법 console.time()을 호출하면 측정 시작 시간을 기록하고, console.timeEnd()을 호출하면 종료 시간을 기록하고, 그 차이를 로그로 출력합니다. 아래와 같이 어떤 함수의 시작과 끝에 time(), timeEnd()를 호출하여 실행 시간을 측정할 수 있습니다. Output: 2. performance.now()를 이용한 방법 는 코드의 성능을 측정할 때 사용되며, 더 정확한 시간 정보를 제공합니다. 시간 단위는 ms입니다. 또한, 처럼 결과를 로그로 출력하지 않고, 함수가 호출될 때의…

두 배열을 합치면서 중복 요소는 모두 제거하는 방법에 대해서 알아보겠습니다. 배열을 합치면 중복 요소들도 함께 포함되는데, 합친 이후에 중복 값을 따로 제거해야 합니다. 두 배열을 합치는 방법에 대해서 먼저 알아보고, 그 이후에 중복 값을 제거하는 방법을 알아보겠습니다. 1. 두 배열을 합치는 방법 (중복 값 제거 안됨) 2. Set로 배열 합치면서 중복 제거 3. filter()로 배열 합치면서 중복 제거 4. reduce()로 배열 합치면서 중복 제거 1. 두 배열을 합치는 방법 (중복 값 제거 안됨) concat(), 전개 연산자와 push를 사용하여 두 배열을 합칠 수 있습니다. : a 배열과 b 배열의 모든 요소를 하나의 배열로 합치고 배열 리턴 : array1과 array2의 모든 요소들을 새로운 배열에 추가 : mergedArray 배열에 array1의 모든 요소 값을 추가 Output: 2. Set로 배열 합치면서 중복 제거 Set는 중복 요소를 허용하지 않는 …

숫자 앞에 자리수 만큼 0을 추가하는 방법에 대해서 알아보겠습니다. 날짜 월 또는 일을 표현할 때, 07월 처럼 특정 자리수만큼 0을 채워야할 때가 있는데요. 이럴 때 어떻게 구현하는지 알아보겠습니다. 1. padStart()를 이용한 방법 2. repeat()을 이용한 방법 3. 숫자 뒤, 특정 자리수만큼 0 채우기 1. padStart()를 이용한 방법 padStart(N, “0”)은 문자열 N자리에서 비어있는 부분을 “0”으로 채웁니다. 만약 0 대신에 다른 값으로 채워야 한다면, 그 문자를 0 대신에 입력하시면 됩니다. Output: 날짜를 예로 들면, 아래와 같이 0을 채워서 두자리로 월/일을 표현할 수 있습니다. Output: 2. repeat()을 이용한 방법 str.repeat(n)은 str을 n회 반복하는 문자열을 만듭니다. 이렇게 0을 반복하는 문자열을 만들고 숫자를 합친 뒤에, slice()로 필요한 자리수만큼 자르면 됩니다. 은 문자열 뒤에서 n개만 잘라서 문…

현재 위치까지 어떤 경로로 함수가 호출되었는지 확인할 때 Stacktrace를 출력하여 디버깅을 할 수 있습니다. 기본적으로 로 디버깅을 할 수 있지만, stack trace 정보를 출력하진 않습니다. Stack trace를 출력하는 방법에 대해서 알아보겠습니다. 1. console.trace()를 이용한 방법 2. console.error()를 이용한 방법 1. console.trace()를 이용한 방법 는 메시지와 함께 호출 시점의 call stack을 출력합니다. 아래와 같은 함수 호출 구조에서 trace를 출력해보면 다음과 같이 콜스택이 출력되어, 어떤 함수에서 호출되었는지 확인할 수 있습니다. Output: 2. console.error()를 이용한 방법 는 msg와 함께 error를 출력합니다. error에는 콜스택 정보를 갖고 있어, 출력 시 stacktrace를 출력할 수 있습니다. 도 동일하게 스택 트레이스가 출력됨 Output:

문자열에서 특정 문자나 문자열의 위치(Index)를 찾는 방법에 대해서 알아보겠습니다. 보통 함수는 1개의 문자 위치만 찾지만, 반복문을 이용하여 모두 찾도록 구현할 수도 있습니다. Index를 사용하여 특정 문자열을 자르거나, 문자열이 포함되어있는지 확인할 때 이런 방법을 사용할 수 있습니다. 1. indexOf()를 이용한 방법 2. lastIndexOf()를 이용한 방법 3. 정규표현식을 이용한 방법 4. 특정 문자 모두 찾기 1. indexOf()를 이용한 방법 indexOf() 함수를 사용하여 문자열에서 특정 문자열의 첫 번째 위치를 찾을 수 있습니다. 해당 문자열이 없으면 -1을 리턴합니다. 특정 문자열이 2개가 존재해도, 문자열 왼쪽부터 가장 먼저 찾은 문자열의 Index를 리턴합니다. Output: 2. lastIndexOf()를 이용한 방법 는 와 동일하지만, 특정 문자열을 찾는 방향이 반대입니다. 이 함수는 문자열의 끝에서 시작 방향으로 문자열을 찾으며, 특정 문…

key-value를 갖고 있는 객체에서 value 값으로 key 값을 찾는 방법을 알아보겠습니다. key로 value를 찾기는 쉽지만, 그 반대는 직접 찾는 코드를 구현해야 합니다. 1. find()를 이용한 방법 2. for문을 이용한 방법 1. find()를 이용한 방법 아래와 같이 객체의 모든 value 값을 순회하면서, 특정 value 값을 찾고, 그 객체의 key를 리턴하도록 구현할 수 있습니다. : myObject에서 value로 “c” 값을 갖고 있는 key 리턴 : 객체에서 key 값들만 배열로 리턴 : keys의 key 값들을 모두 순회하면서, find()의 함수의 결과가 true일 때, 그 key를 리턴 Output: 2. for문을 이용한 방법 를 사용하는 방법과 동일한데, 대신 find를 사용하지 않고 for문으로 동일하게 동작하도록 구현하였습니다. Output:

두개의 배열이 공통적으로 갖고 있는 중복 값을 찾는 방법에 대해서 알아보겠습니다. 집합으로 얘기하면, 두 배열의 교집합이 됩니다. 1. filter()를 이용한 방법 2. for문을 이용한 방법 3. 두 배열의 중복 값 제거 1. filter()를 이용한 방법 는 array의 모든 요소에 대해서 함수를 수행하며, 함수의 결과가 true인 요소들만 배열에 담아 리턴합니다. 아래와 같이 두 배열의 중복 값을 찾을 수 있습니다. : arr1이 갖고 있는 요소가 arr2에도 있는 요소들만 배열로 리턴 Output: 2. for문을 이용한 방법 는 배열에 value가 있을 때 true를 리턴합니다. 이것을 이용하여 아래와 같이 두개의 배열을 for문으로 순회하면서, 어떤 요소에 대해서 두개의 배열이 함께 갖고 있는지 확인할 수 있습니다. 중복 값은 배열에 저장하고, 이 배열을 리턴하여 중복 값을 찾을 수 있습니다. Output: 3. 두 배열의 중복 값 제거 아래와 같이 filter()를…

숫자가 클 때, 3자리마다 콤마를 넣으면 읽기가 편해집니다. 천단위(숫자 3자리)마다 comma(,)를 추가하여 숫자를 문자열로 변환하는 방법에 대해서 알아보겠습니다. 1. toLocaleString()을 이용한 방법 2. 정규표현식을 이용한 방법 1. toLocaleString()을 이용한 방법 는 숫자를 현재 설정된 지역의 형식에 맞게 문자열로 변환합니다. 즉, 그 지역에서 숫자 3자리마다 콤마를 넣으면 그 형식으로 숫자를 변경합니다. : number를 시스템에서 설정된 지역의 숫자 형식으로 변환 : number를 한국(ko-KR)의 숫자 형식으로 변환 Output: 2. 정규표현식을 이용한 방법 정규표현식을 사용하여 숫자 3자리마다 콤마를 넣을 수 있습니다. 아래 예제에서 사용된 정규식의 의미는 다음과 같습니다. : 단어의 경계를 찾음 : 숫자 3개 : 숫자 3개 패턴이 1개 이상 반복 : 단어의 경계 뒤에 숫자 3개 패턴이 있는 경우를 찾음 : 숫자가 오지 않는…

어떤 문자열의 중간에 특정 문자를 넣거나, 문자열을 추가하는 방법에 대해서 알아보겠습니다. 예를 들어, 아래와 같이 “Hello World” 문자열의 중간에 를 추가하여 “Hello, World”로 만들 수 있습니다. 1. slice()를 이용한 방법 2. substring()을 이용한 방법 3. slice()와 substring()의 차이점 1. slice()를 이용한 방법 slice(start, end)는 문자열에서 start Index를 포함하고 end Index를 포함하지 않는 범위의 문자열을 잘라서 리턴합니다. 는 start Index에서 문자열 끝까지 잘라서 리턴 이것을 이용하여, 어떤 문자열을 특정 Index를 기준으로 두개의 문자열로 나누고, 중간에 특정 문자나 문자열을 추가할 수 있습니다. Output: 2. substring()을 이용한 방법 substring()도 slice()와 비슷하며, 아래와 같이 동작합니다. : start Index를 포함하고 end를 …

두개의 배열이 같은 값을 갖고 있는지 비교하는 방법에 대해서 알아보겠습니다. 배열의 동등 비교를 할 때 다음 두가지를 고려하여 비교할 수 있습니다. 두 배열이 서로 같은 값을 갖고 있지만, 저장 순서는 다를 때 두 배열이 서로 같은 값을 갖고 있고, 저장 순서도 같음 1. for문으로 두 배열의 값과 순서를 모두 비교 2. Array.every()로 두 배열의 값과 순서를 모두 비교 3. Array.every()로 두 배열의 값만 비교 1. for문으로 두 배열의 값과 순서를 모두 비교 for문으로 두 배열을 순회하면서, 동일한 순서(Index)로 저장되고, 같은 값을 갖고 있는지 확인할 수 있습니다. for문으로 Index와 값을 모두 비교하는게 직관적이고, 정석적인 방법이지만 비교하는 코드가 좀 길 수 있습니다. Output: toString()과 === 연산자로 비교 문자열이나, 숫자 배열의 경우 값이 배열 값의 내용을 문자열로 변환하여 리턴합니다. 이런 경우 연산자로 문…

어떤 문자열이 숫자인지(숫자로 변환 가능한지) 체크하는 방법에 대해서 알아보겠습니다. 간혹 숫자가 문자열로 되어있는 경우, 연산이 안되기 때문에 number 타입으로 변환해야 하는데요, 문자열이 숫자인지 체크하는 방법을 소개합니다. 1. isNaN()을 이용한 방법 2. 정규표현식을 이용한 방법 3. 문자열이 숫자일 때, number 타입으로 변환 1. isNaN()을 이용한 방법 isNaN(str)은 str이 숫자로 변환할 수 없을 때 true를 리턴합니다. NaN은 Not a Number(숫자가 아님)를 의미합니다. Output: 다양한 케이스 을 사용하여 숫자로 구분할 수 있는 케이스는 아래와 같습니다. true를 리턴하는 경우는 배열, “NaN”, 문자열 등이며, 그 외의 경우는 대부분 false를 리턴합니다. 2. 정규표현식을 이용한 방법 정규표현식으로 문자열이 숫자인지 확인할 수 있습니다. 은 str이 pattern 조건에 해당한다면 true 리턴 패턴 는 문자열 시작부…

배열의 모든 요소들을 하나의 문자열로 변환하는 방법에 대해서 알아보겠습니다. 배열의 내용을 화면에 출력하거나 저장할 때, 문자열 변환이 필요할 때가 있습니다. 1. join()을 이용한 방법 2. toString()을 이용한 방법 3. JSON.stringify()를 이용한 방법 1. join()을 이용한 방법 array.join(str)은 배열 array의 모든 요소를 하나의 문자열로 합치며, 각 요소 사이에 str이 추가됩니다. 아래 예제는 요소들이 쉼표나 공백으로 구분된 문자열을 만듭니다. Output: 2. toString()을 이용한 방법 은 배열의 요소를 문자열로 변환하며, 각 요소는 쉼표로 구분됩니다. 으로 만든 문자열과 다르게, 의 경우 쉼표와 다음 요소 사이에 스페이스는 없습니다. Output: 3. JSON.stringify()를 이용한 방법 는 배열을 JSON의 문자열로 변환합니다. 각각의 요소는 쉼표로 구분되어있고, 시작과 끝에 가 추가됩니다. Output: …

두 문자열이 같은지, 일치 여부를 확인하는 방법에 대해서 알아보겠습니다. 문자열 동등 비교는 자주 하는데, 연산자 를 사용해야하는지 를 사용해야하는지 헷갈릴 때가 많습니다. 예제와 함께 알아보겠습니다. 1. === 연산자를 이용한 방법 2. == 연산자를 이용한 방법 3. localeCompare()를 이용한 방법 1. === 연산자를 이용한 방법 연산자는 두개의 객체를 비교할 때, 값과 타입이 모두 일치하는 경우 true를 리턴하며 그렇지 않으면 false를 리턴합니다. 아래와 같이 두개의 문자열이 같은지 비교할 수 있으며, 값과 타입이 모두 일치해야 같다고 판단됩니다. Output: ===로 다른 타입 객체 비교 만약 아래와 같이, 숫자와 문자열을 비교할 때, 타입은 다르지만 타입을 변환했을 때 값이 같은 경우에는 는 false를 리턴합니다. Output: 2. == 연산자를 이용한 방법 연산자는 값만 비교하며, 타입이 달라도 같다고 판단할 수 있습니다. 이 연산자는 타입을…

오늘 날짜, 또는 특정 날짜를 비교하여 어떤 날짜가 시간상 앞에 있는지 확인하는 방법을 알아보겠습니다. 1. 비교연산자를 이용한 방법 2. getTime()을 이용한 방법 3. 시간 비교 4. 오늘 날짜와 특정 날짜 비교 1. 비교연산자를 이용한 방법 비교 연산자(>, <, ==, >=, <=)로 두 날짜를 비교할 수 있습니다. 크기가 작다는 것은 시간상 과거라는 의미 크기가 크다는 것은 시간상 미래라는 의미 크기가 같으면 같은 날짜 Output: 2. getTime()을 이용한 방법 Date.getTime()은 날짜에 대한 timestamp 값을 리턴합니다. timestamp는 UTC 시간(1970년 1월 1일에서 현재까지 흐른 시간)을 millisecond로 표현한 것 입니다. 아래와 같이 timestamp를 출력하면 정수로 출력되며, 비교 연산자로 정수를 비교하면 됩니다. 정수의 크기가 큰 것이 시간상 미래가 됩니다. Output: 3. 시간 비교 는 날짜 정보와 시간 정보를…

문자열에서 특정 문자열이 포함되어있는지 확인하는 방법에 대해서 알아보겠습니다. 개발을 하다 보면, 어떤 문자열이 부분적으로 다른 문자열에 포함되어있는지 확인할 때가 많습니다. 예제와 함께 알아보겠습니다. 1. includes()를 이용한 방법 2. indexOf()를 이용한 방법 3. 정규표현식을 이용한 방법 1. includes()를 이용한 방법 a.includes(b)는 문자열 a에 b가 포함되어있을 때 true를 리턴합니다. 이것을 이용하여, 아래와 같이 어떤 문자열에 다른 문자열이 포함되어있는지 확인할 수 있습니다. Output: 2. indexOf()를 이용한 방법 a.indexOf(b)는 문자열 a에 b가 포함되어있을 때, b 문자열의 시작 Index를 리턴합니다. 만약 포함되어있지 않다면 -1을 리턴합니다. 이것을 이용하여, 아래와 같이 의 리턴 값이 -1이 아닐 때 특정 문자열이 포함되어있다고 판단할 수 있습니다. Output: 3. 정규표현식을 이용한 방법 patt…

문자열이 갖고 있는 문자들을 한글자씩 잘라서 배열로 변환하는 방법입니다. 1. Spread operator를 이용한 방법 2. split()을 이용한 방법 3. Array.from()을 이용한 방법 4. for문을 이용한 방법 1. Spread operator를 이용한 방법 같은 형태를 전개 연산자(spread operator)라고 하며, 갖고 있는 요소들을 나열합니다. : 문자열 str가 갖고 있는 모든 문자들을 나열하여 배열에 저장 아래와 같이 spread operator를 사용하여 문자열을 한글자씩 잘라서 배열로 변환할 수 있습니다. Output: 2. split()을 이용한 방법 은 문자열 str을 각 문자 별로 나눠서 배열로 변환합니다. Output: 3. Array.from()을 이용한 방법 처럼 인자로 문자열을 전달하면, 배열을 생성할 때 문자열을 문자를 잘라서 각각 배열에 저장합니다. Output: 4. for문을 이용한 방법 아래와 같이 for문으로 문자열의 …

문자열에서 어떤 문자가 몇개나 있는지 개수를 세는 방법에 대해서 알아보겠습니다. 1. split()을 이용한 방법 2. 정규표현식을 이용한 방법 3. 반복문을 이용한 방법 1. split()을 이용한 방법 split(str)은 문자열을 str을 기준으로 분리하며, 분리된 문자열을 배열에 담아 리턴합니다. 아래와 같이 을 사용하여 특정 문자열로 분리하면, 리턴된 배열의 길이는 특정 문자열의 개수보다 1개가 많습니다. 이것을 이용하여 개수를 구할 수 있습니다. : str에 substring의 개수 Output: 2. 정규표현식을 이용한 방법 str.match(pattern)은 문자열 str에 pattern에 해당하는 문자열이 있으면 찾은 결과를 배열로 리턴합니다. 아래 예제에서 패턴은 이며, Hello라는 문자열을 찾고, 는 정규식의 flags이며 일치하는 모든 값을 찾으라는 의미 는 str에서 모든 Hello 문자열을 찾음 matches를 출력해보면, Hello가 들어있는 배열이 …

라디오버튼들이 있을 때, 선택된 라디오 버튼의 value와 텍스트를 가져오는 방법에 대해서 알아보겠습니다. 선택된 라디오 버튼 value 값 가져오기 선택된 라디오 버튼의 텍스트 가져오기 선택된 라디오 버튼 value 값 가져오기 선택된 라디오 버튼의 값을 화면에 출력하는 예제입니다. HTML 3개의 라디오 버튼이 있고, 그 아래에 버튼이 있습니다. 버튼을 누르면 Javascript 함수를 호출하고, 선택된 라디오 버튼을 찾아서 그 값을 화면에 출력합니다. Javascript 버튼에 대한 클릭 이벤트 리스너를 등록하여, 버튼이 클릭되면 함수가 실행됩니다. 로 체크된 라디오버튼을 찾고, 체크된 라디오 버튼이 있으면 그 값을 화면에 출력합니다. : 결과로 출력할 요소 찾기 : input 요소 중에 name이 radioGroup이고 선택(checked=true)된 요소를 찾습니다. : 선택된 라디오버튼의 value 선택된 라디오 버튼의 텍스트 가져오기 선택된 라디어 버튼()의 v…

콤보박스(select)에서 선택된 Option의 value와 text를 가져오는 방법에 대해서 알아보겠습니다. select에서 선택한 Option의 Value, Text 가져오기 select에서 선택한 Option의 Value, Text 가져오기 select에서 선택된 Option 값과 텍스트를 출력하는 예제입니다. HTML 로 콤보 박스를 추가하였고, 3개의 옵션을 추가하였습니다. 그리고 버튼을 추가하였고 클릭하면 select에 선택된 옵션 값과 텍스트를 가져와서 에 출력하려고 합니다. Javascript 버튼이 클릭되면 함수가 호출되며 선택된 옵션의 값과 텍스트가 출력됩니다. : 의 select 요소 가져옴 : select의 선택된 옵션의 value를 가져옴 : 선택된 옵션의 Index : 선택된 옵션의 텍스트를 가져옴

Javascript를 사용하여 동적으로 테이블을 생성하고, 열을 추가하는 방법에 대해서 알아보겠습니다. 동적으로 테이블 생성하기 동적으로 테이블 생성하기 버튼을 누르면 동적으로 테이블을 생성하는 예제입니다. HTML 버튼을 누르면 함수를 실행하고, 함수에서는 동적으로 테이블을 생성하여 에 추가하려고 합니다. Javascript 버튼 클릭 이벤트를 받으면, 동적으로 테이블을 생성합니다. 동적으로 생성된 테이블의 HTML 코드를 보면 아래와 같이 보입니다. 아래에는 행을 의미하는 이 있고, 아래에는 Cell을 의미하는 가 있습니다. 그리고 헤더를 출력하고 싶으면, 하위의 첫번째 에 로 입력할 수 있습니다. 위 테이블은 아래의 Javascript 코드로 생성되는데, 코드를 보면, element를 만들고, , , element들을 만듭니다. 그리고 위에서 본 구조와 동일하게 요소들을 추가합니다. : element 객체 생성 : a 요소에 b 요소를 추가

Javascript를 이용하여 에 영어만 입력 가능하도록 만드는 방법에 대해서 알아보겠습니다. 1. 문자 입력 시, 영어가 아닌 문자는 삭제 2. oninput을 이용하여 영어만 입력 1. 문자 입력 시, 영어가 아닌 문자는 삭제 문자를 입력할 때 영어가 아닌 문자는 삭제하여, 영어만 입력되도록 만드는 예제입니다. HTML input 박스가 있고, Javascript에서 input 이벤트를 받아서 영어만 허용하도록 구현하려고 합니다. Javascript input 박스의 요소를 가져와서 input에 대한 이벤트를 수신합니다. 그리고 input에 입력된 text를 가져와서 영어를 제외한 문제를 모두 제거합니다. 마지막으로 영어만 남은 문자열을 다시 input의 value에 입력합니다. : 입력 이벤트를 수신 : input 요소 가져오기 : input에 입력된 text 가져오기 : inputValue의 문자열을 정규표현식으로 영어가 아닌 문자열을 모두 찾고 으로 변환, 즉 영어…

링크를 클릭할 때 페이지를 새 창에서 열거나, 현재 창에서 여는 방법에 대해서 알아보겠습니다. 새창에서 열기, 현재 창에서 이동 새창에서 열기, 현재 창에서 이동 링크나 버튼을 클릭할 때 현재 창에서 URL로 이동하거나 새창에서 페이지를 실행시키는 예제입니다. HTML 링크()처럼, HTML에 으로 URL을 설정하면, 링크 클릭 시 현재 페이지에서 URL로 이동 버튼1과 버튼2는 Javascript 함수가 실행되도록 설정, 각 함수에서 현재 페이지에서 이동하거나 새창에서 이동하도록 구현 Javascript 버튼을 누르면, 함수에서 처럼 URL을 설정하며, 이렇게 구현하면 현재 창에서 페이지로 이동합니다. 는 현재 페이지의 주소를 의미하며, 이 값을 변경하면 변경된 URL로 이동합니다. 버튼을 누르면, 함수에서 를 호출하며, 이렇게 구현하면 새 창에서 페이지를 실행시킵니다. 은 인자로 URL을 받으며, 다른 인자도 받을 수 있습니다. URL만 전달하면 새 창으로 URL 페이지를…

Javascript를 이용하여 전체 화면 또는 특정 영역에서 마우스 우클릭을 못하도록 설정할 수 있습니다. 1. 페이지 전체에 우클릭 금지 2. 특정 요소에서 우클릭 방지 1. 페이지 전체에 우클릭 금지 우클릭을 하면 이벤트가 발생되는데, 아래와 같이 이 이벤트를 수신하여 를 호출하면 우클릭 이벤트가 동작하지 않도록 만들 수 있습니다. 화면 전체에 대한 우클릭 이벤트를 수신하기 때문에, 전체 화면에서 우클릭이 동작 안하게 됩니다. 2. 특정 요소에서 우클릭 방지 라는 텍스트만 우클릭이 안되고, 다른 영역은 우클릭이 동작합니다. HTML 아래와 같이 라는 요소가 있습니다. 이 요소에만 우클릭이 안되도록 만드려고 합니다. Javascript 아래와 같이 의 요소를 가져오고, 이 요소에 대해서만 이벤트를 수신하여 우클릭을 무시하도록 만들 수 있습니다. : myDiv 요소를 가져옴 : 요소에서 발생하는 contextmenu 이벤트만 수신하고, 로 동작 안되도록 만듬

여러 체크박스가 있을 때, 모든 체크박스를 한번에 전체 선택/해제할 수 있는 체크박스를 구현하는 방법에 대해서 알아보겠습니다. 전체 선택/해제 체크박스 구현 전체 선택/해제 체크박스 구현 체크박스를 클릭할 때, 다른 체크박스들을 전체 선택하거나 해제하는 예제입니다. HTML 4개의 체크박스가 있습니다. 1개는 다른 체크박스들을 하는 체크박스이고, 3개는 일반적인 체크박스입니다. Javascript Javascript는 크게 두가지 구현이 있습니다. 체크박스를 클릭했을 때, 다른 체크박스들을 모두 선택/해제 체크박스가 체크되어있을 때, 다른 체크박스를 해제했을 때 체크박스의 체크 해제하기 코드를 보면, 요소와 다른 체크박스들을 모두 가져옵니다. 전체 선택이 클릭될 때 다른 체크박스를 해제하거나 체크되도록 하고 있습니다. : class가 checkbox인 모든 요소 찾기 : 전체 선택 체크박스가 클릭되었을 때, 현재 checked 값을 의미 : checkboxes는 다른 …

Javascript를 이용하여 Table에 행 1개를 추가하거나, 삭제하는 방법을 알아보겠습니다. 1. 행(row) 추가 2. 행(row) 삭제 1. 행(row) 추가 HTML 테이블이 있고, 2개의 버튼이 있습니다. 버튼을 누르면 각각의 Javascript 함수가 실행되며, 맨 앞에 행을 추가하거나, 맨 뒤에 행을 추가합니다. Javascript 아래 코드에서 는 맨 앞에 행을 추가하며 는 맨 뒤에 행을 추가합니다. : 테이블 요소 가져옴 : 는 테이블의 맨 앞에 행을 추가하며, 행의 요소가 리턴 : 1열의 셀을 추가하며 요소를 리턴, 리턴된 요소의 로 text를 입력할 수 있음. : 2열의 셀을 추가하며 요소를 리턴 2. 행(row) 삭제 HTML 테이블이 있으며, 두개의 버튼이 있습니다. 버튼을 누르면 각각의 Javascript 함수가 실행되며, 첫번째 행을 삭제하거나 마지막 행을 삭제합니다. Javascript 는 첫번째 행을 삭제하며, 는 마지막 행을 삭제합니다. …

Javascript에서 사용자에게 메시지를 보여주는 알림창의 종류에는 alert, confirm, prompt가 있습니다. 각각 어떤 용도로 사용되는지 예제와 함께 알아보겠습니다. 1. alert 2. confirm 3. prompt 1. alert 은 사용자에게 메시지를 보여주는데 사용되며, 확인 버튼을 누르면 메시지가 사라집니다. HTML Javascript 2. confirm 은 사용자에게 메시지를 보여주고, 확인/취소 중에 하나를 누르도록 하고 결과를 받습니다. 확인을 누르면 true가 리턴되며, 취소를 누르면 false가 리턴됩니다. HTML 버튼을 누르면 confirm 메시지를 보여주고, 결과를 에 보여줍니다. Javascript 버튼에 리스너를 추가하여 클릭 시 함수가 실행됩니다. 는 confirm 메시지를 띄우고, 결과를 리턴 받음 결과에 따라서 에 text로 결과를 보여줌 3. prompt 은 사용자에게 메시지를 보여주고, 사용자가 입력한 값을 받을 수 있습니다. …

네이버 같은 웹사이트에 로그인할 때, 특히 비밀번호를 입력할 때 CapsLock이 켜져있다는 알림을 받을 때가 있는데요. 키를 입력할 때 Caps Lock 버튼이 눌렸는지 안눌렸는지, Caps Lock의 활성화 상태를 확인하는 방법에 대해서 알아보겠습니다. getModifierState()로 CapsLock 상태 확인 getModifierState()로 CapsLock 상태 확인 키를 입력할 때 CapsLock의 활성화/비활성화 상태를 확인하는 예제입니다. HTML 텍스트 입력 박스가 있고, 아래에 Caps Lock의 상태를 출력하는 텍스트가 있습니다. Javascript input에 keyup 이벤트 리스너를 등록하여, 텍스트를 입력할 때 이벤트를 받도록 하였습니다. 키가 눌려 이벤트가 전달되면 함수로 Caps Lock이 눌렸는지 확인하고 화면에 상태를 업데이트합니다. : CapsLock 키의 활성화/비활성화 상태 리턴 : keyup 이벤트 발생 시, 함수 실행

라디오 버튼을 클릭할 때, 꼭 라디오 버튼을 눌러야 선택이 되고, 옆에 텍스트를 클릭하면 선택이 안되는 불편함이 있습니다. 텍스트를 클랙해도 해당 라디오 버튼이 체크되도록 만드는 방법을 알아보겠습니다. 1. 라디오 버튼과 텍스트 중첩 2. label의 for를 이용한 방법 3. 텍스트 클릭 시, 라디오 버튼 체크 1. 라디오 버튼과 텍스트 중첩 아래 예제는 라디오 버튼 뿐만 아니라, 텍스트를 클릭해도 라디오 버튼이 체크됩니다. HTML 아래와 같이 요소 하위에 요소를 추가하면, 텍스트가 클릭되도 이 함께 클릭되어 라디오 버튼이 체크됩니다. 2. label의 for를 이용한 방법 아래 예제는 라디오 버튼 뿐만 아니라, 텍스트를 클릭해도 라디오 버튼이 체크됩니다. HTML 의 id와 의 for 값을 동일하게 맞춰주면, 텍스트를 클릭할 때 라디오 버튼도 함께 체크가 됩니다. 3. 텍스트 클릭 시, 라디오 버튼 체크 이미 label과 input이 중첩되어 텍스트만 클릭해도 라디오 버튼…

사용자가 마우스로 휠을 움직이거나, 스크롤을 하다가 멈췄을 때 감지하는 방법에 대해서 알아보겠습니다. 예를 들어, 페이지를 이동하지 않을 때, 어떤 팝업을 보여주거나 어떤 처리를 하고 싶을 때가 있습니다. 휠과 스크롤 이벤트가 전달되다가 멈췄을 때를 인지하는 방법을 소개합니다. 1. Scroll 이벤트 멈춤 감지 2. Wheel 이벤트 감지 1. Scroll 이벤트 멈춤 감지 스크롤을 하다가 멈추면, 스크롤 멈춤을 감지하여 팝업을 띄우는 예제입니다. HTML HTML은 아래와 같이 스크롤이 가능하도록 길게 만들었습니다. Javascript 으로 scroll 이벤트를 수신하고, 안에서 setTimeout을 사용하여 500ms간 이벤트가 오지 않는 것을 체크하여 스크롤 멈춤을 감지할 수 있습니다. : 스크롤 이벤트가 지속적으로 오면 scrollTimeout을 clear하여 setTimeout()의 함수가 실행되지 않도록 만듬 500ms간 이벤트가 오지 않으면 setTimeout의 …

Javascript로 현재 실행 중인 페이지의 URL 주소를 가져오는 방법에 대해서 알아보겠습니다. window.location에서 URL 정보 가져오기 location 업데이트 window.location에서 URL 정보 가져오기 는 현재 페이지의 전체 주소를 갖고 있습니다. 이 값을 참조하여 현재 페이지의 URL 주소를 알 수 있습니다. Output: location의 다른 정보 아래와 같이 location 객체를 로그로 출력해보면, location이 갖고 있는 다양한 값들을 확인할 수 있습니다. Output: 아래와 같이 용도에 따라 각각의 변수에 접근하여 필요한 주소 정보를 얻을 수 있습니다. location 업데이트 현재 페이지를 다른 URL로 이동해야하는 경우, location을 업데이트하여 이동시킬 수 있습니다. 은 현재의 URL을 로 변경하고 현재 페이지가 변경됩니다.

Javascript에서 체크박스의 선택된 값을 모두 가져오는 방법에 대해서 알아보겠습니다. 체크박스에서 선택된 값 모두 가져오기 체크박스 선택 시, 선택된 값 출력 체크박스에서 선택된 값 모두 가져오기 HTML 3개의 체크박스가 있고, 그 아래에 버튼이 있습니다. 버튼을 누르면 Javascript에서 체크박스의 선택된 값을 가져와서 화면에 출력하려고 합니다. Javascript 버튼에 클릭 리스너를 등록하여, 버튼이 눌리면 함수가 실행됩니다. 함수에서는 모든 체크박스의 checked 값을 확인하고 체크되어있으면 리스트에 저장하여 화면에 출력합니다. : class가 checkbox인 모든 체크박스 요소 찾기 : id로 버튼 찾기 : id로 요소 찾기 체크박스 선택 시, 선택된 값 출력 체크박스를 선택할 때, 선택된 값을 화면에 출력하는 예제입니다. 이전에 선택된 값은 출력하지 않고, 방금 클릭된 체크박스의 값만 출력합니다. HTML 3개의 체크박스와 결과 출력을 위한 요소를…

소수를 갖고 있는 실수를 출력해야할 때, 소수점 아래의 숫자가 매우 많아서 N자리까지 표현해야하는 경우가 있습니다. 이럴 때 어떻게 구현하는지 예제와 함께 알아보겠습니다. 1. toFixed()으로 소수점 2자리까지 표시 2. NumberFormat으로 소수점 2자리 표시 1. toFixed()으로 소수점 2자리까지 표시 은 숫자를 소수점 N자리까지 표시합니다. 리턴 값은 string 타입입니다. 이것을 이용하여 아래와 같이 소수점 2자리까지만 표시되도록 만들 수 있습니다. Output: 소수점 N자리까지 표현하려면 으로 N자리까지 표시하도록 만들면 됩니다. Output: 2. NumberFormat으로 소수점 2자리 표시 NumberFormat를 생성할 때, 인자로 최소/최대 소수점 자릿수를 설정할 수 있으며, 둘다 2로 설정하면 소수점 2자리까지만 표시할 수 있습니다. 생성된 formatter를 이용하여, 로 설정된 포맷으로 변형할 수 있습니다. 아래 예제는 소수점 2자리까지만…

“00001234” 같이 숫자인데 문자열로 되어있는 경우가 있습니다. 문제는 앞에 0000 같은 무의미한 0이 포함되어있는 것입니다. 무의미한 앞자리 0을 제거하려면 어떻게 해야할까요? 예제를 통해서 0을 제거하는 방법에 대해서 알아보겠습니다. 1. Number로 앞자리 0 제거 2. parseInt()로 앞자리 0 제거 3. 정규표현식으로 앞자리 0 제거 1. Number로 앞자리 0 제거 는 문자열 str을 number 타입 변수로 변환합니다. number 타입으로 변환하면서 앞자리 0은 모두 제거됩니다. string 타입이 필요하다면, 으로 number를 string 타입으로 변환할 수 있습니다. Output: 2. parseInt()로 앞자리 0 제거 는 문자열 str을 10진수로 파싱하며, number 타입의 객체 리턴합니다. string 타입이 필요하다면, 으로 number를 string 타입으로 변환할 수 있습니다. Output: 3. 정규표현식으로 앞자리 0 제거 정…

Jest 라이브러리는 페이스북에서 만든 자바스크립트 테스팅 라이브러리입니다. Jest를 사용하여 Javascript의 Unit test 코드를 작성하는 방법에 대해서 알아보겠습니다. 1. Unit test(단위 테스트)란? 2. Jest란? 3. Jest로 Unit Test를 작성하는 방법 4. Jest 테스트 방법 더 알아보기 5. 참고 1. Unit test(단위 테스트)란? 유닛 테스트는 특정 모듈이 잘 동작하는지 테스트하는 방법으로, 다른 모듈, 라이브러리, Framework 등에 의존성이 없고, 해당 모듈만 테스트합니다. 그렇기 때문에 테스트 시간이 짧으며, 모듈의 Input/Output을 빠르게 확인하여 문제를 조기에 찾아 해결할 수 있습니다. 유닛 테스트를 작성하면 잘못된 시스템 구조, 클래스 구조를 쉽게 파악할 수 있어서 시스템을 디자인하는데 도움이 될 수 있습니다. 또한 테스트 코드를 작성하는 것에 시간을 많이 사용한다고 하는데, 테스트 코드를 작성하면서 개발하는 …