-
Notifications
You must be signed in to change notification settings - Fork 3
💡 기술
김진성 Kim Jinsung edited this page Dec 15, 2022
·
13 revisions
선정한 기술 스택 : TypeScript
선택의 이유 :
- 팀원들 모두 TypeScript를 사용하는 것에 익숙하다.
- 여러명이 함께 작업하는 과정에서 일관된 인터페이스(타입)를 적용함으로써 얻는 효과와 타입 변환으로 인해 발생 할 수 있는 에러를 미리 확인하고 디버깅 할 수 있다는 점이 자바스크립트를 사용해서 얻는 개발 속도의 향상과 같은 효과보다 훨씬 클 것으로 예상되었다
선정한 기술 스택 : NextJS
를 사용하지 않음
선택의 이유 :
- 서비스의 특성상
SEO
가 중요한 페이지가 존재하지 않았기 때문에,CSR
로 모든 페이지를 커버할 수 있다고 생각했다. - 사용자에 따라 변하는 화면이 많았기 때문에,
SSR
을 적용했을 때, 얻을 수 있는 효과가 크지 않을 것이라고 예상했다.
선정한 기술 스택 : Redux Tool Kit
선택의 이유 :
- 서비스 특성상
클라이언트 상태
와서버 상태
를 모두 관리해야 하는 상황이 많다. - 서버 상태 관리 라이브러리 + 클라이언트 상태 관리 라이브러리를 따로 적용해도 되지만,
Redux Tool Kit
라이브러리 하나만으로도, 클라이언트 상태관리와RTK Query
를 통한 서버 상태관리가 모두 가능하기 때문에, 기술의 통일성을 위하여Redux Tool Kit
을 선택함 - 팀원들이 모두
Redux
사용 경험이 있기 때문에, 개발에 유리함.
선정 라이브러리 : Jest
, React-Testing Library
, Cypress
, msw
선택의 이유 :
- 각 컴포넌트마다 테스트 코드(렌더링 테스트, 이벤트 테스트 [
click
,input
change
, ...])를 작성하고, 테스트 하기 위해 Jest, React-Testing Library를 사용 - 사용자의 입장에서 시나리오를 작성하고, 이를 브라우저 환경에서 테스트해보기 위해 E2E 테스트 툴로
Cypress
를 선택 - 서버의 상태와 상관없이, 일관된
Response
를 이용한 테스트를 진행하기 위해,msw
를 사용. 추가로, 서버의 API가 준비되기 전 상황에서도 Mock 데이터를 이용해 개발을 진행하기 위해msw
를 도입.
선정한 기술 스택 : Nest.js
선택의 이유
- Spring 과의 유사성으로 인하여 러닝 커브가 낮다.
- 기타 환경에 대한 제어권을 Nest.js에게 넘기기 때문에 우리는 코드 구현에만 집중할 수 있다.
- Express의 경우 패키지를 설치할 때,
@types
와 관련된 패키지도 추가적으로 설치해야하는 번거로움이 존재한다. 하지만 nest의 경우, 자체적으로 제공하는 패키지(@nestjs/~
) 설치를 통해 이러한 번거로움을 겪지 않아도 된다. - Express.js에서는 라이프 사이클을 직접 관리하게 된다. 하지만 nest.js에서는 라이프사이클을 관리해주기 때문에 협업 관점에 있어 보다 통일성 있는 코드 작성이 가능하다.
선정한 기술 스택 : Jest
선택의 이유
- nest.js가 기본적으로 지원해주는 테스트 라이브러리가 Jest이기에 추가적인 패키지 설치가 필요없다.
- Jest 와 Nest.js 를 사용한 레퍼런스가 많다.
선정한 기술 스택 : SQL(MySQL)
선택의 이유
- 데이터 정합성 등 관리가 용이하다.
- 티켓 서버 같은 경우 속도가 빠른 것도 중요하지만 동시에 같은 티켓을 여러 명의 유저가 바라보게 되는 문제점을 방지하고자 트랜잭션 격리 수준을 설정하며 보장하는 SQL 을 도입하였다.
선정한 기술 스택 : Prisma
선택의 이유
- 자세한 공식 문서와 함께 다양한 예제를 제공한다.
선정한 기술 스택 : socket.io
선택의 이유
- socket.io 가 websocket 에 비해 주는 기능들이 많이 존재하여 기능 안정성과 생산성이 높아진다.
- 또한, socket.io 는 연결이 끊어졌을 때 다시 연결을 실행시켜주는 기능이 다시 존재한다.
- 브라우저 중 websocket이 안되는 경우가 있는데 socket.io 는 브라우저 스펙을 확인을 해서 그 스펙에 맞게 기능을 제공해준다.
Copyright © 2022 FanUp
- Nest.js에서 소켓 테스트하기
- Image Lazy Loading을 통한 최적화
- Nginx에서 HTTP Cache 설정을 통한 최적화
- 서버 상태 관리 with RTK Query
- MSA 에서 Gateway와 Microservice로 이어지는 파일 통신은 어떻게 할까?
- MSA에서 service 간 통신 방식
- Nest.js 에서 자동으로 팬미팅 방 생성하는 스케줄링은 어떻게 해야할까?
🌕 트러블 슈팅
- MSA 에서 Docker로 배포할 때 겪었던 오류
- Redux useSelector 렌더링 최적화
- Sentry를 이용한 클라이언트 에러 모니터링과 성능 모니터링
- Layout Shift 해결하기
- 무한요청을 막기위한 Debounce와 UX를 위한 Optimistic UI