문제client-side에서 데이터를 패칭 할 때 쿼리 스트링 등 동적으로 데이터 패칭이 필요 할 때 빌드 시 해당 API는 server-side 데이터를 가져 올 수 없으므로 빌드 에러가 나게 된다.문제 코드// index.tsxconst fetchOrders = useCallback(async () => { try { if ( !user || searchConditions.merchantId === undefined || searchConditions.sellerId === undefined ) return; const { totalCount, orders: fetchedOrders } = await getOrders(..

💡 백오피스 개발 중 가장 화나게 만드는 too many clients 오류를 수정해보려 합니다.스토어&센터 백오피스 모두 Next.js와 knex를 사용하고 있는데, 개발 과정에서 커넥션 수가 넘치는 상황이 너무나도 많이 발생했다.(프로덕션 환경에서는 확인 해보지 않았으나) 내가 확인한 커넥션이 발생하는 케이스는페이지 이동내가 띄어논 페이지 화면에서의 코드 수정 후 저장 시 리로딩두 가지 케이스에서 발생 하는 것을 확인 할 수 있었다.2번 케이스의 경우 npm run start:dev 로 실행시켜놓고 계속해서 작업을 하니 문제가 되지 않나 생각이 들었다.커넥션 수 확인 방법SELECT datname, count(*) as connection_countFROM pg_stat_activityGROU..

💡 우연히 보게 된 화해 블로그의 Notion API 연동기.잘 적용해보면 이리저리 쓰일 곳이 많을 것 같아서 백오피스 공지사항에 R&D 해보았다.Notion API와 함께 정적 페이지로의 여정 – 화해 블로그 | 기술 블로그관리자가 쓰기 쉬운 툴우리 회사는 노션을 이미 사용 하고 있다. 스케쥴부터 공유 문서 등에서 모든 부서가 노션을 사용하고 있었으며, 그렇기에 노션 사용이 익숙할 것이라고 생각했다. 그렇지만 이미 백오피스에서 공지사항 입력 폼은 만들어 놓았었다. 그러나 아직 데이터베이스 공지사항에 셋팅 해놓지 않았고, 내용 입력에서는 아직 따로 텍스트 입력기 등의 라이브러리를 사용하지 않으므로 글자에 스타일 적용이 불가하다. 텍스트 입력기 라이브러리를 적용하면 되잖아? 싶지만 테이블 셋팅이 아직 안..

💡 우리는 백단을 Nest.js로, 프론트단을 Next.js로 사용하고 있다.그런데 Access Token을 Nest.js에서 cookie로 만들려고 했더니, Nest.js → Next.js(api) → Next.js(front)로 가기 때문에 생성을 할 수 없었다.그래서 다른 방법을 생각해 보는데…위에서 말한대로 Next.js에도 SSR이 있기 때문에 그걸 통해서 Nest.js와 통신을 하려고 작업 중이다.로그인 시 순서는Next.js Front → Next.js Back → Nest.js → Next.js Back → Next.js Front의 순서로 가고 있다.Token도 이와 동일한 순서로 가서 Nest.js에서 만들어진다.그래서!Nest.js에서 Access Token과 Refresh Toke..

추가 패키지@nestjs/passport@types/passportpassportpassport-headerapikey참고 문서https://medium.com/@alpercitak/nest-js-authenticate-with-both-api-key-and-jwt-4a22bf7b3049https://medium.com/@Dee_Mayoor/apikey-authentication-for-nestjs-using-passport-js-6db467fc31f7https://www.stewright.me/2021/03/add-header-api-key-to-nestjs-rest-api/authorization을 각각 UseGuard 를 이용해 컨트롤러에 붙이고 싶지 않고, 미들웨어를 이용해서 전역으로 붙이고 싶었..

먼저 module별로 테스트 하는 방법은 찾아내지 못했다.app.module.ts 를 테스트 하기로 했고, 신기하게도 테스트 돌리니 전에 get에서 find로 함수명을 바꿨는데, resolver에는 적용되지 않았던 부분을 잡아줬다!블로그에는 app을 INestApplication 를 이용해서 테스트 하라고 하지만, 그럴 필요 없다.supertest도 import * as request from 'supertest' 로 하라고 하지만 에러가 난다. (아마 버전 차이일 수도..)import request from 'supertest' 로 변경해주니 에러가 나지 않았다.그래서 import 해주어야 될 것은 아래와 같다import { Test } from '@nestjs/testing';import reques..

💡 lomad2.5-api로 toy project를 하는 중 typeorm을 nest.js에서 많이 쓰는 것을 알게되었고, typeorm을 쓰려고 했다.블로그에 적혀있는 typeorm사용법은 entity를 만드는 것 부터 적혀있는데, 테이블이 db에 자동으로 생성된다.생성하는 기능은 좋으나, 현재는 이미 있는 모든 테이블들을 generate하고 싶었다.(나는 생성할 테이블이 현재 없기에..)그래서 구글링해본 결과entity에 synchronize: false 를 해준다. 이는 이미 완성된 테이블에 연결 하는 경우, 모든 컬럼을 다 정의해주어야 한다고 한다. 하지만 users 테이블만 봐도 컬럼이 어마어마 하기 때문에 할 자신이 들지 않았다. import { Entity, Column, PrimaryGe..

https://developers.google.com/chat/api/guides/message-formats/cards?hl=ko{ "cardsV2": [ { "cardId": "unique-card-id", "card": { "header": { "title": "Sasha", "subtitle": "Software Engineer", "imageUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png", "imageType": "CIRCLE", "imageAltText": "Avatar fo..

cypress를 이용하여 login test코드를 짜보았다.cypress installnpm i cypress문서나 예제에는 dev로 install하라고 써져 있지만 dev로 하면 import시 에러가 난다.run// package.json"test:cypress": "cypress open"cypress open을 하면 멋지게 열린다!cypress는 Mocha 기반이고, admin3는 Jest를 쓰고 있어 config파일을 설정해주지 않으면 jest가 동작하지 않는다.// route의 tsconfig.json"types": ["jest", "@types/testing-library__jest-dom"], // compilerOptions에 추가"include": ["next-env.d.ts", "**..

@testing-library/react 라이브러리 사용Enzyme 를 사용하지 않은 이유는 testing-library/react 가 실제 환경에서 돌아가는 테스트를 할 수 있어서 사용하지 않았다.뭔가 한글로 된 관련 질문? 블로그는 Enzyme 가 더 많은 것 같기두..https://blog.logrocket.com/testing-react-components-react-testing-library-vs-enzyme/https://www.daleseo.com/react-testing-library/LoginForm.testrender(); 를 먼저 하고 screen 으로 항목들을 가져온다.render시 onSubmit을 mocking 하고 싶을 때는 .tsx 파일에서 onSubmit을 받고 있어야 한..