postcss 설정

-

postcss.config.cjs 파일 설정


module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-preset-env'),
    require('tailwindcss'),
    require('autoprefixer'),
  ],
};


PostCSS 설정 파일인 postcss.config.cjs의 내용입니다. 이 파일은 CSS를 변환하고 처리하는 데 사용되는 PostCSS의 동작 방식을 정의합니다.

PostCSS는 CSS를 JavaScript 플러그인을 사용하여 변환하는 도구입니다. 마치 Babel이 JavaScript를 변환하는 것과 비슷하게, PostCSS는 CSS를 다양한 방식으로 조작하고 개선할 수 있게 해줍니다.

PostCSS 설정 파일의 구성 요소 설명

이 설정 파일은 plugins 배열 안에 여러 PostCSS 플러그인을 require() 함수를 통해 불러와서 사용하고 있습니다. 플러그인들은 배열에 나열된 순서대로 CSS에 적용됩니다.

1. require('postcss-import')

  • 용도: CSS 파일 내에서 @import 규칙을 사용하여 다른 CSS 파일을 가져올 수 있게 해주는 플러그인입니다. 이 플러그인이 없으면 @import 규칙은 일반적인 CSS 규칙으로만 해석되거나, 번들러에 의해 처리되지 않을 수 있습니다.
  • 주요 기능:
    • CSS 파일들을 하나로 합쳐서 HTTP 요청 수를 줄일 수 있습니다.
    • 모듈식 CSS 작성을 가능하게 하여, 작은 CSS 파일을 만들고 필요할 때마다 가져와서 사용할 수 있습니다.
    • @import 문이 항상 맨 위에 오도록 CSS 사양을 준수하는 데 도움을 줍니다.

2. require('postcss-preset-env')

  • 용도: 최신 CSS 문법을 사용하여 코드를 작성하더라도, 이 플러그인이 이를 구형 브라우저에서도 호환되도록 변환해 줍니다. CSS 변수, 중첩 규칙, 커스텀 선택자 등 아직 모든 브라우저에서 지원하지 않는 CSS 기능을 사용할 수 있게 해주는 "바벨(Babel) for CSS"라고 생각하면 됩니다.
  • 주요 기능:
    • CSS variables (커스텀 프로퍼티)를 오래된 브라우저에서도 인식할 수 있는 형태로 변환합니다.
    • CSS nesting (중첩)을 풀어줍니다.
    • 다양한 CSS 표준 초안(Draft) 및 실험적 기능을 미리 사용할 수 있게 합니다.

3. require('tailwindcss')

  • 용도: Tailwind CSS 프레임워크를 PostCSS 파이프라인에 통합합니다. Tailwind CSS는 유틸리티 우선(utility-first) CSS 프레임워크로, HTML 클래스 이름을 조합하여 빠르게 UI를 구축할 수 있게 해줍니다.
  • 주요 기능:
    • Tailwind CSS의 기본 스타일과 유틸리티 클래스를 프로젝트의 CSS로 주입합니다.
    • 사용하지 않는 CSS를 제거하는 PurgeCSS와 같은 기능과 함께 사용되어 최종 CSS 파일 크기를 최적화합니다.
    • @apply, @screen 등 Tailwind CSS의 특수 지시문을 처리합니다.

4. require('autoprefixer')

  • 용도: CSS 속성 앞에 **벤더 프리픽스(vendor prefixes)**를 자동으로 추가해 주는 플러그인입니다. 웹 브라우저마다 특정 CSS 속성을 지원하기 위해 webkit-, -moz-, -ms-와 같은 접두사를 붙여야 할 때가 있는데, 이 작업을 자동화해 줍니다.
  • 주요 기능:
    • display: flex;와 같은 속성이 구형 브라우저에서 display: -webkit-box; 또는 display: -ms-flexbox;와 같이 변환되어 호환성을 보장합니다.
    • Can I use... 데이터베이스를 기반으로 어떤 프리픽스가 필요한지 최신 정보를 활용합니다.

PostCSS 파이프라인의 흐름

이 postcss.config.cjs 파일에 정의된 플러그인들은 일반적으로 다음과 같은 순서로 작동하며 CSS를 처리합니다.

  1. postcss-import: 먼저 모든 @import 규칙을 처리하여 CSS 파일들을 하나로 합칩니다.
  2. postcss-preset-env: 합쳐진 CSS에서 최신 CSS 문법을 찾아 구형 브라우저가 이해할 수 있는 형태로 변환합니다.
  3. tailwindcss: Tailwind CSS의 유틸리티 클래스 및 규칙들을 최종 CSS에 추가하고, Tailwind CSS의 특정 지시문을 처리합니다.
  4. autoprefixer: 마지막으로, 모든 CSS 속성에 필요한 벤더 프리픽스를 자동으로 추가하여 최종 CSS가 다양한 브라우저에서 올바르게 렌더링되도록 합니다.

이러한 플러그인 조합은 현대적인 프론트엔드 개발에서 CSS를 작성, 관리, 최적화하고 다양한 브라우저 환경에서 호환성을 보장하는 데 매우 강력한 워크플로우를 제공합니다.



댓글

댓글 쓰기

이 블로그의 인기 게시물

아파치 보안관련 기본설정

-
 🔧 기본 설정 항목들 1. ServerTokens & ServerSignature 설명 : Apache가 클라이언트에게 서버 정보를 얼마나 제공할지 결정함. 보안 권장 설정 : ServerTokens Prod ServerSignature Off Prod : 버전 정보 없이 "Apache"만 반환. Off : 에러 페이지나 디렉토리 목록에 서버 정보 숨김. 2. Timeout 설명 : 클라이언트와의 연결에 대해 Apache가 기다리는 시간. 권장 설정 (성능 및 DoS 방지): Timeout 30 기본값 60초 → 30초로 줄이면 유휴 연결을 빠르게 정리 가능. 3. KeepAlive & MaxKeepAliveRequests 설명 : 하나의 TCP 연결로 여러 요청을 처리할 수 있게 함. 권장 설정 : KeepAlive On MaxKeepAliveRequests 100 KeepAliveTimeout 5 KeepAliveTimeout 은 너무 길면 자원 낭비. 일반적으로 2~5초 권장. 4. 디렉토리 보호 설정 <Directory /var/www/html>     Options -Indexes     AllowOverride None     Require all granted </Directory> -Indexes : 디렉토리 인덱싱 비활성화. -  AllowOverride None : .htaccess 비활성화하여 보안 강화. Apache에서 HttpOnly 쿠키 설정하기 ✅ 방법 1: Apache에서 Set-Cookie 에 HttpOnly 추가하기 <IfModule mod_headers.c> Header edit Set-Cookie ^(.*)$ "$1;HttpOnly;Secure" </IfModule> 🔎 설명: mod_headers 모듈을 사용하여 모든 Set...
자세한 내용 보기

티베로 이관 작업 절차

-
티베로 이관 작업 절차 /* 기존 DB 환경 파악 신규 DB설치시 NLS_CHARACTERSET, DB_BLOCK_SIZE 기존과 동일해야 데이터 import 시 오류없이 import 된다. */ /*1.  터미널에서 기존 db 접속후 환경 파악 */ /* 티베로 db 접속 */ /* tbsql 사용자/패스워드@sid */ tbsql sys/tibero@SID /* DB_BLOCK_SIZE 확인 */ SHOW PARAMETER DB_BLOCK_SIZE SQL> SHOW PARAMETER DB_BLOCK_SIZE NAME                         TYPE     VALUE ---------------------------- -------- ---------------------------------------- DB_BLOCK_SIZE                INT32    8192 /* CHARACTER_SET 확인 */ SQL>  SELECT * FROM SYS._VT_NLS_CHARACTER_SET; CHARACTERSET_NAME NCHAR_CHARACTERSET_NAME ----------------- ----------------------- MSWIN949          UTF16 /*2. 테이블 스페이스 생성 스크립트 실제테이블 스크립트 용량 계산 추출 */ set linesize 1000 set pagesize 50000 set trimspool on spool create_tablespace.sql SELECT 'create tablespace ' || TABLESPACE_NAME || ' datafile ''' || ...
자세한 내용 보기

윈도우 네트워크 리소스 사용권한 오류

-
이미지
윈도우에서 네트워크 공유 오류 처리 이 네트워크 리소스를 사용할 권한이 없는 것 같습니다. 이 서버의 관리자에게 문의하여 액세스 권한이 있는지 확인하십시시오. 이렇게 메세지 뜨고 공유가 안될경우 cmd 콘솔창을 띄워서 기존에 등록되어 있는 연결정보를 다 삭제 하고 다시 접속하면 연결이 된다. 연결된 정보 확인 cmd 창에서  net use C:\Windows\System32>net use 새 연결 정보가 저장됩니다. 상태         로컬      원격                      네트워크 ------------------------------------------------------------------------------- OK                     \\192.168.6.20\IPC$       Microsoft Windows Network 명령을 잘 실행했습니다. 확인후 연결 끊기 net use /delete * 실행후 y를 눌러서 계속하면 현재 연결을 끊어 버립니다. 연결을 끊고 다시 네트워크 접속을 하면 정상적으로 접속이 됩니다. 전체가 아니고 해당 연결만 삭제 하는 방법은 net use /delete \\공유폴더명 위와 같이 하여도 해결이 안 될 경우 자경증명 관리자에서 저장된 자격증명 삭제하기 윈도우 키를 누른후 자격 증명 관리자 실행   자격증명 관리자 메뉴에 들어가서 Windows 자격증명 메뉴를 클릭하여 오류가 나는 아이피를 선택하여 제거 하고 다시 접속합니다.
자세한 내용 보기