코어 웹 바이탈 (Core Web Vitals) 이란?웹사이트의 사용자 경험을 측정하는 중요한 측정 지표입니다.이 지표는 페이지 로딩 속도, 상호작용의 반응성, 시각적 안정성을 평가하여웹사이트의 품질을 개선하는 데 도움을 줍니다. 핵심 성능 보고서(Core Web Vitals Report)는모든 웹 페이지에 적용되는 성능 보고서의 하위 집합으로 웹사이트의 사용자 경험을 평가하는 데 중요한 도구입니다.Google의 코어 웹 바이탈 지표를 기반으로 합니다.이 보고서는 웹사이트의 성능을 측정하고, 개선할 수 있는 기회를 제공합니다. 이 보고서는 LCP, FID, CLS와 같은 코어 웹 바이탈 지표를 포함하여 웹사이트의 로딩 속도, 반응성, 시각적 안정성을 측정합니다 각 코어 웹 바이탈은 사용자 경험의 고유한 ..

삽입정렬이란삽입 정렬은 가장 큰 요소를 찾아 하나씩 이동하거나, 각 루프당 가장 작은 요소를 찾아 갱신하는 대신,각 요소를 정렬된 배열에 삽입하는 방식이다. 삽입 정렬은 두 번째 자료부터 시작하여그 앞(왼쪽)의 자료들과 비교하여 삽입할 위치를 지정한 후자료를 뒤로 옮기고 지정한 자리에 자료를 삽입하여 정렬하는 알고리즘이다. 삽입 정렬은 루프당 하나의 키 값을 가진다첫번째 루프의 키 값은 두번째 값이다 (그 다음 루프에서 키값은 세번째, 다음은 네번째 이렇게 된다)그리고 키값을 앞의 값(첫번째 값)과 비교하여 삽입될 위치를 찾는다첫 번째 값을 한칸 뒤로 이동시킨다그리고 삽입될 위치인 첫 번째 위치에 키 값을 삽입한다 즉, 두번째 값은 첫번째와 비교,세번째 값은 두번째와 첫번째 값과 비교,네번째 값은 세번째..

베지어 곡선이란 (Bézier Curve)베지어 곡선(Bézier Curve)은 컴퓨터 그래픽스에서 널리 사용되는 곡선으로, 조절점을 통해 정의됩니다. 이 곡선은 다양한 조절점의 수에 따라 그 형태가 달라지며,특히 CSS 애니메이션에서 도형을 그릴 때, 백터 그래픽스나 고급 애니메이션을 다룰 때 유용하게 사용됩니다. 이번에는 베지어 곡선의 기본 개념과 카스텔조 알고리즘(De Casteljau’s algorithm)을 포함한 수학적 정의를 살펴보겠습니다. 베지어 곡선이 사용되는 곳웹 애니메이션CSS 애니메이션에서 이징 함수로 사용되어 애니메이션의 가속과 감속을 부드럽게 조정합니다.예를 들어, cubic-bezier 함수를 사용하여 custom easing 효과를 만들 수 있습니다.SVGSVG에서 경로를 그..

\W는 비문자단어(알파벳, 숫자, 밑줄 제외한 단어)와 일치한다소문자 w인 \w는 단어 문자를 매치 했던 것과 달리대문자 \W는 비단어 문자를 매치합니다비단어 문자란알파벳(A-Z a-z), 숫자, 언더스코어가 아닌 모든 문자를 포함합니다 \W는 [^A-z0-9_] 로 대체할 수 는 있습니다하지만 A-z 범위에는 ASCII 테이블에 따라 일부 추가 문자가 포함되어 있습니다( ex: [, \, ], ^, _, `) 문자열: AS _34:AS11.23  @#$ %12^*정규표현식: \W첫 번째 일치: AS _34:AS11.23  @#$ %12^*모든 일치: AS _34:AS11.23  @#$ %12^* 비단어 문자를 찾는 것입니다 정규표현식: \w첫 번째 일치: AS _34:AS11.23  @#$ %12^*모..

\w 는 모든 단어문자(알파벳, 숫자, 밑줄) 와 일치한다정규표현식에서 \w 는 단어문자를 매칭하는데 사용됩니다단어문자에는 영문자, 숫자, 밑줄(_) 을 포함합니다그러나 일부 언어에서는 이런 약어가 인식되지 않을 수 있습니다.이때는 대신 문자 클래스인 [A-z0-9_]를 사용합니다 문자열 : A1 B2 c3 d_4 e:5 ffGG77--__--정규표현식: \w첫 번째 일치: A1 B2 c3 d_4 e:5 ffGG77--__--모든 일치: A1 B2 c3 d_4 e:5 ffGG77--__-- 이 표현식은 단어 문자를 하나 매칭합니다.정규표현식: \w*첫 번째 일치: A1 B2 c3 d_4 e:5 ffGG77--__--모든 일치: A1 B2 c3 d_4 e:5 ffGG77--__-- 이 표현식은 0개 이상의..

정량자 뒤 물음표 추가하여 최소한의 횟수로 지정정규 표현식의 기본 동작과 최소 매칭을 위한 수정된 동작을 수행합니다. 기본적인 정량자의 기능에 물음표(?)가 뒤따르면최소한의 횟수로 일치하도록 동작이 변경됩니다. 예를 들면 +(더하기) 연산자의 경우1회 이상 일치이므로최소한의 횟수는 1개가 됩니다. 문자열 : One ring to bring them all and in the darkness bind them정규표현식: r.*첫번째 일치: One ring to bring them all and in the darkness bind them모든 일치: One ring to bring them all and in the darkness bind them 이 표현식은 'r' 다음에 0개 이상의 어떤 문자도 포함..

정량자 (*, +, ?) 의 사용과 중괄호 표기법 비교모든 정량자 표기법을 중괄호 표기법으로 대체할 수 있습니다.문자열 : AA ABA ABBA ABBBA정규표현식: AB*A첫 번째 일치: AA ABA ABBA ABBBA모든 일치: AA ABA ABBA ABBBA 이 표현식은 'A' 다음에 0개 이상의 'B'가 있고 다시 'A'가 오는 패턴을 찾습니다.정규표현식: AB{0,}A첫 번째 일치: AA ABA ABBA ABBBA모든 일치: AA ABA ABBA ABBBA 이 표현식은 'A' 다음에 0개 이상의 'B'가 있고 다시 'A'가 오는 패턴을 찾습니다.AB{0,}는 AB*와 동일합니다.정규표현식: AB+A첫 번째 일치: AA ABA ABBA ABBBA모든 일치: AA ABA ABBA ABBBA 이 표현..

몰음표(?) - 물음표 앞 문자 0회 또는 1회 일치문자열 : -XX-@-XX-@@-XX-@@@-XX-@@@@-XX-@@-@@-정규표현식: -X?XX?X 첫 번째 일치: --XX-@-XX-@@-XX-@@@-XX-@@@@-XX-@@-@@-모든 일치: --XX-@-XX-@@-XX-@@@-XX-@@@@-XX-@@-@@- 이 표현식은 '-' 다음에 'X'가 0회 또는 1회 나타나고,그 뒤에 'XX'가 1회 나타나며, 다시 'X'가 0회 또는 1회 나타나는 패턴을 찾습니다.정규표현식: -@?@?@?-첫 번째 일치: --XX-@-XX-@@-XX-@@@-XX-@@@@-XX-@@-@@-모든 일치: --XX-@-XX-@@-XX-@@@-XX-@@@@-XX-@@-@@- 이 표현식은 '-' 다음에'@'가 0회 또는 1회 나타..

더하기(+) - 더하기 앞 문자 1회 이상 일치문자열 : -@@@- * ** - - "*" -- * ** -@@@-정규표현식: \*+첫 번째 일치: -@@@- * ** - - "*" -- * ** -@@@- 모든 일치: -@@@- * ** - - "*" -- * ** -@@@- 이 표현식은 * 문자가 1회 이상 나타나는 부분을 찾습니다.정규표현식: -@+-첫번째 일치: -@@@- * ** - - "*" -- * ** -@@@- 모든 일치 : -@@@- * ** - - "*" -- * ** -@@@- 이 표현식은 '-' 다음에 '@'가 1회 이상 나타나고 다시 '-'로 끝나는 부분을 찾습니다정규표현식: [^ ]+첫번째 일치: -@@@- * ** - - "*" -- * ** -@@@- 모든 일치 : -@@@..

중괄호를 사용한 문자 반복{m} m번 만큼 반복{m,n}최소 m ~ 최대 n{m,}최소 m 이상문자열: One ring to bring them all and in the darkness bind them정규표현식: .{5}첫번째 일치: One ring to bring them all and in the darkness bind them모든 일치: One ring to bring them all and in the darkness bind them 이 표현식은 임의의 문자(줄바꿈 문자를 제외한)(띄어쓰기 포함) 5개가 연속으로 나타나는 부분을 찾습니다.정규표현식: [els]{1,3}첫번째 일치: One ring to bring them all and in the darkness bind them모든 일치..