프론트엔드 개발 생태계에서 Rust 개발 툴들

AWS Submit 2024에서 개발을 할 때 중요하게 고려해야할 요소에 대해서 들었던 기억이 있다.그건 바로 "비용"인데, 비용을 중요한 요소로 고려한다면 프로그래밍 언어부터 효율적으로, 리소스를 적게 사용하는 그런 고성능의 언어를 선택하는 것도 하나의 방법이라는 이야기를 들었다. 그 이야기를 듣고 떠올렸던 게 바로 FE 개발 환경에 사용되는 bundler, compiler, formatter 같은 개발 툴들이 Rust로 작성되는 경우가 많아지고 있다는 점이었다.  AWS를 사용할 때 Rust를 사용해서 비용이 낮아질까?👻 적은 메모리를 사용 -> 더 작은 인스턴스를 사용할 수 있다. (비용 절감) Rust는 다음과 같은 장점을 지니는 언어로, 개발자들 사이에서 인지도가 올라가고 있는 언어이다.Rus..

• format_list_bulleted 웹 개발
• · 2024. 7. 2.
• textsms

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..

• format_list_bulleted 웹 개발
• · 2024. 6. 24.
• textsms

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..

• format_list_bulleted JavaScript
• · 2024. 6. 16.
• textsms

번들러 Rollup 세팅해보기

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

• format_list_bulleted JavaScript
• · 2024. 6. 7.
• textsms

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를 설치한 뒤, 다음의 예제 코드를 살펴보자. ❓ #!/..

• format_list_bulleted JavaScript
• · 2024. 6. 4.
• textsms

프론트엔드 개발과 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..

• format_list_bulleted 기타
• · 2024. 5. 25.
• textsms