Skip to content

Commit

Permalink
fix: "React Query와 Concurrent UI Pattern으로 서버 상태 효율적으로 관리하기" 포스팅 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
@kang-kibong
kang-kibong committed Aug 15, 2024
1 parent 197fc59 commit 7127228
Show file tree
Hide file tree
Showing 3 changed files with 7 additions and 7 deletions.
4 changes: 2 additions & 2 deletions _posts/2024-07-14-React Query와 Concurrent UI Pattern으로 서버 상태 효율적으로 관리하기.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -317,7 +317,7 @@ export default function WishButton() {

이전에 Axios를 사용해 비동기 데이터를 처리할 때, `useFetch` 같은 커스텀 훅을 만들어 비동기 상태를 관리해본 경험이 있다.

(해당 내용은 이전에 [\*\*API 통신부터 에러 핸들링까지(feat. Axios)](https://kang-kibong.github.io/api-%ED%86%B5%EC%8B%A0%EB%B6%80%ED%84%B0-%EC%97%90%EB%9F%AC-%ED%95%B8%EB%93%A4%EB%A7%81%EA%B9%8C%EC%A7%80-feat-axios.html)\*\* 포스팅에서 자세하게 살펴볼 수 있다.)
(해당 내용은 이전에 [**API 통신부터 에러 핸들링까지(feat. Axios)**](https://kang-kibong.github.io/api-%ED%86%B5%EC%8B%A0%EB%B6%80%ED%84%B0-%EC%97%90%EB%9F%AC-%ED%95%B8%EB%93%A4%EB%A7%81%EA%B9%8C%EC%A7%80-feat-axios.html) 포스팅에서 자세하게 살펴볼 수 있다.)

하지만, 이러한 방식은 명령형 프로그래밍 스타일로, 비동기 상태에 따른 다양한 분기 처리를 직접 구현해야 하는 단점이 있다.

Expand Down Expand Up @@ -422,7 +422,7 @@ import { useGetProductsDetail } from '@apis/products/hooks/useGetProductsDetail'
import { Spinner, ErrorMessage } from '@components/common'

interface GiftProps {
productId: string
productId: string
}

const ERROR_MESSAGE = 'Failed to load product details.'
Expand Down
6 changes: 3 additions & 3 deletions _site/feed.xml
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.9.5">Jekyll</generator><link href="http://localhost:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/" rel="alternate" type="text/html" /><updated>2024-08-15T15:10:38+09:00</updated><id>http://localhost:4000/feed.xml</id><title type="html">Kang Byeong-hyeon 👨🏻‍💻</title><subtitle>Kang Byeonghyeon&apos;s dev blog
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.9.5">Jekyll</generator><link href="http://localhost:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/" rel="alternate" type="text/html" /><updated>2024-08-15T15:16:37+09:00</updated><id>http://localhost:4000/feed.xml</id><title type="html">Kang Byeong-hyeon 👨🏻‍💻</title><subtitle>Kang Byeonghyeon&apos;s dev blog
</subtitle><author><name>Kang Byeonghyeon</name></author><entry><title type="html">[우선] 우선을 중단하며</title><link href="http://localhost:4000/%EC%9A%B0%EC%84%A0-%EC%9A%B0%EC%84%A0%EC%9D%84-%EC%A4%91%EB%8B%A8%ED%95%98%EB%A9%B0.html" rel="alternate" type="text/html" title="[우선] 우선을 중단하며" /><published>2024-07-28T00:00:00+09:00</published><updated>2024-07-28T00:00:00+09:00</updated><id>http://localhost:4000/%5B%EC%9A%B0%EC%84%A0%5D%20%EC%9A%B0%EC%84%A0%EC%9D%84%20%EC%A4%91%EB%8B%A8%ED%95%98%EB%A9%B0</id><content type="html" xml:base="http://localhost:4000/%EC%9A%B0%EC%84%A0-%EC%9A%B0%EC%84%A0%EC%9D%84-%EC%A4%91%EB%8B%A8%ED%95%98%EB%A9%B0.html">&lt;p&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;&lt;/p&gt;
Expand Down Expand Up @@ -655,7 +655,7 @@ bun add @tanstack/react-query

&lt;p&gt;이전에 Axios를 사용해 비동기 데이터를 처리할 때, &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;useFetch&lt;/code&gt; 같은 커스텀 훅을 만들어 비동기 상태를 관리해본 경험이 있다.&lt;/p&gt;

&lt;p&gt;(해당 내용은 이전에 &lt;a href=&quot;https://kang-kibong.github.io/api-%ED%86%B5%EC%8B%A0%EB%B6%80%ED%84%B0-%EC%97%90%EB%9F%AC-%ED%95%B8%EB%93%A4%EB%A7%81%EA%B9%8C%EC%A7%80-feat-axios.html&quot;&gt;**API 통신부터 에러 핸들링까지(feat. Axios)&lt;/a&gt;** 포스팅에서 자세하게 살펴볼 수 있다.)&lt;/p&gt;
&lt;p&gt;(해당 내용은 이전에 &lt;a href=&quot;https://kang-kibong.github.io/api-%ED%86%B5%EC%8B%A0%EB%B6%80%ED%84%B0-%EC%97%90%EB%9F%AC-%ED%95%B8%EB%93%A4%EB%A7%81%EA%B9%8C%EC%A7%80-feat-axios.html&quot;&gt;&lt;strong&gt;API 통신부터 에러 핸들링까지(feat. Axios)&lt;/strong&gt;&lt;/a&gt; 포스팅에서 자세하게 살펴볼 수 있다.)&lt;/p&gt;

&lt;p&gt;하지만, 이러한 방식은 명령형 프로그래밍 스타일로, 비동기 상태에 따른 다양한 분기 처리를 직접 구현해야 하는 단점이 있다.&lt;/p&gt;

Expand Down Expand Up @@ -756,7 +756,7 @@ bun add @tanstack/react-query
&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Spinner&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;ErrorMessage&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;@components/common&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;

&lt;span class=&quot;kr&quot;&gt;interface&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;GiftProps&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nl&quot;&gt;productId&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kr&quot;&gt;string&lt;/span&gt;
&lt;span class=&quot;nl&quot;&gt;productId&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kr&quot;&gt;string&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;ERROR_MESSAGE&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;Failed to load product details.&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&apos;&lt;/span&gt;
Expand Down
4 changes: 2 additions & 2 deletions _site/react-query와-concurrent-ui-pattern으로-서버-상태-효율적으로-관리하기.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -397,7 +397,7 @@ <h1 id="concurrent-ui-pattern을-통해-선언적으로-데이터-패칭하기">

<p>이전에 Axios를 사용해 비동기 데이터를 처리할 때, <code class="language-plaintext highlighter-rouge">useFetch</code> 같은 커스텀 훅을 만들어 비동기 상태를 관리해본 경험이 있다.</p>

<p>(해당 내용은 이전에 <a href="https://kang-kibong.github.io/api-%ED%86%B5%EC%8B%A0%EB%B6%80%ED%84%B0-%EC%97%90%EB%9F%AC-%ED%95%B8%EB%93%A4%EB%A7%81%EA%B9%8C%EC%A7%80-feat-axios.html">**API 통신부터 에러 핸들링까지(feat. Axios)</a>** 포스팅에서 자세하게 살펴볼 수 있다.)</p>
<p>(해당 내용은 이전에 <a href="https://kang-kibong.github.io/api-%ED%86%B5%EC%8B%A0%EB%B6%80%ED%84%B0-%EC%97%90%EB%9F%AC-%ED%95%B8%EB%93%A4%EB%A7%81%EA%B9%8C%EC%A7%80-feat-axios.html"><strong>API 통신부터 에러 핸들링까지(feat. Axios)</strong></a> 포스팅에서 자세하게 살펴볼 수 있다.)</p>

<p>하지만, 이러한 방식은 명령형 프로그래밍 스타일로, 비동기 상태에 따른 다양한 분기 처리를 직접 구현해야 하는 단점이 있다.</p>

Expand Down Expand Up @@ -498,7 +498,7 @@ <h2 id="asyncboundary-컴포넌트-사용해보기">AsyncBoundary 컴포넌트
<span class="k">import</span> <span class="p">{</span> <span class="nx">Spinner</span><span class="p">,</span> <span class="nx">ErrorMessage</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@components/common</span><span class="dl">'</span>

<span class="kr">interface</span> <span class="nx">GiftProps</span> <span class="p">{</span>
<span class="nl">productId</span><span class="p">:</span> <span class="kr">string</span>
<span class="nl">productId</span><span class="p">:</span> <span class="kr">string</span>
<span class="p">}</span>

<span class="kd">const</span> <span class="nx">ERROR_MESSAGE</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Failed to load product details.</span><span class="dl">'</span>
Expand Down

0 comments on commit 7127228

Please sign in to comment.