TypeScript
[React, Storybook] Provider, Context 설정
어느순간.. 다시 Storybook을 하게 된 나.. Nextjs로 Storybook 연동해서 하고 있는데, 아 이거 전역으로 주입하는 친구들은 Storybook에서 잘 못읽는다. 나같은 경우는 MUI나 커스텀 테마등등을 Nextjs에서 셋팅한 것과 똒같이 하고 싶었당. 찾아도 안나오고 아효 ㅡㅡ Nextjs AppRouter경우는 layout.tsx 일반은 page.tsx에 전역으로 설정하는 친구들을 Storybook에선 요렇게 한다. .storybook 전역설정(테마, 주입 기타등등)하고 싶은 친구들 만든다. 전역설정.tsx const 개인테마 = 테마 (); export const 이걸쓰세여 = (Story) => ( ); preview.tsx import { 이걸쓰세여 } from './전역설정'..
[NodeJs, Express, Typescript] 전역 에러 핸들링 (express global error handle)
Nest는 @Catch(HttpException) 이런식으로 공식문서에서 쉽게 되어 있던데, Express는 뭔가 불편하다. 내가 여태껏 했던 것들은 API단위에서의 에러를 처리하고, 다음 공통된 에러 미들웨어에서 에러 레벨에 맞게 객체만들고, 클라쪽으로 넘겨서 처리하는 방식이 많았는데, 그렇게 했던 이유는 실력 부족도 있고, 결국은 이게 모든 에러를 다 컨트롤 한다고 잘못된 생각을 했다. 전역에서 에러를 관리하면 더 좋다는 피드백을 들었다. 그전에는 morgan, winston, slack으로 로깅을 할 때도 api단위에서의 에러를 로깅했었다. error.filter.ts import { Request, Response, NextFunction } from 'express'; class AppError..
[Nodejs, TypeScript] 도메인 로직 리팩토링
운영하고 있는 배틀 서버의 구조를 바꾸고 싶었다. 일을 해보면서 느끼는건, 기획자나 QA를 하시는 분들과 노션이나 슬렉, 구두로 소통할 때, 'A라는 기능에 ~~을 했을 때 ~~한 문제가 생겼다' 이런 느낌으로 주고 받는게 많은데, 저런 워딩을 나나 혹은 다른 개발자들이 일할 때 '아아~ 특정 API에 문제가 있겠구나', 판단하고 작업을 들어가는 경우가 많았다. 여기서 기획자나 개발자나 모두 똑같은 용어로 소통하면 좋다는 다른 회사 개발팀의 이야기를 듣고, 나름 개선해보기로 했다.. 개선을 결정한 이유는 크게 2가지다. 1. 일단 나는 1인 개발을 쭉 해왔기에, 내가 다 만들어서 어디가 문제인지 찾아갈 수 있지만, 다른 개발자들과 협업하거나, 새로 들어올 내 후임자들이 이해하기 쉬운 구조가 좋을 것 같다..
[Nodejs] Express Typescript SocketIo
여러 챗봇과 실시간 채팅을 만들어야 했다. 기획이 굉장히 납득가지 않았지만, 기획자는 기획자의 일이 있는거니까 일단 이해하고 만들었다.. socket.model.ts const socketConnect = (httpServer: any) => { const ioConnect = new socketIo.Server(httpServer, { cors: { origin: '*', methods: ['GET', 'POST'], credentials: true, }, }); const io = ioConnect.of('/socket/chat'); return io; }; export = socketConnect; 소켓을 여는 함수를 만든다. app.ts import express from 'express'; im..
[Node.js] Express-typescript 전환
8개 서버에서 2개는 js, 6개는 ts를 사용했는데, 유지보수가 하기가 굉장히 불편하다. 그래서 시간이 좀 남을 떄 조금씩 바꾸기 시작했다. 천천히.. 다치지않게 소중히.. 구조도 바꿨는데, 바꾸면서 느끼는게 굉장히 많았다. 간단하게나마 기록을 해보려한다. battle라우터를 예로 들면 현재 구조는 이렇다. router.ts const router: Router = Router(); router.post( '/', memberAuthMiddleWare, createBattleContractInterceptor, createBattleContractController, responseSuccessInterceptor, ); 일반적인 라우터. 들어오면, 멤버검증하는 미들웨어 -> 타입 및 예외처리만 하는 ..