
![Untitled](https://user-images.githubusercontent.com/67692759/236611257-bcb158e6-26aa-42d7-8cba-00b95baba711.png)

### atom

상태(state)의 일부. atom값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다.

### selector

파생된 state를 저장함. 파생된 상태는 상태의 **변화**다.

가장 큰 특징은 멱등성. 순수함수이다.

때문에 selector를 비동기 함수로 사용하는 것

### snapshot

atom 상태 읽기 전용. snapshot은 계속 변하는 상태의 ‘한 순간’이다. snapshot은 상태가 변할 때마다 생성된다.

### useReacoilCallback

[https://recoiljs.org/docs/api-reference/core/useRecoilCallback/](https://recoiljs.org/docs/api-reference/core/useRecoilCallback/)

useCallback과 비슷하지만, Recoil 상태(state)에서 callback이 동작하도록 API를 제공한다.

- 비동기적으로 Recoil 상태를 업데이트 할때
- Recoil 상태의 snapshot에 접근할 수 있는 callback을 만들기 위해

### useCallback과는 어떤 차이?

```tsx
const log1 = useCallback(() => {
  console.log("called with ", "nothing");
});
const log2 = useRecoilCallback(({ snapshot }) => () => {
  console.log("called with ", snapshot);
});
```

useRecoilCallback에서 첫번째 인수는 스냅샷 관련 기능을 전달하기 위해 한 번 더 감싸진 ‘실행할 함수를 만드는 함수’를 사용한다. 여기서 생성된 함수의 인수로 전달되는 객체에는 gotoSnapshot 함수, set 함수, reset 함수가 포함되어 있다.

### atomFamily

[https://recoiljs.org/docs/api-reference/utils/atomFamily/](https://recoiljs.org/docs/api-reference/utils/atomFamily/)

우선 family란 비슷한 기능을 하는 별개의 atom이 필요한 경우 필요한 만큼 각각 선언하는 대신 하나의 형태를 선언해 놓고 팩토리처럼 언제든 새롭게 만들어 사용할 수 있는 기능.

But, what if your state isn’t global? What if your state is associated with a particular instance of a control, or with a particular element?

An Atom Family represents a collection of atoms. When you call `atomFamily()`
 it will return a function which provides the `RecoilState` atom based on the parameters you pass in.

대분류를 만들고 그 안의 소분류들을 사용하고 싶을때 쓰는느낌. family라는 말 그대로 하나로 묶이는 그룹을 만들어서 사용하기.

### selectorFamily

파생 상태를 id별로 다르게 하는 방식

allows you to pass parameters to the `get` and `set` callbacks of a `selector`

매개변수가 있는 쿼리를 실행할 때 사용한다. props를 기반으로 쿼리를 실행하고 싶을 때

굳이 저장하지 않아도 되는 상태값에 따라서 다른 쿼리 결과를 내고 싶을 때 사용


Recoil 맛보기


## 댓글 기능 추가

어떤 기능이 더 들어가면 좋을까 고민하다 댓글 기능을 추가하기로 했다. Github issue를 기반으로 동작하는 [utteranc](https://utteranc.es/)를 사용해보자.

### react에서 쓸 수 있도록 컴포넌트화

utteranc의 사용방법은 매우 간단하다. 홈페이지에서 제안하는대로 따라가면 된다. 원하는 레포에 utteranc를 다운받고, 원하는 형식을 선택하고 해당 script를 사용하면 된다. page pathname보다는 page title을 issue tittle로 하는 것이 보기 좋을 것 같아 page title을 선택하였다. 내 블로그는 react를 기반으로 만들어졌기 때문에 해당 script를 컴포넌트화 하여 컴포넌트 형식으로 사용할 수 있도록 하자.

```tsx
import useThemeMode from "hooks/useThemeMode";

const Comment = () => {
  const { themeMode } = useThemeMode();

  return (
    <section
      ref={(elem) => {
        if (!elem) {
          return;
        }
        const scriptElem = document.createElement("script");
        scriptElem.src = "https://utteranc.es/client.js";
        scriptElem.async = true;
        scriptElem.setAttribute("repo", "prefer2/prefer2.dev");
        scriptElem.setAttribute("issue-term", "title");
        scriptElem.setAttribute("theme", `github-${themeMode}`);
        scriptElem.crossOrigin = "anonymous";
        elem.replaceChildren(scriptElem);
      }}
    />
  );
};

export default Comment;
```

### 😱 Github 로그인 시 redirect가 이상한 페이지로 이동?!?!

![utteranc 오류](https://user-images.githubusercontent.com/67692759/212606818-3490371c-3386-4146-89e3-3b2c0671fa11.png)

issue를 찾아보니 redirect시 link의 cannoical를 사용한다고 한다. 덕분에 잘못된 cannoical을 설정해주고 있었음을 확인할 수 있었다. 오타를 고쳐주니 정상적으로 동작했다. 혹시 나처럼 redirect가 이상한 곳으로 가서 404 에러가 발생한다면 cannonical값을 다시 한 번 확인해보자.

[https://github.com/utterance/utterances/issues/474](https://github.com/utterance/utterances/issues/474)

---

## Recoil 얹기

댓글을 추가하고 나니 댓글의 테마도 모드에 따라 변경되게 하고 싶었다. 기존에 알아보고 싶었던 recoil도 학습할 겸 recoil를 사용해보았다.

recoil 개념에 대해 알아보기 좋은 동영상

[https://www.youtube.com/watch?v=\_ISAA_Jt9kI](https://www.youtube.com/watch?v=_ISAA_Jt9kI)

### next.js + recoil

쉽게 적용이 가능했으나 hot module replacement를 사용할때마다 에러가 발생하였다. 해결방법을 찾다보니 해당 이슈가 꽤나 핫한 것을 확인할 수 있다.

![next.js + recoil 에러 메시지](https://user-images.githubusercontent.com/67692759/212606920-636dccf7-c73e-4a61-b951-2208daa1b64a.png)

https://github.com/facebookexperimental/Recoil/issues/733

recoil도 해당 문제점을 알고 해결 방법을 최근에 추가하였다. [https://recoiljs.org/ko/blog/2022/10/11/recoil-0.7.6-release](https://recoiljs.org/ko/blog/2022/10/11/recoil-0.7.6-release)

블로그에서 제안하듯이 `RecoilEnv.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED = false`

로 환경 설정값을 지정해주면 된다.

[https://nextjs.org/docs/messages/react-hydration-error](https://nextjs.org/docs/messages/react-hydration-error)

사실 단순히 테마 값 하나만을 위해서 recoil을 추가한 건 좀 많이 과하다. 그래도 처음으로 recoil을 사용해보고 어떤 식으로 동작하는지 공부해볼 수 있었다.

---

## Scroll Progress Bar 추가

사용자가 전체 글의 어느 위치에 있는지 보여주기 위해 scroll progress bar를 추가하였다. 페이지가 그려지고 나서야 전체 페이지의 높이를 알 수 있기 때문에 `useEffect`를 사용하여 이를 구했다. (rAF 기반 throttle을 걸어 주었는데 의문점이 생겨서 관련 내용은 따로 정리해볼 예정이다)

페이지 전환 시에는 스크롤의 위치가 0으로 되게 하기 위해서 아래와 같은 코드를 추가해주었다

```tsx
Router.events.on("routeChangeComplete", (): void => setScrollPercentage(0));
```

---

## 이전글, 다음글

포스팅 마다 이전글, 다음글을 보여주는 컴포넌트를 추가하였다. 포스팅 페이지 렌더링 시 slug 값을 가져오는 형식이다. 로직은 아래와 같이 작성했는데 조금 더 좋은 방법이 없을지 고민이다.

```tsx
export const getPrevNextPosts = (slug: string) => {
  const slugs = getPostSlugs();

  let slugIndex = 0;
  const posts = slugs
    .map((slug) => getPostBySlug(slug))
    .sort(
      (post1, post2) =>
        Number(new Date(post2.date)) - Number(new Date(post1.date))
    )
    .map((post, idx) => {
      if (post.slug === slug) slugIndex = idx;
      return { title: post.title, slug: post.slug };
    });

  if (slugIndex === 0) return { prev: posts[slugIndex + 1] };
  if (slugIndex === slugs.length - 1) return { next: posts[slugIndex - 1] };

  const nextPost = posts[slugIndex - 1];
  const prevPost = posts[slugIndex + 1];

  return { prev: prevPost, next: nextPost };
};
```

slug과 제목을 넘겨주어 포스팅 하단에서 제목을 확인할 수 있고, 이를 클릭하면 해당 글로 이동하게 된다.

![이전글, 다음글 기능](https://user-images.githubusercontent.com/67692759/212607324-0ee77646-ad0c-4b99-8779-252a613f9378.png)

2편에는 어떤 기능들을 추가해야할지 흠흠


댓글기능 추가, recoil, scroll progress bar, 이전글 다음글

Tags - recoil (2)

Recoil 맛보기

블로그 발전기 - 1편