728x90
728x90
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..
자바스크립트에서 데이터를 나타내는데 많이 사용되는 객체는 때에 따라서 수정되야 하고 동적으로 생성되야 한다. 이런 경우에, 유용하게 사용될 수 있는 문법들을 정리해보기로 하였다. Computed Property Names ⛅️ 객체에서 프로퍼티의 이름을 동적으로 생성할 수 있게 해주는 문법이다. 대괄호 안에 변수를 넣음으로써, 해당 변수의 값이 프로퍼티의 이름이 되게 한다. const name = "park"; const target = false; const obj = { [name]: target, } console.log(obj); // {park: false} 객체 확장하기 기존에 존재하는 객체를 바탕으로 새롭게 더 많은 데이터, 프로퍼티를 가지는 객체를 생성하게 되야 하는 경우도 있다. 혹은 여..
바닐라 자바스크립트로 URL의 쿼리 스트링을 가져오는 방법을 알아보았다. React-Router-Dom이나 Next에서는 해당 기능에 대한 훅이 존재하지만, 바닐라 자바스크립트로도 간단히 이를 구현할 수 있다. 우선, window.location.search으로 URL에서 쿼리만 가져올 수 있다. console.log(window.location.search); // '?search=hihihi' 그리고 해당 String을 URLSearchParams의 인자로 전달하면, key-value의 형태로 값을 구조화할 수 있다. const searchParams = new URLSearchParams(window.location.search); for (const [key, value] of searchPara..
BFS는 최단 경로를 탐색하기 위해서 많이 사용되는 알고리즘으로, DFS와는 다르게 인접한 노드를 순서대로 방문하지만 각 인접 노드의 자식을 방문하는 건 나중에 이루어진다. 자바스크립트로 이를 구현해보면 다음과 같다. // 그래프의 인접 리스트 표현 const graph = { A: ['B', 'C'], B: ['A', 'D', 'E'], C: ['A', 'F'], D: ['B'], E: ['B', 'F'], F: ['C', 'E'] }; function bfs(graph, startNode) { const visited = new Set(); // 방문한 노드를 저장하는 Set const queue = [startNode]; // 탐색할 노드를 저장하는 큐 visited.add(startNode); /..