개발 노트/error case

상황나는 page router를 좋아하지만, 이번에는 여러 사정이 있어서 app router를 쓰게 되었다. 이왕 쓰게 된 김에 이런 저런 기능을 몽땅 활용할 생각이었다. 가장 기대하던 기능은 데이터 캐싱이었는데, 가능한 많은 걸 캐싱해두면 랜더링 완료 시점을 한참 일찍 앞당길 수 있을 거란 기대가 있었다.나는 여러 캐싱 기능을 테스트해보기 위해 아래와 같은 코드를 작성했다. 백엔드에서 랜덤한 기술 질문을 하나 가져오고, ─ 원래라면 revalidate: 10 을 넣었겠지만 ─ 캐시에 TTL 없이 보관하는 설정을 시험해보고자 cache: "force-cache"로 지정해 fetch 요청을 캐싱했다. 이렇게 하면 빌드 시점 이후에는 동일한 요청에 대해 항상 캐시된 데이터를 반환하게 되며, 의도한 대로라면 ..

상황Nest.js 서버에서 jest를 사용한 테스트 코드를 작성하고 있었다. 평소에는 아래와 같이 ConfigService를 모의하여 configService.get으로 환경 변수를 처리했다. 그런데 이런 방식이 마음에 들지 않았다. 가장 큰 이유는 필요한 문자열이 하드코딩 되어있어 환경 변수를 바꾸거나 바뀌어야 할 때마다 수작업을 해야 했기 때문이다.{ provide: ConfigService, useValue: { get: jest.fn((key: string) => { if (key === 'jwt.accessSecret') return 'accessSecret'; if (key === 'jwt.refreshSecret') return 'refreshSecret'; ..

상황내가 혼자 개발하고 있는 onef에 댓글 기능을 추가하기로 했다. 우선은 댓글 작성 로직과 작성 컴포넌트를 구현하였다. 이후에 댓글 수정 기능이 필요하다는 걸 깨닫고 보니 댓글 작성 로직에서 post만 put 메소드로 바꿔주면 된다는 사실을 알게되었다. 이를 위해 댓글 작성 컴포넌트에서 해당 로직을 추출하고, 필요한 로직은 Context를 사용해 외부에서 주입하는 방식으로 변경하였다.// CommentMutation.tsexport class CommentMutation extends MutationFn { constructor() { super(); } postComment() { return ({ parentId, value, depth }: { parentId: string; v..

상황Button과 Link 및 여러 컴포넌트를 인자로 받아서 통일된 스타일을 처리해주는 Clickable 컴포넌트를 만들고 난 직후의 일이다. 로그인 페이지에서 Clickable 컴포넌트가 문제 없이 동작하는 걸 확인한 뒤 코드를 커밋했고, github action이 동작하며 라이브 서비스 서버로 배포가 완료되었다.그런데 잘 적용되었는지 살펴보던 중 한 가지 문제점을 발견하게 되었다. 어떤 Clickable은 스타일이 제대로 적용되어있는 반면에, 어떤 Clickable은 일부 스타일만 적용되어있는 것이 아닌가! 추리를 위해 당시 Clickable 컴포넌트가 어떤 모습이었는지 그 코드를 아래에 첨부한다.type ComponentType = typeof Button | typeof Link;type Clic..

이번 에러 케이스에는 서술 트릭이 존재한다. 상황나는 onef라는 이름의 풀스택 프로젝트를 혼자서 진행하고 있다. AWS로 배포하는 데 익숙해져서, 이번에도 AWS를 통해 서비스를 배포하려고 했다. 늘 그렇듯 VPC를 하나 만들고 거기에 두 개의 서브넷을 만들었다. 퍼블릭 서브넷에는 NextJs와 NestJs 서버가, 프라이빗 서브넷에는 NestJs 서버와만 통신하는 PostgreSQL 데이터베이스가 있다.그리고 https 통신을 구현하기 위해 [ ELB https 통신 구현 ]의 내용과 같이 로드밸런서를 하나 만들었다. 리스너에 요청 경로에 따른 규칙을 설정하여 중간에 api가 들어가면 NestJs 서버로, 그렇지 않은 경우에는 NextJs 서버로 요청이 가도록 했다. 이후에는 가비아에서 도메인을 하나..

상황 서버 상태관리를 React Query로 관리하기 시작하면서 기존에 fetch로 만들었던 리퀘스트 함수들을 AXIOS로 싹 갈아 엎기로 했다. AXIOS 자체가 러닝 커브가 낮은 편이라 갈아 엎는 작업 자체는 금방 끝났다. 그런데 npm run dev를 때리자 getServerSideProps에서 즉시 에러가 튀어나왔다. 문제 Error serializing .dehydratedState.queries[0].state.data.headers returned from getServerSideProps in "/mydashboard". "/mydashboard"페이지에서 사용한 getServerSideProps 함수에서 serializing 에러가 발생했다. 메세지만 놓고 보면 아주 단순한 에러이다. 여..

상황 진행중인 프로젝트에서 기존에 사용하던 module css가 아닌 tailwind를 사용하기로 결정되었다. 작업 빨리 쳐내야 할 때 클래스 검색하는 거로 시간을 쓰는 게 싫어서 공식문서도 읽고 카카오FE의 사용 후기도 읽어보면서 이것저것 테스트해보는 시간을 가지고 있었다. tailwind.config.ts 파일을 원하는 수준으로 개조하는 데 ─ 솔직히 tailwind의 크기 체계 좀 구린 듯 ─ 특히 도움을 많이 받았다. spacing: { ...range(1, 100).reduce((acc, px) => { acc[`${px}`] = pxToRem(px); return acc; }, {}), } 문제 여러 테스트 과정에서 '버튼을 누르면 튀어나오고, 또 버튼 누르면 도로 들어가는' 사이드바를 만들어..