seonghyeonkimm

'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
exports.parser = void 0;
exports.parser = 'tsx';
function transformer(file, api) {
  let useNavigatorIdentifier;
  let usedUserFlowIdentifiers = [];
  const j = api.jscodeshift;
  const { statement } = j.template;
  const tree = j(file.source);

seonghyeonkimm

OpenApi 스펙을 활용해서 type-safe하게 ReactQuery 사용하기

 graphql 백엔드와 통신하면서 프론트 작업을 할 때에는 graphql-codegen 사용해서 graphql schema를 기준으로 types을 generate해서 사용했었습니다. 그래서 따로 parameters, body, 그리고 response에 대해서 type을 따로 신경쓸 필요 없었고 type-safe하게 작업할 수 있었습니다. 그런데 이번에 시작한 프로젝트에서는 graphql가 아닌 rest api로 구성되어있는 백엔드와 통신해야하는 상황이 생겼고, 직접 type들을 타이핑을 해야한다고 생각하니 그렇게 하기가 싫었습니다. (물론, Paste JSON as Code을 사용하면 조금 더 편하게 할 수 있긴 하지만 모든 문제를 해결해주는 것은 아니기 때문에)

 예전에 최태건님이 FEConf에서 발표했던 OpenAPI Specification으로 타입-세이프하게 API 개발하기: 희망편 VS 절망편 영상을 보면서 백엔드에서 OpenApi 스펙을 제공해준다면 이 정보를 이용해서 typing을 만들어 낼 수 있다는 사실을 배웠던 것이 생각이 났고 새로운 프로젝트를 시작하는 김에 OpenApi를 사용해서 type을 generate하고 type-safe하게 react-query hook을 사용하고 싶었습니다. 그래서 개인적으로 어떻게 OpenApi 스펙과 몇 가지 라이브러리들을 활용해서 어떻게 react-query hook을 사용하고 있는지 정리해보려고합니다. 바로 그냥 코드만 보고 싶으신 분들은 [아래 링크](https://gist.github.com/seonghyeonkimm/977b58387f9f4e11afeee8c7685c2e89#file-1-use-oai-query-examp

seonghyeonkimm

React 18 미리보기

즉시 사용 가능한 개선점

코드의 변경 없이 React 18로 업데이트하자마자 얻을 수 있는 개선점에 대해서 간단히 이해해보자.

Automatic batching for fewer renders

  제목에서도 알 수 있는 것처럼 간단히 설명하자면, React 18 이전에는 오직 이벤트 핸들러 안에서 발생한 setState만 모아서 처리 했지만, React 18 이후부터는 promise, setTimeout 등에서 발생한 연속적인 setState도 모아서 처리될 수 있도록 개선되었다는 내용이다.

  위 기능을 피하고 싶다면 react-dom의 flushSync api를 이용하면 모아서 처리하지 않고 하나의 setState가 바로 re-render를 일으키도록 명시적으로 코드를 추가할 수 있다.

seonghyeonkimm

• 2022 Quartly memory book
• Make new sports experience
• Find side project team and make money
• Let's prepare and do self-pr (writing blogs -> share in twitter and geeknews)

seonghyeonkimm

nextjs 서비스 개발부터 운영까지

 nextjs로 지금 현재 커머스를 개발하고 있습니다. 그런데 어쩌다보니 많은 부분에 있어서 직접 셋업하는 과정에 참여했고, 그 과정에서 배웠던 내용들을 팀원들에게 공유하고자 다음 글을 기획했습니다. 실제로 나중에는 어떻게 구성들이 추가될지 삭제될지 모르곘지만 아래와 같은 구성으로 몇개의 글을 작성해보려고 합니다. 긴 글을 다 읽기 귀찮으신 분들을 위해서 핵심 내용들만을 강조해두려고 최대한 노력했습니다. 시간이 부족하신 분들은 강조해둔 영역만 읽으셔도 충분할 것이라고 생각합니다.

• Part 1 - nextjs 서비스 아키텍처
• Part 2 - nextjs 서비스 개발 경험 및 트러블슈팅
• Part 3 - nextjs 서비스 프러덕션 운영기 (Comming soon..)

seonghyeonkimm

react v18, nextjs, (suspense mode) react-query 엣지 케이스

nextjs, react@next, react-dom@next, (suspense mode) react-query을 같이 사용하면서 다음과 같은 이슈가 있었는데요.

1. server에서 page 컴포넌트를 render할 때에 react-query useQuery의 queryFunction이 실행됨.

• 원래 react-query의 useQuery는 useEffect안에서 queryFunction을 실행시키기때문에 browser환경에서만 실행되어야하는데 (react-query의 suspense 옵션을 enabled하면) suspense for data fetching의 특성상 브라우저나 서버와 같은 환경과 상관없이 render와 동시에 queryFunction이 실행되기 때문에 위와 같은 상황이 발생합니다.
• 그런데 page 컴포넌트의 useQuery는 jwt가 필요한 api를 부르는 hook이었고 server request에 접근할 수 없기 때문에 cookie에 접근할 수 없고 jwt를 얻을 수 없기 때문에 무조건 error를 낼 수 밖에 없었습니다. 그래서 useQuery가 서버에서는 실행이 안되었으면 했는데요. 또, server에서 미리 해당 queryKey의 data를 prefetch하기 때문에 실제로 client에서 page가 render될 때에는 데이터가 있을 건데, 서버에서 불필요하게 useQuery의 queryFunction을 실행시키는 것을 막고 싶었습니다.

2. 그래서 제가 땜빵(?)으로 취한 접근은 아래와 같이 useQuery를 server에서는 성공한 것처럼 if문을 추가했습니다.