'🖌️Frontend' 카테고리의 글 목록

🖌️Frontend

[Tanstack Query] 낙관적 업데이트를 이용한 실시간 알림 읽음 처리 UX 개선기 2025.07.01
[JS] 웹 컴포넌트 2025.03.30 1
[HTML] <img/>의 alt 속성 2025.03.27
[CSS] CSS 프레임워크(Bootstrap, TailwindCSS) 2025.03.03 1

[Tanstack Query] 낙관적 업데이트를 이용한 실시간 알림 읽음 처리 UX 개선기

bananackck 2025. 7. 1. 18:15

2025. 7. 1. 18:15

이 글은 Tanstack Query와 SSE를 사용하는 프로젝트에서 상태 동기화 문제를 경험한 분들을 위한 사례 공유입니다.

커리어비에서 알림 도메인을 개발하면서 정말 많은 트러블 슈팅이 있었다.

오늘은 그 중 하나인 “알림 아이콘 읽음 처리 업데이트” 에 대해서 이야기해보겠다.

문제 상황

먼저 커리어비에서는 SSE를 사용하여 새로운 알림이 생기면 그 여부를 boolean으로 받아온다. 그러면 이를 header의 알림 아이콘에 업데이트 해준다.

이슈는 여기에서 발생한다.

사용자는 알림을 보기 위해 알림 아이콘을 클릭한다.

클릭 시 /notification 으로 이동한다.

이동 후, header의 알림 아이콘이 일반 아이콘으로 되돌아가야 한다.

클라이언트와 서버의 관점 차이

여기서 백엔드와의 로직이 정확히 일치하지 않는다는 점이 이슈의 시발점이었다.

우선 커리어비에서는 “알림 페이지에 진입 함” = “알림을 읽음” 으로 간주하였다.

🎨 클라이언트 입장

알림 페이지에 진입 시 바로 header의 알림 아이콘이 정상으로 돌아와야 한다.

🗄️ 서버 입장

새 알림들의 ID를 PATCH 요청을 통해 받고, 해당 알림들의 읽음 여부를 '안읽음' -> '읽음' 으로 업데이트한다.
알림테이블에서 각 유저들의 알림과 읽음 여부를 함께 저장하고 있기 때문이다

hasNewAlarm의 T/F 변환 시점에 대해서 클라이언트와 서버 사이의 입장 차이가 발생했다.

하지만 이것 때문에 백엔드에게 데이터필드를 추가하라고 할 수는 없는 노릇이기에 나는 두 가지 방법을 생각해냈다.

해결 방안 후보

[방법 1] useEffect에서 setQueryData로 즉시 false 처리

useEffect(() => {
  queryClient.setQueryData(['userinfo'], (oldData: any) => {
    if (!oldData) return oldData;
    if (oldData.hasNewAlarm === false) return oldData;
    return {
      ...oldData,
      hasNewAlarm: false,
    };
  });
}, []);

이런 식으로 강제로 쿼리 데이터를 설정한다.

❌ 단점

PATCH 요청이 완료되기 전 userInfo 쿼리가 stale되어 refetch되면:
- 서버에서는 아직 hasNewAlarm: true 상태라 다시 true로 돌아옴
- 아이콘이 깜빡였다 다시 켜질 수 있음
일관성이 깨질 가능성

[방법 2] PATCH 완료 후 refetchQueries

await PATCH(...);
queryClient.refetchQueries(['userInfo'])

PATCH가 성공하면 서버에서 변경된 userInfo 데이터를 refetch 한다.

❌ 단점

POST 응답이 느린 경우, 사용자가 알림 페이지 들어갔는데 헤더 알림 아이콘이 한참 후에 사라짐
- 즉시 피드백이 없음
- 체감상 UX가 딜레이된다고 느낄 수 있음
네트워크 레이턴시 의존

UI 깜빡임이 일어날 수 있는 상황을 정리해보자면 아래와 같다.

네트워크 상태가 느린 환경 (예: 모바일 3G)
백엔드 응답 지연 (예: 1~2초 이상)
알림을 읽음 처리하는 POST 요청과, userInfo 쿼리가 둘 다 활성화 상태라 refetch 타이밍이 겹침

하지만 최대한 낙관적 업데이트 패턴을 적용하는게 UX 측면에서 좋을 것이라고 판단했다.

따라서 아래의 방법을 생각했다.

[방법 3] 뮤테이션 사용

// PATCH 요청 중에는 refetch 하지 않게
const mutation = useMutation(markNotificationsAsRead, {
  onMutate: async () => {
    // 알림 즉시 꺼지기
    queryClient.setQueryData(['userInfo'], (old) => ({ ...old, hasNewAlarm: false }));
    // 기존 쿼리 취소 (중간 갱신 방지)
    await queryClient.cancelQueries(['userInfo']);
  },
  onSuccess: () => {
    queryClient.invalidateQueries(['userInfo']);
  },
});

100% 데이터의 일관성을 유지할 수 있는 방법이 맞다.

하지만 실사용에서 알림 상태 깜빡임이 500ms 이하에 그쳤고, 사용자 피드백에서 혼란을 느낀 사례가 없었다.

따라서 뮤테이션은 오버스펙이라는 결론을 지었다.

[방법 4] setQueryData와 refetchQueries 모두 사용 + 롤백

말 그대로 위의 방법을 모두 적용한다. 이렇게 하면 데이터 무결성도 충분히 보장될 수 있다.

이제 완벽한 낙관적 업데이트 패턴을 적용하기 위해서 롤백 로직만 구현하면 된다.

롤백 로직은 아래처럼 작성하였다.

const previousUserInfo = queryClient.getQueryData(['userInfo']);
try {
  await PATCH(...);
  queryClient.refetchQueries({ queryKey: ['userinfo'] });
} catch (error) {
  // 롤백
  queryClient.setQueryData(['userInfo'], previousUserInfo);
}

회고

이번 경험을 통해 실시간 데이터 동기화는 단순히 UI에 표시되느냐 의 문제가 아니라, 데이터 일관성과 사용자 체감 속도, 그리고 개발 비용까지 함께 고려해야 하는 영역이라는 걸 다시 느꼈다.

처음에는 그냥 어차피 금방 갱신될 거니까 refetch만 해도 되겠지 라고 생각했다. 그런데 막상 테스트를 해보니, 네트워크가 느린 환경이나 저사양 기기에서는 알림 아이콘이 깜빡거리는 순간이 보였다. 이런 작은 부분도 신경쓰지 않을 수 없다.

그리고 중요한 건 어떤 선택을 하든 트레이드오프가 있다는 사실이다. 낙관적 업데이트를 쓰면 사용자 입장에서는 빠르게 반응하는 것처럼 보여서 좋지만, 만약 서버 처리가 실패했을 때는 롤백까지 책임져야 한다. 생각할게 많아지지만 서비스는 견고해진다.

수많은 기술들이 있지만 어디에 어떻게 적용하느냐는 나의 선택하고, 구현 방안도 수두룩하지만 그중 무엇을 선택하느냐는 나의 판단에 의한다. 그 근거들도 있어야 한다.

이번 이슈를 통해 단순히 알림 상태를 처리하는 작업을 넘어, 기능의 복잡도를 어디까지 가져갈 것인지, 그리고 사용자 경험과 개발 효율의 균형을 어떻게 잡을지를 고민할 수 있었다. 앞으로도 파이팅!!

'🖌️Frontend' 카테고리의 다른 글

[Figma] 피그마 (0)	2025.02.20

[JS] 웹 컴포넌트

bananackck 2025. 3. 30. 02:21

2025. 3. 30. 02:21

커뮤니티 프로젝트에서 모달, 헤더, 드롭다운 같은 요소들을 재사용할 수 있게 분리하였다. 그러다가 예기치 못한 오류를 발견했다...

uncaught SyntaxError: Failed to execute 'define' on 'CustomElementRegistry': "my-profileImg" is not a valid custom element name

찾아보니 커스텀 엘리먼트의 네임 규칙에 관한 내용이었다. 허거덩거덩스

내가 사용하고 있던 게 커스텀 엘리먼트였구나! 정확히는 웹 컴포넌트를 작성하고 있었다...

정말 많은 것을 알아가고 있는 것 같다.....

웹 컴포넌트

기능을 나머지 코드로부터 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성하고 웹 앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음

즉, 자주 쓰이거나 너무 긴 코드를 가진 기능을 따로 분리해서 관리하겠다! 라는 취지이다. 이를 사용하면 코드 재사용성이 높아지고 코드 충돌에 걱정이 없다.

예를 들어 아래 같이 정말 긴 코드가 있다고 하자... 헤더는 모든 페이지에서 사용될 테니까 계속해서 저 긴 코드를 작성해야 한다...

...
<body>
    <header>
        <div class="header-contents">    
            <div class="nav-btn left">
                 <img id="nav-back-img" src="../assets/img/navigate-back.png" alt="뒤로가기">
            </div>
            <div class="project-name">서비스 타이틀</div>
            <div class="nav-btn right">
                <img id="nav-back-img" src="../assets/img/navigate-forward.png" alt="앞으로가기">
            </div>
        </div>
    </header>
    <main>
        ...
    </main>
</body>
...

이걸 custom element로 작성해서 바꾸면?

...
<body>
    <my-header></my-header>
    <main>
        ...
    </main>
    <script type="module" src="../components/header.js"></script>
</body>
...

이렇게나 짧아진다!!! 가독성도 좋아지고 굿굿

< 구성 요소 >

1. Custom elements: 사용자 맞춤형 HTML element를 만들 수 있게 해주는 JS API 세트

2. Shadow DOM: 메인 DOM과 독립적으로 렌더링되는 DOM 트리를 제어하기 위한 JS API 세트

3. HTML 템플릿: <template>, <slot>과 같이 렌더링 시 나타나지 않는 템플릿

element가 뭔지 모른다면...

HTML element(요소)

시작 태그로 시작해서 종료 태그로 이루어진 모든 명령어들

태그 이름

- element의 역할 지정 & 기능을 포함하고 있음.

속성명

- element에 적용될 스타일 등등...

속성 값

- 소문자로! ⇨ HTML5 표준에서는 속성명에 대문자를 구분 X

- ""('') 사용하기

내용

- 화면에 표시될 내용

시작 태그와 종료 태그

- element의 시작과 끝 지정

- 종료 태그가 안 쓰일 때도 있음 ex. <img>, <br> ...

이제 하나씩 알아가보자.

1️⃣ Custom Elements

사용자가 원하는 기능을 갖춘 HTML element를 만들게 해준다. 자주 사용되고 반복되는 요소들을 모아놓아서 키워드로 대체했다고 생각하면 된다.

class MyComponent extends HTMLElement {...}
customElements.define("my-component", MyComponent)

기본 사용법은 위와 같다.

HTMLElement를 extends한 클래스 컴포넌트를 생성한다. HTMLElement는 window 브라우저의 내장 객체이다.

위에서 customElements.define()을 사용하고 있다.

customElement 또한 window 브라우저의 내장 객체이며, 호출 시 CustomElementRegistry 객체의 참조를 리턴한다.

여기서 이 커스텀 엘리먼트를 제어하기 위한 라이프 사이클 콜백이 존재한다.

connectedCallback: component가 DOM에 추가 됬을 때 호출
disconnectedCallback: component 내에 element가 제거될 때 마다 호출
observedAttributes: 변경을 감지할 속성들을 모니터링하기 위한 메서드
attributeChangedCallback: observedAttributes에서 모니터링 중인 속성들이 변경되었을 때 호출
adoptedCallback: element가 새로운 document로 이동될 때마다 호출

class MyComponent extends HTMLElement {
  // element 생성시 무조건 작성!!
  constructor() {
    super();
    ...
  }
  connectedCallback() {...}
  disconnectedCallback() {...}
  static get observedAttributes() {return [...];}
  attributeChangedCallback(name, oldValue, newValue) {...}
  adoptedCallback() {...}
}

2️⃣ Shadow DOM

독립적인 DOM 트리를 생성하는 기술. 캡슐화를 통해 마크업 구조, 스타일, 로직을 숨기고 페이지 내 다른 코드로부터 분리되어 코드 충돌이 없게 만들어 준다. 즉, 독립적인 스코프를 가진다.

또한 브라우저가 shadow DOM은 별도로 처리하여 불필요한 리렌더링을 방지할 수 있다.

외부 JS에서의 shadowRoot 접근 가능성에 따라 모드가 나뉜다.

열린 모드: 외부 접근 가능 (mode: "open")
닫힌 모드: 외부 접근 불가능 ⇒ 크롤링 방지 가능. (mode: "closed")

< 구조 >

Shadow Host: Shadow DOM이 부착되는 일반 DOM의 요소
Shadow Root: Shadow 트리의 루트 노드
Shadow Tree: Shadow DOM 내부의 DOM 트리
Shadow boundary: 경계

⇨ 원래 document tree와 shadow tree를 합쳐서 렌더링을 위해 Flattened Tree를 구성한다.

class MyComponent extends HTMLElement {
  constructor() {
    super();
    // Shadow DOM 사용
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
   connectedCallback() {
      const navBtns = this.shadowRoot.querySelector('.nav-btn.left');
      navBtns.classList.add('hidden');
   }
}

위에서 설명한 custom element 구성에서 사용할 수 있다.

this.shadowRoot.appendChild(template.content.cloneNode(true)) 에 대해 설명하자면...

shadowRoot에 자식 노드를 추가하겠다는 거다. template.content.cloneNode(true) 는 아래에서 설명하겠다.

콜백에서 특정 element를 호출할 때는 this.shadowRoot 를 사용하면 된다.

3️⃣ HTML 템플릿

다큐먼트가 처음 로드될 때 렌더링되지 않지만 JavaScript를 사용하는 런타임에 나타나는 HTML 조각을 포함한다.

내부 요소로 content를 가진다.

위에서 shadowRoot에 template.content.cloneNode(true) 를 추가했다.

여기서 template는 template element가 지정된 const 변수이다. 따라서 위 코드는 template element 안에 선언된 내용을 복붙하겠다는 뜻이다.

const template = document.createElement('template');
template.innerHTML = `
    <link rel="stylesheet" type="text/css" href="../assets/style/header.css">
    <header>
        <div class="header-contents">    
            <div class="nav-btn left">
                 <img id="nav-back-img" src="../assets/img/navigate-back.png" alt="뒤로가기">
            </div>
            <div class="project-name">서비스 타이틀</div>
            <div class="nav-btn right">
                <img id="nav-back-img" src="../assets/img/navigate-forward.png" alt="앞으로가기">
            </div>
        </div>
    </header>
`;

맨 위의 예시에서 header를 template 요소로 따로 빼면 위와 같은 코드가 된다.

지금은 style을 stylesheet를 불러오고 있지만, style element를 만들어서 template에 붙여도 된다.

const styleEl = document.createElement('style');
styleEl.textContent = `
  header {
    background-color: #f8f8f8;
  }
  .header-contents {
    padding: 10px;
  }
`;

// template의 content에 style 요소를 추가 (보통 맨 위에 추가)
template.content.prepend(styleEl);

이제 custom element, shadow DOM, HTML 템플릿을 적절하게 조합해서 사용하면 나만의 커스텀 웹 컴포넌트를 만들 수 있다!!

그럼 이제 3개의 파일 말고! 1개의 자바스크립트 파일로 컴포넌트를 관리할 수 있다.

다만 한 가지 아쉬운 점은 HTML과 CSS 코드가 자바스크립트 파일 안에 들어가기 때문에 전부 주황색으로 나온다..... 가독성이 좀 떨어지긴 하다...

이 부분을 해결한 것이 jsx 인 듯하다!

'🖌️Frontend > 🎨HTML,CSS,JS' 카테고리의 다른 글

[HTML] <img/>의 alt 속성 (0)	2025.03.27
[CSS] CSS 프레임워크(Bootstrap, TailwindCSS) (1)	2025.03.03
[JS] array의 매서드(forEach, map, filter, reduce) (0)	2025.02.24
[HTML] 시멘틱 구조 태그 (0)	2025.02.21
[HTML/CSS] html/css (0)	2025.02.20

[HTML] <img/>의 alt 속성

bananackck 2025. 3. 27. 23:38

2025. 3. 27. 23:38

커뮤니티 개발 중 게시글에 이미지를 보여주는 방식에 대해 고민하다가 GPT로 부터 답변을 들었다.

우선 내 고민은 이미지 태그를 쓸 것이냐 아니면 background-img 속성을 쓸 것이냐였다. GPT는 여러가지를 고려해서 이미지 태그를 사용하라고 추천해 줬다.

여기서 재미있던 점은 추천 이유 중 하나가 alt 속성이라는 것이었다. 지금까지 alt는 이미지 주석처럼 사용했는데....

앞으로 alt 와 title 속성도 잘 고려해서 코드를 작성하는 습관을 들여야겠다.

alt 속성

이미지의 대안, 이미지에 대한 설명이다. 이미지 태그에만 사용할 수 있다.

<img src="../src.png" alt="이미지에 대한 설명"/>

인터넷 속도가 느리거나 컴퓨터 사양 등의 문제로 이미지를 로드해오지 못했을 때, alt 텍스트로 대체된다.
스크린 리더(주로 시각 장애인들이 사용)가 읽는 값이다.
SEO 👍 (검색 엔진이 img는 못읽으므로 alt를 읽는다.)

title 속성

이미지 외의 태그에도 사용할 수 있다. 해당 소스 hover 시 풍선 도움말을 뜨게 한다.

마우스를 올려봐요

웹표준에서는 a태그에 title 속성은 필수항목임
모바일 기기에서는 풍선 도움말이 뜨지 않는다. 정확히는 마우스 hover 이벤트를 발생시킬 수 없으므로 그러하다. 이는 전적으로 브라우저에 의존한다. 일부 브라우저의 경우, 길게 누르면 title 을 보여주는 기능을 하기도 한다.

'🖌️Frontend > 🎨HTML,CSS,JS' 카테고리의 다른 글

[JS] 웹 컴포넌트 (1)	2025.03.30
[CSS] CSS 프레임워크(Bootstrap, TailwindCSS) (1)	2025.03.03
[JS] array의 매서드(forEach, map, filter, reduce) (0)	2025.02.24
[HTML] 시멘틱 구조 태그 (0)	2025.02.21
[HTML/CSS] html/css (0)	2025.02.20

[CSS] CSS 프레임워크(Bootstrap, TailwindCSS)

bananackck 2025. 3. 3. 03:19

2025. 3. 3. 03:19

tailwindCSS를 사용해 보려고 하다가 문득 이게 뭐지? 하는 의문이 들었다.... 정리를 해보자.

Bootstrap

https://getbootstrap.kr/

Bootstrap

강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기

getbootstrap.kr

무료 or 유료로 사용 가능한 미리 만들어진 컴포넌트들을 파는 마켓.

로컬에 설치 후 마켓에 등록되어 있는 클래스 명을 가져와 사용할 수 있다.

컴포넌트 기반: 미리 디자인된 UI 컴포넌트(버튼, 네비게이션, 모달 등)를 제공합니다.
빠른 프로토타이핑: 표준화된 디자인과 컴포넌트를 활용하여 빠르게 웹사이트를 구축할 수 있습니다.
일관된 디자인: 기본 제공하는 스타일 덕분에 전체적인 디자인의 일관성을 쉽게 유지할 수 있습니다.
커스터마이징 한계: 기본 스타일을 재정의하거나 커스터마이징 하려면 CSS나 Sass 변수 등을 수정해야 합니다.
클래스 이름: 컴포넌트 이름 기반의 클래스(예: btn, navbar)를 사용합니다.

Tailwind CSS

https://tailwindcss.com/

작성이 쉽도록 정해놓은 css 규칙을 정의

로컬에 설치 후 사용

유틸리티 우선(Utility-First): 미리 정의된 작은 단위의 클래스들(예: p-4, text-center, bg-blue-500)을 조합하여 디자인합니다.
높은 커스터마이징: 기본 디자인이 거의 없으며, 유틸리티 클래스를 조합해 자유롭게 디자인할 수 있습니다.
재사용성 및 유지보수: 코드의 재사용성과 수정이 용이하지만, 클래스가 HTML 요소에 많이 붙어 길어질 수 있습니다.
퍼포먼스 최적화: PurgeCSS 같은 도구를 이용해 사용하지 않는 CSS를 제거하여 최종 빌드 크기를 줄일 수 있습니다.
개발자 경험: 디자인의 유연성과 커스터마이징을 중시하는 개발자에게 인기가 많습니다.

	Bootstrap	Tailwind CSS
	미리 디자인된 컴포넌트 기반	유틸리티 클래스 기반
커스터마이징 용이	X(복잡함)	O
컴포넌트	다양한 UI 컴포넌트(버튼, 모달 등) 제공	기본 컴포넌트 없음, 직접 조합하여 디자인
개발 속도	FAST	FAST
HTML 클래스	의미 중심 클래스 (예: btn, navbar)	기능 중심 클래스 (예: p-4, bg-blue-500)
파일 크기 및 최적화	기본 스타일이 많아 비교적 무거울 수 있음	PurgeCSS로 최적화하여 파일 크기 줄일 수 있음
커뮤니티 및 지원	오랜 기간 사용되어 안정적인 생태계와 문서 제공	최신 트렌드에 맞는 빠른 업데이트와 활발한 커뮤니티

'🖌️Frontend > 🎨HTML,CSS,JS' 카테고리의 다른 글

[JS] 웹 컴포넌트 (1)	2025.03.30
[HTML] <img/>의 alt 속성 (0)	2025.03.27
[JS] array의 매서드(forEach, map, filter, reduce) (0)	2025.02.24
[HTML] 시멘틱 구조 태그 (0)	2025.02.21
[HTML/CSS] html/css (0)	2025.02.20

PREV 이전 1 2 3 NEXT 다음

bananackck

🖌️Frontend

[Tanstack Query] 낙관적 업데이트를 이용한 실시간 알림 읽음 처리 UX 개선기

문제 상황

클라이언트와 서버의 관점 차이

🎨 클라이언트 입장

🗄️ 서버 입장

해결 방안 후보

[방법 1] useEffect에서 setQueryData로 즉시 false 처리

[방법 2] PATCH 완료 후 refetchQueries

[방법 3] 뮤테이션 사용

[방법 4] setQueryData와 refetchQueries 모두 사용 + 롤백

회고

'🖌️Frontend' 카테고리의 다른 글

[JS] 웹 컴포넌트

웹 컴포넌트

1️⃣ Custom Elements

2️⃣ Shadow DOM

3️⃣ HTML 템플릿

'🖌️Frontend > 🎨HTML,CSS,JS' 카테고리의 다른 글

[HTML] <img/>의 alt 속성

alt 속성

title 속성

'🖌️Frontend > 🎨HTML,CSS,JS' 카테고리의 다른 글

[CSS] CSS 프레임워크(Bootstrap, TailwindCSS)

Bootstrap

Tailwind CSS

'🖌️Frontend > 🎨HTML,CSS,JS' 카테고리의 다른 글

+ Recent posts

티스토리툴바