"일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.
첫 장 > 프로그램 작성 > 몇 킬로바이트의 JavaScript로 콘솔 스타일 지정

몇 킬로바이트의 JavaScript로 콘솔 스타일 지정

2024-08-01에 게시됨
검색:261

Console Styling in JavaScript with a few kilobytes

당신은 어떤지 모르지만 JavaScript 프로젝트에 콘솔 로그를 보기 좋게 유지하고 싶습니다. 그리고 모든 터미널이 이모티콘을 지원하는 것은 아니므로 콘솔 출력을 색칠하는 것보다 더 좋은 방법이 있을까요?

글쎄요, 원하는 각 콘솔 스타일에 대한 ANSI 이스케이프 코드를 검색하여 해결할 수 있습니다. 아니면 W3Docs와 같은 페이지에서 그 중 일부를 외울 수도 있습니다. 하지만 저는 로그를 보기 좋게 만드는 것을 좋아합니다. 저는 확실히 많은 것을 외울 수 있는 사람은 아니며 어디서나 작동하는 한 가지 방법을 좋아합니다.

글쎄요, 저는 보통 JS에 컬러 로그만 사용하므로 말 그대로 모든 곳에서 작동하는 것이 필요하지 않습니다. 하지만 적어도 JavaScript가 포함된 곳이라면 어디든 작동하는 것입니다.

그래서 저는 필요할 수 있는 모든 ANSI 이스케이프 코드를 함수 형식으로 포함하는 스크립트를 직접 작성하기로 결정했습니다. 그러나 나는 모든 프로젝트에서 동일한 스크립트를 계속해서 복사하는 것이 성가신 일이라는 것을 깨달았습니다. 그래서 npm i 및 init 외에 npm 명령을 사용한 적이 없는 사람으로서 저는 더 자세히 알아보고 프로젝트에 설치할 수 있는(또는 NodeJS가 아닌 프로젝트의 경우 GitHub 저장소를 복제할 수 있는) 비공개 NPM 패키지를 만들기로 결정했습니다.
패키지를 설치할 때마다 NPM 인증을 다루고 싶지 않아서 그냥 공개로 만들었습니다.

오늘 우리가 여기 있는 이유는 다음과 같습니다. javascript-console-styling은 이 프로세스를 쉽게 하기 위해 제가 만든 패키지입니다.

실제로 저와 비슷한 패키지가 이전에 만들어진 적이 있습니다(만들고 나서야 깨달은 사실입니다). 하지만 내 솔루션이 나 또는 나와 같은 누구에게나 더 낫다는 것을 알았습니다.

  • npm에 따르면 내 패키지는 14KB의 공간만 차지했습니다. 다른 유사한 패키지는 같은 양(500KB 이상)의 50배를 차지했습니다. 둘 다 메가바이트 미만이더라도 모든 파일을 쉽게 관리할 수 있기 때문에 더 작은 패키지를 사용하는 것이 더 좋습니다(또는 원할 경우 쉽게 포크하고 수정할 수도 있음)

  • 내 패키지는 함수이기 때문에 다양한 스타일과 장식을 중첩할 수 있습니다... 그리고 다른 스타일의 하위 문자열을 포함하는 전체 스타일 문자열이 있는 경우에도 하위 문자열을 연결할 수 있습니다(내부 하위 문자열 포함). 상위 문자열은 각 스타일 지정 기능이 수행하는 재설정으로 인해 이후 스타일 적용을 중지합니다.)

  • 내 패키지에는 사용자가 터미널에서 출력을 확인할 수 있도록 가능한 모든 색상 및 장식 조합을 보여주는 쉬운 테스트 도구가 있습니다. (테스트 기능은 기본 패키지에는 포함되어 있지 않지만 NPM 페이지 및 NPM 페이지에서 사용할 수 있습니다. GitHub)

따라서 전반적으로 나는 내 코드를 사용하는 것을 선호합니다. 그러나 공개 패키지를 소유하는 것의 일부는 사람들이 그것이 어떻게 도움이 될 수 있는지 확인하여 필요한 경우 스스로 선택할 수 있도록 하는 것입니다.

이것이 제가 만드는 마지막 NPM 패키지가 될 것이라고는 생각하지 않지만 전체 NPM에 대해 동기를 부여할 수 있는 좋은 방법이었습니다!

패키지를 꼭 확인하시고 즐거운 해킹되세요!

릴리스 선언문 이 기사는 https://dev.to/proman4713/console-styling-in-javascript-with-a-few-kilobytes-2gjn?1에서 복제됩니다. 침해 내용이 있는 경우, [email protected]으로 연락하여 삭제하시기 바랍니다. 그것
최신 튜토리얼 더>
  • Python만 사용하여 프런트엔드 구축
    Python만 사용하여 프런트엔드 구축
    프런트엔드 개발은 백엔드에 초점을 맞춘 개발자에게 벅차고 심지어 악몽 같은 작업이 될 수 있습니다. 내 경력 초기에는 프런트엔드와 백엔드 사이의 경계가 모호했고 모두가 두 가지를 모두 처리해야 했습니다. 특히 CSS는 끊임없는 투쟁이었습니다. 불가능한 임무처럼 느껴졌습...
    프로그램 작성 2024-11-05에 게시됨
  • Laravel에서 Cron 작업을 실행하는 방법
    Laravel에서 Cron 작업을 실행하는 방법
    이 튜토리얼에서는 Laravel에서 크론 작업을 실행하는 방법을 보여드리겠습니다. 무엇보다도 학생들을 위해 간단하고 쉽게 작업을 수행할 수 있습니다. Laravel 앱을 구축하는 동안 여러분의 컴퓨터에서 바로 이러한 자동화된 작업을 설정하고 실행하는 방법을 살펴보겠습니...
    프로그램 작성 2024-11-05에 게시됨
  • 패딩은 인라인 요소의 간격에 어떤 영향을 미치며 충돌을 어떻게 해결할 수 있습니까?
    패딩은 인라인 요소의 간격에 어떤 영향을 미치며 충돌을 어떻게 해결할 수 있습니까?
    인라인 요소의 패딩: 효과 및 제한소스에 따르면 인라인 요소의 상단과 하단에 패딩을 추가해도 영향을 미치지 않습니다. 주변 요소의 간격. 그러나 "패딩은 다른 인라인 요소와 겹칩니다"라는 설명은 패딩이 영향을 미치는 특정 상황이 있을 수 있음을 나타냅...
    프로그램 작성 2024-11-05에 게시됨
  • Django 클래스 기반 뷰가 쉬워졌습니다.
    Django 클래스 기반 뷰가 쉬워졌습니다.
    우리 모두 알고 있듯이 django는 웹 애플리케이션 개발 디자인에 MVT(모델-뷰-템플릿)를 사용합니다. 뷰 자체는 요청을 받고 응답을 반환하는 호출 가능 항목입니다. Django는 클래스 기반 뷰라는 것을 제공하므로 개발자는 클래스 기반 접근 방식을 사용하거나 O...
    프로그램 작성 2024-11-05에 게시됨
  • VAKX로 노코드 AI 에이전트 구축
    VAKX로 노코드 AI 에이전트 구축
    If you’ve been keeping up with the AI space, you already know that AI agents are becoming a game-changer in the world of automation and customer inter...
    프로그램 작성 2024-11-05에 게시됨
  • jQuery Datatable에서 커서 기반 페이지 매김을 구현하는 방법은 다음과 같습니다.
    jQuery Datatable에서 커서 기반 페이지 매김을 구현하는 방법은 다음과 같습니다.
    웹 애플리케이션에서 대규모 데이터세트로 작업할 때 페이지 매김은 성능과 사용자 경험에 매우 중요합니다. 데이터 테이블에 일반적으로 사용되는 표준 오프셋 기반 페이지 매김은 대규모 데이터 세트에는 비효율적일 수 있습니다. 커서 기반 페이지 매김은 특히 실시간 업데이트나...
    프로그램 작성 2024-11-05에 게시됨
  • 동기화 엔진이 웹 애플리케이션의 미래가 될 수 있는 이유
    동기화 엔진이 웹 애플리케이션의 미래가 될 수 있는 이유
    진화하는 웹 애플리케이션 세계에서는 효율성, 확장성, 원활한 실시간 경험이 무엇보다 중요합니다. 전통적인 웹 아키텍처는 응답성 및 동기화에 대한 현대적인 요구로 인해 어려움을 겪을 수 있는 클라이언트-서버 모델에 크게 의존합니다. 이것이 동기화 엔진이 등장하여 오늘날 ...
    프로그램 작성 2024-11-05에 게시됨
  • Python을 사용한 컴퓨터 비전 소개(1부)
    Python을 사용한 컴퓨터 비전 소개(1부)
    참고: 이 게시물에서는 쉽게 따라할 수 있도록 회색조 이미지만 사용합니다. 이미지란 무엇입니까? 이미지는 값의 행렬로 생각할 수 있으며, 각 값은 픽셀의 강도를 나타냅니다. 이미지 형식에는 세 가지 주요 유형이 있습니다. 이진: 이 형식의 이미지는 값이 ...
    프로그램 작성 2024-11-05에 게시됨
  • 웹사이트용 HTML 코드
    웹사이트용 HTML 코드
    항공 관련 웹사이트를 구축하려고 노력해왔습니다. 저는 AI를 사용하여 코드를 생성하는 전체 웹사이트를 생성할 수 있는지 확인하고 싶었습니다. HTML 웹사이트가 블로그와 호환됩니까, 아니면 자바스크립트를 사용해야 합니까? 데모로 사용한 코드는 다음과 같습니다. <...
    프로그램 작성 2024-11-05에 게시됨
  • 프로그래머처럼 생각하기: Java의 기본 사항 배우기
    프로그래머처럼 생각하기: Java의 기본 사항 배우기
    이 글에서는 자바 프로그래밍의 기본 개념과 구조를 소개합니다. 변수와 데이터 유형에 대한 소개로 시작한 다음 연산자와 표현식은 물론 제어 흐름 프로세스에 대해 논의합니다. 둘째, 메서드와 클래스를 설명하고 입력 및 출력 작업을 소개합니다. 마지막으로 이 기사에서는 급여...
    프로그램 작성 2024-11-05에 게시됨
  • PHP GD는 두 이미지의 유사성을 비교할 수 있나요?
    PHP GD는 두 이미지의 유사성을 비교할 수 있나요?
    PHP GD가 두 이미지의 유사성을 결정할 수 있습니까?고려 중인 질문은 두 이미지가 동일한지 확인하는 것이 가능한지 묻습니다. 차이점을 비교하여 PHP GD. 이는 두 이미지 간의 차이를 획득하고 그것이 완전히 흰색(또는 균일한 색상)으로 구성되어 있는지 결정하는 것...
    프로그램 작성 2024-11-05에 게시됨
  • 이 키를 사용하여 고급 수준 테스트 작성(JavaScript의 Test Desiderata)
    이 키를 사용하여 고급 수준 테스트 작성(JavaScript의 Test Desiderata)
    이 글에서는 모든 고위 개발자가 알아야 할 12가지 테스트 모범 사례를 배우게 됩니다. Kent Beck의 기사 "Test Desiderata"에 대한 실제 JavaScript 예제를 볼 수 있습니다. 그의 기사는 Ruby에 있기 때문입니다. 이러한 ...
    프로그램 작성 2024-11-05에 게시됨
  • matlab/octave 알고리즘을 C로 포팅하여 AEC에 대한 최상의 솔루션
    matlab/octave 알고리즘을 C로 포팅하여 AEC에 대한 최상의 솔루션
    완료! 나 자신에게 조금 감동받았습니다. 저희 제품에는 에코 제거 기능이 필요하며 세 가지 가능한 기술 솔루션이 확인되었습니다. 1) MCU를 사용하여 오디오 신호의 오디오 출력과 오디오를 감지하고 두 개의 선택적 채널 전환 사이의 오디오 출력과 오디오 입력의 강도에...
    프로그램 작성 2024-11-05에 게시됨
  • 단계별 웹 페이지 구축: HTML의 구조 및 요소 탐색
    단계별 웹 페이지 구축: HTML의 구조 및 요소 탐색
    ? 오늘은 내 소프트웨어 개발 여정의 중요한 단계입니다! ? 나는 첫 번째 코드 줄을 작성하여 HTML의 필수 요소를 살펴보았습니다. 해당 요소와 태그가 포함되어 있습니다. 어제는 웹사이트를 구성하는 복싱 기술을 탐구했고, 오늘은 머리글, 바닥글, 콘텐츠 영역과 같은 ...
    프로그램 작성 2024-11-05에 게시됨
  • 프로젝트 아이디어가 독특할 필요는 없습니다. 그 이유는 다음과 같습니다.
    프로젝트 아이디어가 독특할 필요는 없습니다. 그 이유는 다음과 같습니다.
    혁신의 세계에서는 프로젝트 아이디어가 가치를 가지려면 획기적이거나 완전히 독특해야 한다는 일반적인 오해가 있습니다. 그러나 그것은 사실과 거리가 멀다. 오늘날 우리가 사용하는 많은 성공적인 제품은 경쟁사와 핵심 기능 세트를 공유합니다. 이들을 차별화하는 것은 반드시 아...
    프로그램 작성 2024-11-05에 게시됨

부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.

Copyright© 2022 湘ICP备2022001581号-3