2023-05-14
-
-
- js의
exec()
메서드는 주어진 문자열에서 일치하는지 여부를 배열 혹은 null로 반환해준다. + -
+
js의
exec()
메서드는 주어진 문자열에서 일치하는지 여부를 배열 혹은 null로 반환해준다.-
-
- 이때 exec()에 플래그를 설정(/foo/g, /foo/y 등)하면 이전 일치의 인덱스를 저장하게 된다. -
- 문서에 따르면 아래와 같다. +
-
+
이때 exec()에 플래그를 설정(/foo/g, /foo/y 등)하면 이전 일치의 인덱스를 저장하게 된다.
+
+ -
+
문서에 따르면 아래와 같다.
Each call to
exec()
will update its lastIndex property, so that the next call to exec() will start at the next character.
- - 즉, exec()를 호출할 때마다 lastIndex 속성이 업데이트 된다. -
- 그러면 다음 exec()가 호출되면 다음 문자에서 시작되므로 주의해야 한다. -
- 더 이상 맞는 것을 찾지 못하면 null을 반환한다. -
- 아래처럼 null이 반환되고, 또 다시 호출하면 다시 처음부터 실행한다. +
-
+
즉, exec()를 호출할 때마다 lastIndex 속성이 업데이트 된다.
+
+ -
+
그러면 다음 exec()가 호출되면 다음 문자에서 시작되므로 주의해야 한다.
+
+ -
+
더 이상 맞는 것을 찾지 못하면 null을 반환한다.
+
+ -
+
아래처럼 null이 반환되고, 또 다시 호출하면 다시 처음부터 실행한다.
-// 예시 const str = "Helloworld!"; const pattern = /([A-Za-z]+)|([ !])/g; @@ -182,6 +193,7 @@
About what I learned at 2023
+
2023-04-05
하이드레이션(hydration)
@@ -194,6 +206,7 @@2023-04-05
+
2023-04-05
- web API의
stopPropagation()
메서드는 같은 이벤트일 때만 상위 요소로의 전파를 막는 메서드이다. diff --git a/learned/what-i-learned-2024/index.html b/learned/what-i-learned-2024/index.html index ac90968..26cbb47 100644 --- a/learned/what-i-learned-2024/index.html +++ b/learned/what-i-learned-2024/index.html @@ -154,26 +154,78 @@About what I learned at 2024
2024-07-03
+2024-08-06
-
-
- providers 배열에 useClass를 사용하여 서비스를 토큰으로 등록한 경우? +
- 샌드박스 환경에서만 실제로 수정하지 않은 요소의 css가 깨지는 현상이 발생했다. +
- 젠킨스 workspace가 꼬였을지도 모르니 모두 지우고 다시 빌드해봤지만 여전히 발생했다. +
- 깨지는 css 내용을 각 phase마다 비교해보았지만 똑같았다. +
- 빌드된 css가 제대로 매핑되어 있는지
<head>
태그를 확인한 순간, +-
+
!DOCTYPE
위에<script>
태그가 있는 것을 발견했다.
+- (서버에서 페이지 html문서를 서빙해줄 때 태그를 바깥에 그려서 주고 있었음) +
+
(1)
+<!DOCTYPE html>
은 어디까지 영향을 주는 것인가?A DOCTYPE is a required preamble. + +DOCTYPE은 필수 (맨앞)서문이다. +
DOCTYPEs are required for legacy reasons. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications. Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications. + +DOCTYPE은 기존 호환성 이유로 인해 필요하다. **이걸 생략하면 브라우저는 일부 사양과 호환되지 않은 다른 렌더링 모드를 사용할 수도 있다. DOCTYPE을 선언해야만 브라우저가 관련 사양을 따르기 위해 최적의 방식으로 동작한다. +
by HTML공식 스펙문서
+즉, 이를 선언하지 않거나 html문서 맨 앞에 쓰지 않으면 문서 전체 렌더링에 영향을 준다!!!
+(2) 렌더링 모드란?
+DOCTYPE은 브라우저가 문서를 렌더링 할 때 [quirks mode](https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)로 바뀌지 않도록하는 것이 유일한 목적입니다. +
by MDN문서
+-
+
- Standard mode
+
-
+
- W3C 표준에 따라 렌더링 +
- DOCTYPE을 선언하면 이 모드로 실행됨 +
- 브라우저가 출력하려는 하는 문서가 최신이라고 판단하면 이 모드로 렌더링 +
+ - Quirks mode
+
-
+
- 오래된 브라우저의 행동을 모방하여 렌더링 +
- 브라우저가 출력하려는 하는 문서가 예전 문서라고 판단하면 이 모드로 렌더링 +
- 오래된 웹 페이지들이 최신 버전 브라우저에서 깨져 보이지 않으려는 것이 목적인 모드 +
+ - Almost Standard mode
+
-
+
- table cell에서 Quirks mode로 실행하는 것 외에는 Standard mode와 동일 +
- ex) 사파리, 오페라, Gecko 기반의 모든 브라우저 (Firefox 1.0.1 + IE8) +
+
(3) 어떤 모드로 렌더링되었는지 어떻게 알 수 있을까?
+-
+
document.compatMode
+- 위 값이
BackCompat
라면 쿼크모드이고, 그 외에는CSS1Compat
이다.
+
+
+2024-07-03
+-
+
-
+
providers 배열에 useClass를 사용하여 서비스를 토큰으로 등록한 경우?
- 해당 서비스를 컴포넌트로 주입(DI)할 때는 등록한 토큰 이름으로 가져와야 한다.
APP_TOKEN
으로ServiceA
를 provider로 등록했다면,inject(APP_TOKEN)
으로 주입해야 한다.
import { NgModule } from '@angular/core'; +
import {NgModule} from "@angular/core"; @NgModule({ - providers: [ - { provide: APP_TOKEN, useClass: ServiceA } - ] + providers: [{provide: APP_TOKEN, useClass: ServiceA}], }) export class AppModule {} -
import { Component, Inject } from '@angular/core'; +
import {Component, Inject} from "@angular/core"; @Component({ - selector: 'app-root', - template: `Value: {{ value }}` + selector: "app-root", + template: `Value: {{ value }}`, }) export class AppComponent { value: string; @@ -185,6 +237,7 @@
About what I learned at 2024
+
2024-03-15
- Not Allowed Attribute Filtered 이슈를 만났다!
@@ -199,6 +252,7 @@
2024-03-15
+
2024-02-27
- position: relative > position: absolute에 right:0도 없는데 맨 뒤에 붙는다면?