From 10d2896993e1ca1785c7f6ece645e4977b24dbb1 Mon Sep 17 00:00:00 2001 From: Roomy Date: Tue, 6 Aug 2024 20:31:10 +0900 Subject: [PATCH] publishing to gh-pages (2024-08-06) --- index.xml | 2 +- learned/index.xml | 2 +- learned/what-i-learned-2023/index.html | 27 +++++++--- learned/what-i-learned-2024/index.html | 72 ++++++++++++++++++++++---- 4 files changed, 85 insertions(+), 18 deletions(-) diff --git a/index.xml b/index.xml index 9754a11..d603be5 100644 --- a/index.xml +++ b/index.xml @@ -53,7 +53,7 @@ Mon, 01 Jan 2024 00:00:00 +0000 https://wacilpong.github.io/blog/learned/what-i-learned-2024/ - 2024-07-03 providers 배열에 useClass를 사용하여 서비스를 토큰으로 등록한 경우? 해당 서비스를 컴포넌트로 주입(DI)할 때는 등록한 토큰 이름으로 가져와야 한다. AP + 2024-08-06 샌드박스 환경에서만 실제로 수정하지 않은 요소의 css가 깨지는 현상이 발생했다. 젠킨스 workspace가 꼬였을지도 모르니 모두 지우고 다시 빌드해봤지 diff --git a/learned/index.xml b/learned/index.xml index 8c24004..d25f744 100644 --- a/learned/index.xml +++ b/learned/index.xml @@ -17,7 +17,7 @@ Mon, 01 Jan 2024 00:00:00 +0000 https://wacilpong.github.io/blog/learned/what-i-learned-2024/ - 2024-07-03 providers 배열에 useClass를 사용하여 서비스를 토큰으로 등록한 경우? 해당 서비스를 컴포넌트로 주입(DI)할 때는 등록한 토큰 이름으로 가져와야 한다. AP + 2024-08-06 샌드박스 환경에서만 실제로 수정하지 않은 요소의 css가 깨지는 현상이 발생했다. 젠킨스 workspace가 꼬였을지도 모르니 모두 지우고 다시 빌드해봤지 diff --git a/learned/what-i-learned-2023/index.html b/learned/what-i-learned-2023/index.html index 0f66870..bb794c6 100644 --- a/learned/what-i-learned-2023/index.html +++ b/learned/what-i-learned-2023/index.html @@ -156,18 +156,29 @@
About what I learned at 2023

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도 없는데 맨 뒤에 붙는다면?