
![image](https://github.com/prefer2/prefer2.dev/assets/67692759/dff7b89c-84e1-4232-b0eb-2969d6c841f0)

## unwrap

[https://redux-toolkit.js.org/api/createAsyncThunk#handling-thunk-results](https://redux-toolkit.js.org/api/createAsyncThunk#handling-thunk-results)

createAsyncThunk로 생성한 thunk는 무조건 promise를 반환한다. 이렇게 반환한 promise는 unwrap 프로퍼티가 있는데 이를 통해 fullfiled된 액션의 payload를 받거나, error를 던지거나, rejected action에서 rejectWithValue로 생성한 payload를 받을 수 있다

```tsx
const onClick = () => {
  dispatch(fetchUserById(userId))
    .unwrap()
    .then((originalPromiseResult) => {
      // handle result here
    })
    .catch((rejectedValueOrSerializedError) => {
      // handle error here
    });
};
```

```tsx
const onClick = async () => {
  try {
    const originalPromiseResult = await dispatch(
      fetchUserById(userId)
    ).unwrap();
    // handle result here
  } catch (rejectedValueOrSerializedError) {
    // handle error here
  }
};
```

언제 사용할까?

action의 fullfilled, rejected 후의 행동이 각 컴포넌트 별로 다를 때(공통적으로 처리가 어려울 때)

If you need to access the error or success payload immediately after a mutation, you can chain `.unwrap()`.

```tsx
addPost({ id: 1, name: "Example" })
  .unwrap()
  .then((payload) => console.log("fulfilled", payload))
  .catch((error) => console.error("rejected", error));
```

> However, it's common to want to write logic that looks at the success or failure of the actual request that was made. Redux Toolkit adds a `.unwrap()` function to the returned `Promise`, which will return a new `Promise` that either has the actual `action.payload` value from a `fulfilled` action, or throws an error if it's the `rejected` action. This lets us handle success and failure in the component using normal `try/catch` logic. So, we'll clear out the input fields to reset the form if the post was successfully created, and log the error to the console if it failed.

---

## Node exporter

[https://github.com/prometheus/node_exporter](https://github.com/prometheus/node_exporter)

[https://prometheus.io/docs/guides/node-exporter/](https://prometheus.io/docs/guides/node-exporter/)

모니터링 데이터를 프로메테우스로 수집하고, 수집한 정보를 한 곳에 모아(통합), 그라파나로 시각화한다고 이해정도만 한 정도…

TL님이 시간 있을때 한번 공부해보면 좋을 것 같다고 추천해주셨다. 최근 새로운 프로젝트를 진행하면서 로그를 추가해줄 일이 있었는데 회사의 로깅 시스템은 정말 잘 되어있는것 같다. 쭉 보다보니 회의때 듣던 이게 무슨 단어이지 싶은 단어들이 많이 나타나는게 아주 공부할게 많은 것 같다. 물론 이미 추상화가 잘되어 있고 미들웨어로 쓱싹하면 로그가 짠하고 나타나지만 공부하면 나쁠거 없지!

[https://d2.naver.com/helloworld/1044388](https://d2.naver.com/helloworld/1044388)

옛날 글이고 지금은 무려 nelo4지만 여기에 적을 수 있는 유일한 글인것 같아 남겨놓기

---

## 브라우저 디버깅

모던리액트 deep dive 중 내용

- 소스탭 > 감시, 범위(스코프), 호출스택, 전역 리스너 등을 확인할 수 있다. 실행하는 파일을 직접 볼 수 있는 것 뿐만 아니라 어떻게 실행되는지 자세하게 알 수 있다. 심지어 감시에 변수 값을 넣어서 원하는 값으로 변경하는 기능도 가능
- 메모리탭
  - 힙 스냅샷 > 비교를 통해 useMemo, useCallback과 같은 값들이 유지되는지 확인할 수 있다 ⇒ 실제로 함수가 재생성되는지 함수명을 기명함수로 두어 확인
  - 타임라인 할당 계측 ⇒ 시간의 흐름에 따른 메모리 변화, 어떤 변수가 일으켰는지

디버깅을 브라우저로 기깔나게 하시는걸 보고… 자스에서도 console.log 디버깅이 아닌 디버깅이 가능한걸 배우고 있는 요즘이다. hover하면 해당 값이 어떤 값 들어갔는지도 잘 볼 수 있고 소스탭을 잘 사용해보자

---

## 짧은 회고

공개될려면 좀 멀었지만 신규 서비스가 하나 완성되었다. 함께 진행하신 분과 하면서 배운게 여러가지인데 코드를 이쁘게 짜는걸 보며 감동받았다. 훅 분리나 로직 분리를 보면서 대박이다라는 생각을 속으로만 계속 하는중ㅋㅋ 나는 아직 예외처리같은 부분은 많이 부족하다고 느꼈는데 불필요한 코드를 작성하는 것은 아닌가라는 생각을(이걸 더하면 지저분해지는 것이 아닐까라는 생각) 줄이고 방어코드를 잘 작성해야겠다. 내가 작성하는 코드의 영향범위를 잘 파악하고 자신감을 가지자! 팀원분들의 좋은점은 많이 배우고 싶다.

집을 구하는 중인데 덕분에 부동산 용어나 돈의 개념에 대해서 생각이 많아지는 요즘이다. 돈의 속성이라는 책이 기본서라는데 한번 읽어봐야하는가 싶다. 좋은 집을 잘 구할 수 있으면 좋겠다.

+) 매주 글작성은 너무 무리라 한달 단위로 변경할래


[WIL] 2024.01


![image](https://github.com/prefer2/prefer2.dev/assets/67692759/21c38633-0333-474e-9280-28983d5f093d)

## ACL, ACG

[https://guide.ncloud-docs.com/docs/vpc-nacl-vpc](https://guide.ncloud-docs.com/docs/vpc-nacl-vpc)

[https://www.ncloud.com/product/security/acg](https://www.ncloud.com/product/security/acg)

ACL: Access Control List

ACG: Access Control Group

NAT(Network Address Translation), pod 등등 네트워크나 인프라 단어들이 쏟아진다. 네트워크 공부 하자…!

---

## Node.js

![Untitled](https://github.com/prefer2/prefer2.dev/assets/67692759/caca259e-c297-4ca9-ab44-82c0b79dd51b)

![Untitled 1](https://github.com/prefer2/prefer2.dev/assets/67692759/48d6b9ae-38a5-4f2d-aa8d-91e6898c23eb)

브라우저와는 약간 달라서 어렵다. worker_thread, cluster 음. 사실 몰라도 프레임워크나 pm2를 사용하는데는 문제는 없을것 같으나 그래도 공부해놓아야지. 이상하게 node 관련해서는 한국어 글들을 찾아보기 어려운 것 같다(내가 구글링을 못하는 걸지도…)

[https://nodesource.com/blog/worker-threads-nodejs](https://nodesource.com/blog/worker-threads-nodejs)

[https://engineering.linecorp.com/ko/blog/pm2-nodejs](https://engineering.linecorp.com/ko/blog/pm2-nodejs)

[https://yceffort.kr/2021/04/nodejs-multithreading-worker-threads](https://yceffort.kr/2021/04/nodejs-multithreading-worker-threads)

---

## node와 typescript

node환경에서 typescript를 사용하기 위해서는 javascript로 컴파일이 필요하다

### ts-node

https://www.npmjs.com/package/ts-node

> It JIT transforms TypeScript into JavaScript, enabling you to directly execute TypeScript on Node.js without precompiling.

주로 nodemon과 함께 local 개발을 할때 쓰이는 듯 하다

### @types/node

> This package contains type definitions for Node.js (http://nodejs.org/).

---

## rollup

[https://rollupjs.org/](https://rollupjs.org/)

[https://so-so.dev/tool/rollup/rollupjs-config/](https://so-so.dev/tool/rollup/rollupjs-config/)

---

## 짧은 회고

회사 컴퓨터에서 보안 문제로 제한이 좀 있다(귀차나) icloud를 쓰던지 하는 방식으로 변경해야 될 것 같다. 요즘 네트워크나 인프라 관련해서 몰라도 너무 모른다는 생각이 든다. 어디서부터 시작을 해야 할지 모를정도로 모르는 단어가 쏟아지는 중이다. 이래서 전공을 열심히 들으라고 했던 거구나...!


공부는 했지만 정리는 하지 않았다

Tags - node (2)

[WIL] 2024.01

[WIL] 9월 1주차