JavaScript

try catch의 함정

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

await와 then 함께쓰기?

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을 구독하여 알림 주기)

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)

자바스크립트에서 데이터를 나타내는데 많이 사용되는 객체는 때에 따라서 수정되야 하고 동적으로 생성되야 한다. 이런 경우에, 유용하게 사용될 수 있는 문법들을 정리해보기로 하였다. Computed Property Names ⛅️ 객체에서 프로퍼티의 이름을 동적으로 생성할 수 있게 해주는 문법이다. 대괄호 안에 변수를 넣음으로써, 해당 변수의 값이 프로퍼티의 이름이 되게 한다. const name = "park"; const target = false; const obj = { [name]: target, } console.log(obj); // {park: false} 객체 확장하기 기존에 존재하는 객체를 바탕으로 새롭게 더 많은 데이터, 프로퍼티를 가지는 객체를 생성하게 되야 하는 경우도 있다. 혹은 여..

URLSearchParams로 Url Query String 가져오기

바닐라 자바스크립트로 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(Breadth-First Search) 알고리즘 구현하기 (자바스크립트)

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); /..

syntactic sugar in Javascript (Class와 Async Await)

자바스크립트에서는 syntactic sugar라는 개념이 있는데, 이는 코드 작성을 더 간결하고 쉽게 만들어주는 문법적 편의 기능을 의미한다. 이를 잘 활용하면 쉽고 잘 읽히는 코드를 작성할 수 있다. Class class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello() { console.log(`Hello, I'm ${this.name}.`); } } 프로토타입 생성자 함수 function Person(name, age) { this.name = name; this.age = age; } Person.prototype.sayHello = function() { console.log(`Hello, I'm ${..

import와 require의 차이

⚽️ import (정적 로딩) import 구문은 ES6(ECMAScript 2015)부터 도입된 정적인 모듈 로딩 구문이다. import 구문은 모듈을 정적으로 로딩하며, 코드가 실행되기 전에 모듈 로딩이 이루어진다. 따라서 import 구문은 항상 모듈 로딩을 가장 위로 올려서 먼저 실행되고, 모듈 로딩은 브라우저 환경에서는 비동기적으로 이루어진다. import는 필요한 부분만 가져올 수 있기 때문에 성능 최적화에 있어서 require보다 뛰어나다. (트리 쉐이킹) // 정적 로딩 (ES6) import { add } from './math'; 🏐 require (동적 로딩) require 구문은 Node.js에서 사용되는 CommonJS 모듈 시스템의 모듈 로딩 구문이다. require 구문은 동..