전체 글

Biome.js 사용 후기 (prettier + eslint)

Biome.js는 Rust로 작성된 prettier와 eslint를 합친 기능을 가지는 FE lint, formatter 라이브러리이다.https://biomejs.dev/ BiomeFormat, lint, and more in a fraction of a second.biomejs.devBiome이 가지는 가장 큰 장점은 빠르다는 점이다.빠른 이유는 Rust로 작성되었기 때문인데, 최근 FE 개발 생태계에서 등장하고 있는 Rust로 작성된 라이브러리중에 하나라고 할 수 있다.(이외에도  Rust로 작성된 라이브러리는 turbopack, swc, farm등이 있다) 아쉬운 점으로는 아직 eslint가 쌓아온 생태계를 따라오지 못하기 때문에 커스텀에 제약이 있을 수 있는 점이다.👻 예를 들면, biome..

commander를 이용한 JS CLI 라이브러리 File Output 생성하기

종종 CLI 기능이 있는 라이브러리를 사용하면, 파일을 생성해주는 기능이 있는 경우를 종종 봤다. 이번에는 이를 어떻게 구현할 수 있을지 직접 만들어봤다. 작성한 colors-helper-tools 라이브러리의 cli 코드이다.빨간색으로 테두리친 부분이 CLI 코드에서 실제로 file output을 생성하는 부분이다.-f나 --file 옵션을 사용하면, 파일을 생성한다. 이때, 파일 이름은 중복이 일어나면 에러가 발생할 수 있다.때문에 현재 시간을 이용하여 파일을 만듦으로써 중복을 방지한다./** * * @param prefix file name prefix * @param extension file_name.extension * @returns file name String */const generat..

번들러 Rollup 세팅해보기

Javascript 라이브러리를 만들 때, 번들링을 하면 여러 장점이 있다.Tree Shaking을 하여 불필요한 코드가 최종 결과물에 포함되지 않도록 할 수 있다. (최종 번들 크기를 줄일 수 있)모듈화된 코드들을 하나의 js 파일로 만들기 때문에, 네트워크 요청 비용을 절감하고 코드의 보안성을 높일 수도 있다.다양한 플러그인을 사용할 수 있고, 필요한 폴리필을 자동으로 포함시킬 수 있으 transpiling을 간편하게 설정할 수 있다. (다양한 환경에서 코드가 호환되도록 할 수 있다.) HMR(Hot Module Replacement)과 같은 개발환경을 구축하는데도 도움이 된다.소스 맵(Source Map)을 생성하여 디버깅을 쉽게 할 수 있다. (번들된 코드가 아닌 원본 코드의 위치와 내용을 확인할..

commander.js를 사용한 js CLI 라이브러리 구현 (with 예제)

CLI 라이브러리를 구현하기 위해서는 여러 키워드들에 대해서 알아야 한다. - bin 등록 (package.json의 bin)- 커맨드를 통해 인자를 받기 위한 process.argv- shell 스크립트 작성등등... 위와 같이 CLI 라이브러리 구현을 위해서 많은 고려사항들이 있다. 이때, commander.js을 사용하면 js로 간단하게 나만의 cli 라이브러리를 구현할 수 있다. commander.js는 Node.js 환경에서 CLI를 쉽게 작성할 수 있게 해주는 라이브러리로, 명령어와 옵션을 간단하게 정의하고 파싱할 수 있는 기능을 제공한다.🎶 복잡한 코드 작성과 테스트 과정을 줄일 수 있다. npm i commander commander를 설치한 뒤, 다음의 예제 코드를 살펴보자. ❓ #!/..

프론트엔드 개발과 Mocking (axios-mock-adapter, Mock Service Worker)

프론트엔드 개발을 진행할 때, 많은 경우 서버 API 개발이 우선시 되어야 하는 경우가 많은 것 같다. 아무래도, 데이터를 받아와 웹 페이지를 구성해야 하는 경우가 많다보니 그런데 API 개발이 선행되지 않았을 때 프론트엔드 개발자는 무엇을 해야할까? 다양한 케이스가 있을 수 있지만, mock(소프트웨어 개발을 위해 사용하는 가짜 객체)을 가지고 API 연결을 하기 전에 미리 페이지를 개발할 수 있다. 이때, mock 객체를 하드코딩하여 사용하면 실제 API 통신 환경과는 다소 동떨어진 개발을 하게 되는데 API 환경을 유사하게 구현하여 mocking 개발을 도와주는 라이브러리가 있다. 👻 axios-mock-adapterhttps://www.npmjs.com/package/axios-mock-adap..

웹 성능 최적화를 위한 Critical CSS with 예제

웹 페이지의 로딩 속도는 사용자 경험과 검색 엔진 순위에 매우 중요한 영향을 미친다. 특히 모바일 기기에서의 웹 사용이 늘어나면서 빠른 페이지 로딩이 더욱 중요해졌다. 만약 당신이 CSS 파일을 불러오면, 이때 렌더링은 멈추게 된다.따라서, 초기에 중요한 CSS와 중요하지 않은 CSS를 구분하여 중요한 CSS를 먼제 제공하고 비동기적으로 중요하지 않은 CSS를 제공하면 더 빠른 웹페이지 로딩이 가능하다. 👻 CSS는 렌더링 차단 리소스: 브라우저는 페이지를 표시하기 전에 CSS 파일을 다운로드하고 파싱해야 한다. 👻 때문에 CSS 파일이 크거나 네트워크 상태가 좋지 않은 경우 CSS 파일을 요청하면 웹페이지를 렌더링하는 데 걸리는 시간이 크게 늘어날 수 있다. 즉, Critical CSS는 웹 페이지..

Etag를 활용한 브라우저 리소스 캐싱

Etag 😎 ETag HTTP 응답 헤더는 특정 버전의 리소스를 식별하는 식별자이다. (보통 지문으로 비유된다) 서버는 각 리소스에 대해서 Etag를 생성하고 버전을 관리한다. 웹 서버가 내용을 확인하고 변하지 않았으면, 웹 서버로 full 요청을 보내지 않기 때문에, 캐쉬가 더 효율적이게 되고, 대역폭도 아낄 수 있게 해준다. 🍎 특정 URL의 리소스가 변경되었을 때 Etag가 변경되어 새로 생성된다. ETag 는 지문과 같은 역할을 하면서 다른 서버들이 추적하는 용도에 이용되기도 한다. ETag 를 비교하여 리소스가 서로 같은지의 여부를 빠르게 판단할 수 있지만, 서버에서 무기한으로 지속될 수 있도록 설정할 수도 있다. 👻 ETag는 주로 웹 캐시 관리에 사용되며, 캐시된 리소스가 여전히 유효한지 확..

브라우저 window.navigation 객체로 히스토리 관리하기

자바스크립트의 Window 객체는 브라우저 창이나 프레임을 나타내는 중요한 객체다. 이 객체는 다양한 속성과 메서드를 제공하며, 그 중 navigation 속성은 브라우저의 이력을 관리하고 탐색하는 데 사용된다. 특히, window.navigation.entries() 매서드는 기존 브라우저에서 보안 문제로 확인할 수 없었던 브라우저 히스토리를 배열로 반환해주는 매소드이다. window.navigation.entries() // (2) [NavigationHistoryEntry, NavigationHistoryEntry] NavigationHistoryEntry는 id, index, key, ondispose, sameDocument, url과 같은 중요한 정보들을 가지고 있다. 그 외에도 back, f..