🪟 Window

<img src="https://image.until.blog/morethanmin/article/1716045513650" alt="until-71"><p>항상 맥북만 사용하다가 이번에 데스크탑을 맞추게 되면서 개발환경을 윈도우에서 세팅하게 되었다.</p><h2>fnm이란?</h2><p>노드 버전을 관리할 수 있게 해주는 매니저로 nvm과 유사하지만 윈도우에서는 nvm이 지원되지 않기 때문에 fnm를 사용해보려고한다.</p><h2>winget으로 fnm 설치하기</h2><p>파워쉘에서 아래와 같이 입력하여 설치할 수 있다.</p><pre spellcheck="false"><code>winget install Schniz.fnm</code></pre><h3>0x8a15000f 오류가 발생하는 경우</h3><p>마이크로소프트 스토어에서 앱 설치 관리자를 업데이트 해주면 된다.</p><img src="https://image.until.blog/morethanmin/article/1716045690970" alt="until-72"><h2>fnm으로 node 설치하기</h2><h3>프로필 설정</h3><p>우선 <code spellcheck="false">PowerShell</code>프로필에 환경변수를 등록해야한다.</p><p><code spellcheck="false">~\Documents\WindowsPowerShell\Microsoft.PowerShell_profile.ps1</code> 경로에 아래와같이 입력 해주면 된다.</p><pre spellcheck="false"><code>fnm env --use-on-cd | Out-String | Invoke-Expression</code></pre><h3>PowerShell 실행시 PSSecurityException 오류가 발생하는 경우</h3><p>기본적으로 스크립트 삽입하는 것이 막혀있기 때문에 설정을 바꿔줘야한다.</p><p>관리자 권한으로 <code spellcheck="false">PowerShell</code> 을 실행해서 아래와 같이 입력한다.</p><pre spellcheck="false"><code>Set-ExecutionPolicy RemoteSigned</code></pre><h3>node 설치</h3><p>이제 <code spellcheck="false">PowerShell</code> 을 재부팅하고 아래와 같이 입력해 노드를 설치하면된다.</p><pre spellcheck="false"><code>fnm use --install-if-missing 20</code></pre><hr><p>그럼 이제 node를 사용할 수 있다! 근데 PowerShell도 그렇고 여러 이슈들도 그렇고 좀 귀찮은 것 같다. 좀 더 사용해보다가 정 안되면 wsl을 사용해야겠다.</p><p></p><p></p><p></p><p></p>

항상 맥북만 사용하다가 이번에 데스크탑을 맞추게 되면서 개발환경을 윈도우에서 세팅하게 되었다.fnm이란?노드 버전을 관리할 수 있게 해주는 매니저로 nvm과 유사하지만 윈도우에서는 nvm이 지원되지 않기 때문에 fnm를 사용해보려고한다.winget으로 fnm 설치하기파워쉘에서 아래와 같이 입력하여 설치할 수 있다.winget install Schniz.fn

윈도우에서 winget으로 fnm 설치하기 (Fast Node Manager)

⚛️ React

<img src="https://image.until.blog/morethanmin/article/1716912103640" alt="until-344"><blockquote><p>next.js 의 pages router 기준으로 작성되었어요.</p></blockquote><p>next.js서버사이드에서 데이터를 prefetch하기 위해서 리액트쿼리에서 제안하는 방식은 크게 두가지가 존재한다.</p><ol><li><p>데이터 패칭을 한 뒤에 <code spellcheck="false">serverSideProps</code>의 props로 넘겨주는 방식</p></li><li><p>서버사이드에서 <code spellcheck="false">queryClient</code>에 데이터를 저장하고, <code spellcheck="false">queryClient</code>자체를 <code spellcheck="false">dehydrate</code>하여 넘겨주는 <code spellcheck="false">Hydration</code> 방식</p></li></ol><p>첫번째 방식은 비교적 간단하지만 props drilling이나 여러곳에서 사용할 경우 initialData를 넣어주는 것이 까다롭다는 단점이 있다.</p><p>때문에 프리패칭하는 데이터가 여러곳에 존재하고, 복잡할 경우 두번째 방식을 사용하는 것이 좋을것이다.</p><p><code spellcheck="false">Hydration</code>방식을 사용하기 위해서는 <code spellcheck="false">fetchQuery</code>와 <code spellcheck="false">prefetchQuery</code>의 차이점을 알아보자.</p><h1>prefetchQuery</h1><p>prefetchQuery는 결과값을 리턴하지 않으며, 데이터 패칭에 실패할 경우 에러를 던지지 않는다는 특징을 가지고 있다.</p><p>따라서 데이터를 불러오지 못하더라도, UI를 그려줄 수 있는 경우에는 prefetchQuery를 사용하면 된다.</p><pre spellcheck="false"><code class="language-typescript">// ...
await queryClient.prefetchQuery({
  queryKey: queryKeys.articles()
  queryFn: getArticles()
});
// ...</code></pre><h1>fetchQuery</h1><p>fetchQuery와 같은 경우에는 결과값을 리턴하고, 데이터 패칭에 실패하는 경우에는 에러를 던진다.</p><p>따라서 error handling이 가능하다는 얘기이다.</p><p>언틸에서의 블로그 프로필 페이지를 예로 들어보자.</p><pre spellcheck="false"><code class="language-typescript">export const getServerSideProps: GetServerSideProps = async (context) =&gt; {
  try {
    setCookie(context)
    const username = getUsername(context)await queryClient.fetchQuery({
      queryKey: queryKeys.blog.username.body(username),
      queryFn: createGetBlog(username),
    })
    return {
      props: {
      dehydratedState: dehydrate(queryClient),
    },
  }} catch (error) {
    return {
      notFound: true,
    }
  }
}</code></pre><p>블로그를 조회하는 api는 잘못된 username으로 요청하는 경우 404 페이지를 보여줘야 하기에 <code spellcheck="false">fetchQuery</code>를 통해 구현해주었다.</p><p>또한 return value를 사용하는 경우에도 fetchQuery를 사용해 구현해줄 수 있다.</p><p></p><p></p>

next.js 의 pages router 기준으로 작성되었어요.next.js서버사이드에서 데이터를 prefetch하기 위해서 리액트쿼리에서 제안하는 방식은 크게 두가지가 존재한다.데이터 패칭을 한 뒤에 serverSideProps의 props로 넘겨주는 방식서버사이드에서 queryClient에 데이터를 저장하고, queryClient자체를 dehydrate

react-query의 fetchQuery과 prefetchQuery

웹개발 안 하다 보면 맨날 까먹는 내용들인데 덕분에 잘 복습하고 갑니다 🤗

변경이 잦은 프론트엔드에서 어떻게 건강한 테스트코드를 작성할 수 있을까?

Vitest + MSW 로 유연한 단위 / 통합 테스트코드 작성해보기

Cloud Issue

<blockquote><p>Dawn입니다. 오늘은 업무를 하다 일어난 일을 정리하여 기록하려고 합니다. 부족한 제 글을 읽어주셔서 감사합니다. 😁</p></blockquote><h2>배경</h2><p>저희 회사는 멀티 클라우드(GCP, NCP) 기반 서비스를 운영하고 있습니다. 그 중 CDC 파이프라인은 대충 그리자면 아래와 같습니다. 따라서 사내 로그를 <code spellcheck="false">BigQuery</code>로 적재하기 위해서 적절한 <code spellcheck="false">Logging Sink</code>를 생성하는 것이 맞습니다. <br><strong><u>그런데..아래와 같은 메일 내용이 전직원에게 전달되게 됩니다.(젠장..)</u></strong></p><img src="https://image.until.blog/dawn-py/article/1727248513445.png" alt="until-1543"><p>이 문제가 왜 발생했는지 원인을 파악하고 해결했던 방법에 대해서 작성해보도록 하겠습니다.(<em>의외로 간단했다..</em>)</p><h2>원인 파악</h2><p>이 오류의 원인은 <code spellcheck="false">gcloud</code> 로 싱크를 생성할 경우 <code spellcheck="false">BigQuery</code>내의 권한 부여(<code spellcheck="false">Data editor</code>)까지 자동으로 적용하지 않는 것이었습니다. 또한 <strong>Logging 서비스 에이전트</strong>(Logging Service Agent)와 밀접한 관련이 있는 오류였습니다. 그렇다면 Logging 서비스 에이전트가 뭘까요?</p><h3>Logging Service Agent</h3><p>정의하자면 GCP Logging을 포함한 Stack Driver API 내의 서비스를 참조 혹은 직접적으로 사용하게 될 경우 문제가 되지 않게 <strong>구글에서 자동으로 생성해주는 서비스 계정입니다.</strong></p><p><strong><u>이전</u></strong>에는 Logging 싱크가 생성될 때마다 <code spellcheck="false">p{projectID}-{randomInt}@sa-googleapis.com</code> , 이런 형식으로 서비스 계정에 <strong>BigQuery 데이터 편집자</strong> 권한을 부여하고 싱크 프로젝트 단위로 생성해주었습니다.</p><p>하지만 <strong><u>현재</u></strong>는 생성되는 싱크는 모두 <code spellcheck="false">service-{projectID}@sa-googleapis.com</code> , 형식의 공통의 서비스 계정을 참조하고 있고 이 계정을 <strong>Logging 서비스 에이전트</strong>라고 합니다. 아래는 Logging 싱크 생성 시 발생되는 상황을 시퀀스 다이어그램으로 정리한 그림입니다.</p><img src="https://image.until.blog/dawn-py/article/1727248529439.png" alt="until-1544"><p>이 때 웹 콘솔과 <code spellcheck="false">gcloud</code>의 생크 생성 과정은 전혀 다른 로직을 타게 됩니다. 따라서 싱크를 생성했을 당시 CLI로 생성했기에 라우팅되는 로그를 실시간으로 적재하기 위해 Logging 서비스 에이전트의 서비스 계정을 찾아 최소 데이터셋에 대한 데이터 편집자 권한을 등록해야 했던 겁니다.</p><h2>오류 해결</h2><img src="https://image.until.blog/dawn-py/article/1727248585126.png" alt="until-1545"><blockquote><p>⚠️&nbsp;저희 팀은 GCP 관리자(<strong>Admin</strong>) 권한을 가지고 있기 때문에 IAM 관리 및 편집이 가능합니다. 만약 권한이 없다면 따로 요청을 해서 처리해야 할 것입니다. 이 점 참고바랍니다.</p></blockquote><p>IAM관리 탭에서 우리는 ‘Google 제공 역할 부여 포함’을 체크하게 되면 <code spellcheck="false">Logging 서비스 에이전트</code>에 등록된 서비스 계정을 확인할 수 있었고 해당 계정을 편집하여 <strong>BigQuery 데이터 편집자</strong> 역할까지 부여하게 되니 <code spellcheck="false">gcloud</code>로 생성 시 <strong>BigQuery</strong> 내에 테이블이 생성되는 것을 확인할 수 있었습니다.</p><blockquote><p>여기까지 부족한 글임에도 읽어주셔서 감사합니다.<br>Dawn이었습니다. 😁</p></blockquote><hr><h2>참고 자료</h2><ul><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.google.com/logging/docs/routing/user-managed-service-accounts?hl=ko">사용자 관리형 서비스 계정으로 로그 싱크 구성 &nbsp;|&nbsp; Cloud Logging &nbsp;|&nbsp; Google Cloud</a></p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://stackoverflow.com/questions/58899182/google-cloud-stackdriver-logging-log-export-to-bigquery-access-to-the-datase">Google Cloud Stackdriver Logging - Log Export to BigQuery - Access to the dataset was denied</a></p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://stackoverflow.com/questions/61935273/google-cloud-creating-sink">Google Cloud - creating sink</a></p></li></ul>

GCP Logging Sink를 활용해 BigQuery에 로그를 적재하는 과정에서 발생한 권한 문제 해결 방안.