염딩코

Hi there ~ 👋 오늘은 밋팀의 북마크 기능을 구현하던 중 발생한 일을 공유할까 해요...!😁   인터넷이 느린 환경이나 API 호출 딜레이가 발생할 경우에 북마크가 적용될 때 딜레이가 발생하는 경우가 있었습니다.  (오늘도 어김없이 밋팀을 작업하는 johnyeom씨)  클릭 시 바로 적용이 안 되는 것이 보이시나요??..🧐  사용자 경험(UX)의 측면으로 봤을 때, 정말 좋지 않다고 생각했고 열심히 구글링을 해보았습니다!!🔥🔥🔥 이는 바로 '낙관적 업데이트'라는 개념을 통해서 지연 시간에 대한 불편을 해소할 수 있었습니다! 낙관적 업데이트란 무엇인가?낙관적 업데이트는 사용자의 동작에 대한 응답을 기다리지 않고 미리 UI를 업데이트하는 것입니다.낙관적 업데이트가 적용되기 이전의 북마크는 ..

React에서 useEffect 훅은 함수 컴포넌트의 side effect를 수행할 수 있도록 한다. side effect: 흔히 부작용으로 알고 있지만, 프로그래밍에서는 "변화가 발생하는 행위"로 이해하면 된다. useEffect의 effect 함수와 clean-up 함수에 대해서 알아보기 전에 React에서 마운트와 언마운트의 개념을 알고 있어야 한다. 마운트(mount): 마운트는 컴포넌트가 최초로 렌더 될 때 거치는 과정이다. 이후 props와 state가 변경될 때는 마운트 과정을 거치지 않는다. 언마운트(unmount): 언마운트는 컴포넌트가 삭제될 때 거치는 과정이다. useEffect의 기본 구조는 아래와 같다. useEffect를 사용하면 함수 컴포넌트에서 side effect를 수행할 ..

useRef란 뭘까요? React는 사용자 인터페이스를 만드는 데 필요한 많은 기능을 제공합니다. 그 중 하나가 useRef입니다. useRef는 React Hook 함수 중 하나로, DOM 노드나 다른 React 요소에 대한 참조를 만들기 위해 사용됩니다. React를 처음 시작하는 사람들은 이 개념이 어려울 수 있지만, 간단한 예제를 통해 이해해 보도록 하겠습니다. 예제를 위해, 다음과 같은 코드를 작성합니다. import React, { useRef } from 'react'; function TextInput() { const inputRef = useRef(null); const handleClick = () => { inputRef.current.focus(); }; return ( Focus..

React Hook Form은 간편하고 유연한 방식으로 React 애플리케이션에서 폼을 다룰 수 있는 라이브러리입니다. 이를 사용하면 복잡한 폼 로직을 작성하는데 드는 시간과 노력을 줄일 수 있습니다. 이번 글에서는 React Hook Form의 사용법과 예시를 소개하겠습니다. React Hook Form 사용법 React Hook Form은 useForm이라는 Hook 함수를 제공합니다. 이 Hook 함수를 사용하여 폼을 관리하고, 입력값의 유효성 검사와 전송 처리를 수행할 수 있습니다. 아래는 React Hook Form을 사용하여 간단한 폼을 만드는 예시입니다. import React from 'react'; import { useForm } from 'react-hook-form'; functio..

DOM이란 무엇일까요? DOM (Document Object Model)은 HTML, XML 및 XHTML 문서를 나타내는 표준 프로그래밍 인터페이스입니다. 이를 사용하여 웹 페이지의 모든 콘텐츠, 구조 및 스타일을 변경하고 조작할 수 있습니다. DOM은 문서를 노드 (node)로 나눕니다. 각 노드는 객체로 표현되며, 문서의 요소, 속성, 텍스트 노드, 주석 등을 포함합니다. 이러한 노드들은 계층 구조로 구성되어 있으며, 부모 노드와 자식 노드 간의 관계를 가집니다. DOM API는 다양한 방법으로 문서의 노드를 선택하고 조작할 수 있습니다. 이를 통해 특정 요소의 콘텐츠를 변경하거나 스타일을 조정할 수 있습니다. DOM API는 또한 이벤트 처리, 애니메이션 및 AJAX와 같은 고급 기술에 사용됩니다..