JavaScript

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

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

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

자바스크립트 primitive types은 garbage collecting될까?

자바스크립트는 개발자가 메모리를 직접 관리할 수 없다. 내부적으로 Mark-and-Sweep 방법을 사용하여 참조가 없어진 데이터를 알아서 가비지 컬렉팅을 하는 것이다. 그렇다면 참조형 데이터가 참조를 잃었을 때 GC로 메모리가 해제되는 건 알았다. 그렇다면 기본형 데이터는 GC가 일어나는 걸까? 스택오버플로우에서 같은 문제에 대해서 생각해본 사람이 있었고, 어느정도 답변을 얻을 수 있었다. 생각해보니, 당연히 GC는 일어나지 않는다고 보는게 맞는 것 같다. 자바스크립트는 실행 컨택스트 내부에 실행 환경과 관련된 환경이 제공되고, 기본형 데이터는 실행 콘텍스트 (콜스택에 기본형 데이터가 저장된다는 부분이 이 점을 의미하는 것 같다 반면에 참조형 데이터는 힙에 저장된다)에 위치하게 된다. 따라서, 해당 실..

Web animations API 사용하기 (animate)

웹 애니메이션을 별도의 라이브러리 설치 없이 사용할 수 있다. 내장된 Web api를 사용하여 간단한 애니메이션을 구현할 수 있다. HTML title lorem ippsum CSS .phrase { background: #ff99ff; text-align: center; padding: 10px; } Javascript const tag = document.querySelector('.phrase'); tag.addEventListener('click', () => { tag.animate( [ {transform: 'translateY(0px)'}, {transform: 'translateY(15px)'}, {transform: 'translateY(0px)'}, ], { duration: 1500,..

사이트에서 나가시겠습니까? 묻기

입력이 있는 페이지에서 잔뜩 글을 작성 중인데, 실수로 X 버튼을 누른다면 어떻게 될까? 대부분의 웹사이트는 바로 닫히지 않고 웹페이지를 닫을 것인지 묻는 알림창이 뜰 것이다. 이는 당연히 자동으로 생성되는 기능이 아니라, 개발자가 구현해주어야 하는 부분이다. 다음과 같이 구현할 수 있다. window.addEventListener('beforeunload', function (event) { // 경고 메시지를 설정합니다. event.returnValue = '페이지를 떠나시겠습니까?'; // 이벤트 객체의 returnValue 속성에 경고 메시지를 설정하면 브라우저가 경고를 표시합니다. }); 적절하게 script에 넣어줌으로써, 페이지를 진짜로 떠날지 마지막으로 물을 수 있다.

try catch의 함정

try catch를 사용하면, 예상할 수 있는 여러 에러 상황을 처리할 수 있다. 이말인 즉슨 웹페이지에 에러가 발생해도 에러를 바로 처리하기 때문에 작동에 문제가 생기지 않게 해줄 수 있다. 다만, try catch를 사용하여 예기치 못한 상황이 발생할 수도 있는데. 왜냐하면 기본적으로 에러 상황을 바로 처리하여 에러가 발생하지 않았던 것 처럼 자바스크립트가 실행된다는 점이다. 예를 들어, redux saga를 사용중인 앱에 api 호출 부분에서 try catch를 사용해버리면, redux saga에서 실패 시 처리 부분에 진입하는 경우의 수가 사라져버린다. try catch로 곧바로 API 호출 실패에 대한 처리를 해버렸기 때문에 redux saga는 이 API 호출이 성공된 것으로 해석해버리고 Su..