[TIL] 08/19 :: favicon middleware / !important

yeseul·2024년 8월 30일

<TIL>

목록 보기
37/43

* 문제상황 1.

❗ favicon 을 추가했는데도, 배포된 사이트에 반영이 안됨.

-> 미들웨어에 걸려서 파비콘 경로가 안들어가짐
-> 왜 걸렸을까?
-> 디자이너님이 제공해주신 두개의 파비콘을 테스트해본후 결정하기위해 파일명을 favicon_green.ico / favicon_white.ico 로 두개로 구분해놨었다.
-> 미들웨어 통과시키는 파일명은 favicon.ico

✔️ TEST

  • 크롬 개발자도구 Elements 탭 선택
  • head 태그 안에서 favicon 경로를 찾아서 localhost 뒤에 넣고 이동해봤는데, 경로이동 불가.

  • 원래라면 아래처럼 잘 이동되어 파비콘이 나와야한다.

* middleware 확인

import { type NextRequest } from 'next/server';
import { updateSession } from '@/supabase/middleware';

export async function middleware(request: NextRequest) {
  return await updateSession(request);
}

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)']
};
  • 위와 같은 middleware 설정은 특정 리소스나 경로에 대해 성능을 최적화하고 불필요한 처리를 피할 수 있다.
  • 정적 파일이나 이미지 파일은 자주 요청되며, 이를 middleware에서 제외함으로써 서버 성능을 높일 수 있다.
  • 또한, 파비콘의 경우 웹사이트가 로드될 때마다 요청되므로, 이를 middleware의 적용에서 제외하여 빠르게 제공되도록 하고 있다.

-> 특정 경로와 파일 형식을 middleware의 처리에서 제외함으로써, 성능을 최적화하고 불필요한 서버 부하를 줄일 수 있다. favicon.ico가 미들웨어의 처리에서 제외된 이유는 파비콘이 요청될 때 별다른 처리가 필요하지 않기 때문에, 이를 빠르게 제공하기 위함이다.


* Middleware Matcher

: 미들웨어는 모든 요청에 대해 실행되며, 요청을 처리하거나 가로채는 데 사용된다.
: matcher 설정은 특정 경로 패턴에 대해서만 middleware 가 적용되도록 지정하는 역할을 한다.
따라서 위의 코드를 살펴보면,

/_next/static, /_next/image, favicon.ico, 그리고 특정 확장자(svg, png, jpg, jpeg, gif, webp)를 제외한 모든 경로에 대해 middleware를 적용하겠다는 의미이다.

* 해결방법

  • favicon_green.ico / favicon_white.ico 파일명 favicon.ico 로 수정

* 문제상황 2.

❗ swal 로 띄우는 모달을 (반응형으로) 모바일 크기에서도 CSS 를 커스텀해서 수정해야하는데, 어떤건 스타일이 적용되고, 어떤건 안됨

* 해결방법

💡 !important

-> 특정 스타일 규칙이 다른 모든 규칙보다 우선하게 만들기 위한 속성

@media (max-width: 440px) {
  .swal-confirm-button {
    width: 311px;
    height: 48px;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }
  .swal-popup {
    width: 311px;
    height: 164px;
    max-width: 100%;
    border-radius: 0;
    background-color: #ffffff;
    padding: 0;
    box-shadow: 16px 16px 30px 0px rgba(0, 0, 0, 0.06);
  }
  .swal-title {
    font-size: 14px;
    color: #111111;
    font-weight: 600;
    text-align: center;
    line-height: 20px;
    padding: 48px 16px;
  }
  .swal-actions {
    display: flex !important;
    justify-content: center !important;
    width: 311px !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .swal2-actions {
    margin: 0 !important;
  }
}
  • swal-confirm-button, swal-popup, swal-title 은 !important 없어도 웹 css 말고 미디어쿼리로 적용한 css 가 우선적으로 잘 적용된다.
  • swal-actions 는 웹에 적용한 css로 계속 적용돼서 !important 를 넣어주니 그제서야 우선적으로 모바일 css 가 적용됨.

🤔 이유가 뭘까?

반응형 디자인에서 미디어 쿼리를 사용해 특정 조건에서만 스타일을 적용하는 경우, 해당 환경에서 적용되는 다른 스타일과 충돌이 발생할 수 있다.
예를 들어, 미디어 쿼리 내부의 스타일이 다른 곳에서 이미 강하게 적용된 스타일과 충돌하면, !important 없이 원하는 결과가 나타나지 않을 수 있다.

즉,
!important가 없는 경우에도 스타일이 적용되는 이유는 명시도나 상속, 다른 스타일 규칙들의 우선순위 때문에 이미 충분히 강한 스타일 규칙이기 때문이다. 반대로, !important가 필요하다면 이는 다른 규칙들과의 우선순위 충돌을 해결하기 위한 강제 조치라고 볼 수 있다.

그렇다면,
!important 를 남용할 확률이 높아지는데.. 코드가 너무 지저분해보여서 다른방법이 뭐가있을지 검색해봤다.

!important는 특정 스타일이 어떤 상황에서도 무조건 적용되어야 할 때 사용하지만, 유지보수가 어려워질 수 있다. 가능하면 명시도(specificity)를 올리는 방법을 먼저 고려하는 것이 좋다.

* 명시도(Specificity)

: 브라우저가 어떤 스타일 규칙을 적용할지를 결정하는 기준.
스타일이 여러개의 규칙에 의해 지정될 때, 어떤 규칙이 우선하여 적용될지를 정하는 원리이다.
명시도가 높을수록 해당 스타일이 다른 스타일보다 우선적으로 적용된다.

CSS 선택자에는 네 가지 주요 유형이 있으며, 각 유형마다 다른 가중치가 부여된다.
이 가중치를 합산하여 명시도를 계산한다.
명시도는 보통 4자리 숫자로 나타내며, 아래와 같은 형식으로 가중치가 부여된다.

  • 인라인 스타일: 1000 (예: <div style="color: red;"></div>)
  • ID 선택자: 0100 (예: #header)
  • 클래스, 속성, 의사 클래스 선택자: 0010 (예: .container, [type="text"], :hover)
  • 태그, 의사 요소 선택자: 0001 (예: div, h1, ::before)

명시도 계산 요약

  1. 인라인 스타일은 가장 높은 우선순위
  2. ID 선택자는 그 다음으로 높은 우선순위
  3. 클래스, 속성, 의사 클래스 선택자는 중간 우선순위
  4. 태그와 의사 요소 선택자는 가장 낮은 우선순위
  5. 동일한 명시도의 규칙이 있다면, CSS 파일에서 나중에 정의된 규칙이 우선이다.

가능하면 명시도(specificity)를 올리는 방법을 먼저 고려해보자!

!important를 사용하지 않고도 스타일을 오버라이드하려면,
기존 스타일보다 높은 명시도를 가진 선택자를 사용할 수 있다.
예를 들어, 클래스 선택자보다 높은 명시도를 가지는 ID 선택자를 사용하거나, 클래스 선택자를 조합하여 명시도를 높일 수 있다.

/* 기존 스타일 */
.btn {
  color: blue;
}

/* 오버라이드 스타일 */
.custom-container .btn {
  color: red; /* 명시도가 높아져서 오버라이드 */
}

🤔라이브러리나 프레임워크를 사용하면 CSS를 커스터마이즈하거나 수정할 때 !important를 많이 사용하게 되는데..

  • !important 사용 시 고려해야 할 점과 대안

    • 라이브러리 커스터마이징:
      • 라이브러리의 기본 스타일을 오버라이드해야 하는 경우,
        !important는 간단하고 빠른 해결책이 될 수 있다.
      • 라이브러리에서 적용된 스타일의 명시도가 매우 높은 경우(예: 인라인 스타일, 여러 클래스가 조합된 스타일 등), 이를 덮어쓰기 위해 !important를 사용하는 것이 타당할 수 있음.
    • 빠른 해결: 프로젝트가 빨리 진행되어야 하고, 명시도를 계산하기 복잡한 상황에서는 !important를 사용하는 것이 실용적일 수 있다.

  • 유틸리티 클래스 활용:
    TailwindCSS 같은 유틸리티 클래스 기반 프레임워크를 사용하면, 많은 경우 !important 없이도 원하는 스타일을 쉽게 적용할 수 있다. Tailwind는 기본적으로 유틸리티 클래스에 높은 우선순위를 부여하고 있어, 명시도 문제를 최소화 할 수 있다.

profile
yeseul
이전 포스트

[TIL] 08/20 :: unReadcount

다음 포스트

[TIL] Image 컴포넌트 최적화

0개의 댓글