프론트엔드 공부 블로그 프론트엔드 공부 블로그

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.entries() 매서드는 기존 브라우저에서 보안 문제로 확인할 수 없었던 브라우저 히스토리를 배열로 반환해주는 매소드이다. window.navigation.entries() // (2) [NavigationHistoryEntry, NavigationHistoryEntry] NavigationHistoryEntry는 id, index, key, ondispose, sameDocument, url과 같은 중요한 정보들을 가지고 있다. 그 외에도 back, f..

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

웹 애니메이션을 별도의 라이브러리 설치 없이 사용할 수 있다. 내장된 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를 사용하여 예기치 못한 상황이 발생할 수도 있는데. 왜냐하면 기본적으로 에러 상황을 바로 처리하여 에러가 발생하지 않았던 것 처럼 자바스크립트가 실행된다는 점이다. 예를 들어, redux saga를 사용중인 앱에 api 호출 부분에서 try catch를 사용해버리면, redux saga에서 실패 시 처리 부분에 진입하는 경우의 수가 사라져버린다. try catch로 곧바로 API 호출 실패에 대한 처리를 해버렸기 때문에 redux saga는 이 API 호출이 성공된 것으로 해석해버리고 Su..

Promise를 처리하기 위해서 then으로 체이닝을 하거나 async/await 함수를 활용할 수 있다. 그런데, 이 둘이 함께 쓰인 코드를 보았다. 재현해보자면, 다음과 같다. const { default: axios } = require("axios"); const sampleFn = async () => { try { const result = await axios.get("https://jsonplaceholder.typicode.com/todos/1") .then(el => { console.log("then", el.data); return el.data; }) .catch(err => console.error("then", err)); console.log('await', result); ..

MutationObserver는 DOM 트리의 변경을 감지한다. 이를 사용하면 실시간으로 DOM의 변경을 감지하고, 처리할 수 있다. ⛄️ 예제 간단하게 댓글을 다는 HTML을 구현해보자. 그리고, 새로운 댓글이 추가될 때 마다 이를 MutationObserver로 감지해서 alert를 띄우는 예제를 구현해보기로 했다. 일단, 기본적으로 댓글을 추가하는 HTML과 자바스크립트를 작성해준다. Comment List add const inputDiv = document.getElementById("input_div"); const textInput = document.getElementsByClassName("text_input")[0]; const inputBtn = document.getElementsB..