자바스크립트 Proxy 객체를 사용해서 State 만들어 보자

React를 사용하면 useState를 통해서 데이터를 바꿔서 DOM을 다시 그리는 기능을 사용할 수 있다. 생각해보면, 순수 자바스크립트로 화면을 바꾸고자 한다면 DOM에서 element를 찾은 뒤에 데이터를 직접 수정해줘야 하는 부분이다. 그래서 어떻게 React는 이런 반응성, Reactivity를 구현했을까 고민해보고 자바스립트의 Proxy 객체를 사용해서 State를 비슷하게 구현해보자 하였다. 🙌 직접 구현한 예제 최대한 React와 비슷하게 구현해보려고 노력했다. 다음은 구현한 코드 내용인데, 일단 HTML이다.  root에 element가 삽입되는 것으로 생각했고, 하나의 js를 통해서 이를 통제할 수 있도록 구현해봤다. Proxy를 사용해서 구현했는데, Proxy..

• format_list_bulleted JavaScript
• · 2024. 8. 25.
• 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

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

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

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

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

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

• format_list_bulleted JavaScript
• · 2024. 1. 14.
• textsms