즐겁게, 코드

개발을 진행하다 보면 문자열화된 DOM을 마크업에 렌더링해야 하는 경우가 종종 생기기 마련입니다.💡 문자열 형태의 DOM을 purify하는 이유는 DOMPurify 라이브러리에 잘 소개되어 있습니다.import parse from "html-react-parser";const App = () => { const purifiedString = parse("hello world"); return {string};};export default App;최근 진행하던 프로젝트에서 관련된 문제가 있었는데, 어떻게 문제를 해결했는지를 소개합니다.📝 TL;DR : DOM을 순회하며 탐색하거나 필터해야 할 때는 TreeWalker 객체를 사용해 보세요.먼저 흔한 모습은 아니지만, 모종의 이유로 백엔드에서 문자열 ..

TL;DR 절대 경로 import를 활용하기 import 정렬 기준을 적용하기 사용하지 않는 패키지를 제거하기 프론트엔드 개발을 경험해보신 분이라면, 분명 한번쯤은 정돈되지 않은 import 코드 영역을 보며 아쉬움을 느꼈던 경험이 있을 거에요. import React, { createContext, useEffect, useState } from "react"; //Global Style import GlobalStyle from "./components/GlobalStyle"; //Import Pages import About from "./pages/About"; import Group from "./pages/Group"; import Nav from "./components/Nav/Nav"; i..

어플리케이션의 규모가 커지면 인증 정보, 장바구니 목록, 어플리케이션 설정 등 전역으로 관리해야 할 요소의 성격이 완전히 다른 경우가 종종 생기는데요, React와 redux를 사용할 때는 이처럼 둘 이상의 관심사가 있을 때 여러 스토어를 만들고 combineReducers 함수를 사용해 스토어를 하나로 묶어 사용했습니다. 오늘은 Vue의 Vuex를 사용해 스토어를 구성할 때, 관심사별로 유사한 상태를 묶어 관리할 수 있도록 해주는 네임스페이스(namespace) 에 대해 소개해보도록 하겠습니다. 🙂 네임스페이스의 등장 배경 어플리케이션이 하나의 스토어를 가질 때는 store 라는 폴더 안에 index.js, mutations.js, actions.js, getters.js 라는 이름을 가진 각 파일(v..

자바스크립트 단에서 화면 사이즈를 기반으로 모바일 여부를 검사하는 useIsMobile 훅을 제작하고 있었습니다. import { useEffect, useState } from "react"; const useIsMobile = () => { const [isMobile, setIsMobile] = useState(false); const [screenWidth, setScreenWidth] = useState(0); const handleScreenResize = () => { setScreenWidth(window.innerWidth); screenWidth > 768 ? setIsMobile(false) : setIsMobile(true); }; useEffect(() => { handleScre..

아주 오랜 옛날부터, 전설로 내려오는 코드가 있습니다. (3학년 1학기에 수행했던 산학프로젝트 코드입니다.) 이 코드는 간단한 그룹 매칭 서비스에서 그룹을 생성하는 역할인데요, 여러 비동기 로직이 async-await 을 통해 순차적으로 실행되는 무시무시한 모습입니다. 얼핏 보면 비동기 로직 제어에 성공한 것처럼 보이지만 순차적으로 실행되는 약 7회의 POST 요청으로 인해 당시 그룹을 생성하는 데에만 약 20~30초 가량의 시간이 소요되었고, UX 개선을 위해 로딩 애니메이션을 별도로 제작하는 등의 수고를 더해야만 했습니다. 콜백, 프라미스, async-await 문법을 거쳐오며 비동기 로직 제어는 점점 쉬워졌지만 진화의 최종형인 async-await 을 사용하는 것만이 언제나 답이 되지는 않는데요, ..

바닐라 자바스크립트를 활용해 DOM에 접근할 때는 HTMLCollection, NodeList 등의 DOM 요소들의 컬렉션을 다루게 될 때가 있는데요, 이번 글을 통해 두 컬렉션의 성질을 간단히 알아보도록 하겠습니다. HTMLCollection 먼저 HTMLCollection은 getElementsByClassName 과 getElementsByTagName 메서드를 통해 얻을 수 있는 객체인데요, 한번 간단한 예제를 작성해 보겠습니다. Apple Banana Orange document.getElementsByClassName 함수를 통해 class="red" 속성을 갖는 요소들을 획득한 모습인데요, 자세히 보면 이 컬렉션은 일반적인 배열이 아닌 HTMLCollection 이라는 프로토타입을 기반으로 ..

본 글은 TOAST UI Weekly Pick - "당신이 모르는 자바스크립트의 메모리 누수의 비밀" 을 정리한 내용입니다. 웹 페이지가 버벅이거나 동작을 멈추는 경우에는 여러 원인이 있을 수 있습니다. 그 중 한 가지 원인은 바로 메모리 누수 로, 메모리를 신경쓰지 않고 코드를 작성하면 결국 사용자 경험에 나쁜 영향을 미치게 됩니다. 오늘은 메모리 누수란 무엇이고, 어떤 상황에서 메모리 누수가 발생할 수 있는지 알아보도록 하겠습니다. 가비지 컬렉션 변수 또는 데이터가 더이상 필요하지 않다면 이들은 '가비지 변수' 또는 '가비지 데이터' 라는 미사용 값으로 분류됩니다. 만약 이 데이터가 계속 쌓이면 메모리 사용량을 초과하게 될 것이므로, 그러기 전에 가비지 컬렉션을 꾸준히 실행해야만 합니다. 자바스크립트..