전체 글
try catch의 함정
try catch를 사용하면, 예상할 수 있는 여러 에러 상황을 처리할 수 있다. 이말인 즉슨 웹페이지에 에러가 발생해도 에러를 바로 처리하기 때문에 작동에 문제가 생기지 않게 해줄 수 있다. 다만, try catch를 사용하여 예기치 못한 상황이 발생할 수도 있는데. 왜냐하면 기본적으로 에러 상황을 바로 처리하여 에러가 발생하지 않았던 것 처럼 자바스크립트가 실행된다는 점이다. 예를 들어, redux saga를 사용중인 앱에 api 호출 부분에서 try catch를 사용해버리면, redux saga에서 실패 시 처리 부분에 진입하는 경우의 수가 사라져버린다. try catch로 곧바로 API 호출 실패에 대한 처리를 해버렸기 때문에 redux saga는 이 API 호출이 성공된 것으로 해석해버리고 Su..
HTML tabindex로 키보드 탭 선택순서 조정하기
일반적으로 웹 페이지에서 tab으로 input이나 a태그와 같은 요소에 접근할 때 나열된 서순대로 접근하게 된다. 이 순서는 절대적이지 않고 수정이 가능한데, tabindex 속성이 이를 가능케 한다. 탭으로 input에 접근하면, email, name, nickname 순서가 된다. Home Services About Contact tab으로 a태그 링크에 접근하면 Contract, About, Services 순서로 접근된다. tabindex가 음수이면, tab으로 포커싱할 수 없다.
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..
HTML 작성 시 안티패턴들
HTML 작성 시 피해야 할 안티패턴들 🌈 이러한 패턴들은 코드의 가독성, 유지보수성 및 웹 접근성을 저해할 가능성이 있다. 테이블 레이아웃 테이블 요소를 사용하여 레이아웃을 구성하는 것은 지양해야 한다. 🐳 대신, CSS를 사용하여 레이아웃을 조정하는 것이 권장된다. 테이블 레이아웃은 가독성을 해치고 스크린 리더와 모바일 기기 접근성을 악화시킬 수 있다. 인라인 스타일 HTML 요소 내에 직접 스타일을 적용하는 것보다는 외부 CSS 파일을 사용하여 스타일링하는 것이 좋다. 인라인 스타일은 코드 유지보수를 어렵게 만들 수 있다. 문자 창조 순서 (Character Entity References) 사용 예전에는 특수 문자를 표현하기 위해 문자 창조 순서를 사용하는 경우가 많았다. 하지만 이제는 대부분의 ..
leetcode 코딩테스트 연습 - 2666. Allow One Function Call (JavaScript)
이 문제는 클로저를 활용하여, 단 한 번만 호출되는 함수를 만드는 것이 목적이다. isCalled라는 변수를 사용하여 한 번 호출된 뒤에는 다시 호출될 수 없도록 문제를 해결하였다. var once = function(fn) { let isCalled = false; return function(...args){ if(!isCalled) { isCalled = true; return fn(...args); }else { return; } } }; 자바스크립트의 함수 특징을 사용한 문제였다.
leetcode 코딩테스트 연습 - 2637. Promise Time Limit (JavaScript)
이번 문제는 Promise를 사용하는 함수와 시간제한이 있을 때, 이 함수가 시간 제한 내에 실행이 끝나는지를 판별하는 코드를 작성해야 했다. setInterval을 사용하여 시간을 재고 이 시간이 끝나기 전에 성공하는지 실패하는지 확인하는 방법으로 코드를 작성하려고 했는데, 생각처럼 되지 않았고 결국 다른 사람의 힌트들을 보고 다음의 코드를 작성하였다. var timeLimit = function(fn, t) { return async function(...args) { const result = fn(...args); const checker = new Promise((resolve, reject) => { setTimeout(() => { reject("Time Limit Exceeded"); },..
자바스크립트 동적으로 객체 생성하기 (Computed Property Names)
자바스크립트에서 데이터를 나타내는데 많이 사용되는 객체는 때에 따라서 수정되야 하고 동적으로 생성되야 한다. 이런 경우에, 유용하게 사용될 수 있는 문법들을 정리해보기로 하였다. Computed Property Names ⛅️ 객체에서 프로퍼티의 이름을 동적으로 생성할 수 있게 해주는 문법이다. 대괄호 안에 변수를 넣음으로써, 해당 변수의 값이 프로퍼티의 이름이 되게 한다. const name = "park"; const target = false; const obj = { [name]: target, } console.log(obj); // {park: false} 객체 확장하기 기존에 존재하는 객체를 바탕으로 새롭게 더 많은 데이터, 프로퍼티를 가지는 객체를 생성하게 되야 하는 경우도 있다. 혹은 여..