선택의 이유 같은 소리

profile
FE Developer - 죠지
April 07, 2024
GPT 요약
Thumbnail

갈라파고스의 핀치새들

갈라파고스 제도에는 원래 한 종류의 핀치새만이 살고 있었습니다. 그러나 시간이 지나면서, 이 핀치새들은 제도의 다양한 섬으로 퍼져 나갔고, 각 섬에는 다른 환경 조건과 사용할 수 있는 자원이 있었습니다. 어떤 섬에는 딱딱한 씨앗이 많았고, 다른 섬에는 부드러운 곤충이나 과일이 많았습니다.

세월이 흘러 찾아 갔을 때, 핀치새들은 각자의 섬에서 다른 부리 모양과 크기를 가지고 있었습니다. 원래 같은 조상을 가진 핀치새들은 다른 환경에 따라 여러 종으로 진화한 것입니다.

Thumbnail

프로젝트와 자연 선택

"갈라파고스의 핀치새들"은 다윈의 '종의 기원'에서 설명하는 진화론의 대표적인 예시입니다. 핀치새들은 환경에 적응하기 위해 부리의 모양이 변화했고, 이는 생존과 번식에 유리한 변화이자 자연 선택의 원리입니다.

우리의 프로젝트도 마찬가지입니다. 프로젝트의 환경에 따라 기술과 라이브러리를 선택하고 사용하는 것은 핀치새들이 환경에 따라 부리 모양이 변화하는 것과 같습니다.

More

프로젝트의 환경을 구성하는 요소는 개발자의 기술 스택, 프로젝트의 목적, 팀의 구성원, 기술적인 요구사항 등이 될 수 있습니다.

그래서 선택의 이유는?

프로젝트 환경을 고려해서 기술 혹은 라이브러리를 선택하고자 할 때, 한 번쯤 듣게 되는 질문이 있습니다.

"왜 이 기술 or 라이브러리를 선택했어요?"입니다.

물론 익숙하고 좋아하는 것이기 때문에 선택하는 경우도 있겠지만, 프로젝트의 환경을 고려해서 선택한 이유를 설명할 수 있다면, 프로젝트의 성공에 더 가까워질 것입니다.

덴티움의 선택

제가 이 글을 쓰는 이유도 마찬가지입니다. 덴티움에서는 프로젝트의 환경을 고려해서 기술과 라이브러리를 선택하고 있습니다. 그리고 그 선택의 이유를 공유하고자 합니다.

덴티움의 선택의 이유를 공유하는 글을 통해, 덴티움의 기술 스택과 프로젝트 환경에 대해 이해하고, 더 나은 프로젝트를 위해 함께 고민하고 싶습니다.

시동

이제 프로젝트의 대략적인 기술과 라이브러리를 리스트업해보고, 몇몇의 선택의 이유를 설명하는 글을 작성해보겠습니다.

리스트업

분류포지션기술 or 라이브러리
프레임워크FrontendNext.js ✔️
프레임워크BackendNest.js ✔️
언어FrontendTypeScript ✔️
상태 관리FrontendMobX ✔️
스타일링FrontendEmotion ✔️
APIBackendGraphQL ✔️
API ClientFrontendApollo Client ✔️
라이브러리FrontendXState ✔️
데이터베이스BackendPosgresQL ✔️
ORMBackendTypeORM ✔️
인증BackendJWT ✔️
배포DevOpsNCP ✔️
컴포넌트FrontendStorybook ✔️

선택의 이유

죠지
죠지
안녕하세요.
오늘의 포스팅은 저희 구성원들과 함께 진행 해보려고 합니다!
가장 먼저 라이언!
PosgreSQL과 TypeORM을 선택한 이유에 대해 설명해주시겠어요?
라이언

안녕하세요.
라이언입니다~
오랜만에 여러분들과 만나게 되어 반가워요!
먼저 PostgreSQL을 선택한 이유에 대해 설명해드리겠습니다.

첫 번째 이유는 엔터프라이즈급 DBMS 중 무료 라이센스라는
측면에서 비용을 절감을 할 수 있다는 점이에요.
프로젝트 운영의 비용을 줄이는 것은 중요하죠?
추후 사용자의 증가로 인한 서버 증설, 그리고 클라우드 비용 등
여러가지 고려할 부분이 많아 보수적인 스탠스를 유지하기로 했어요.

두 번째 이유는 풍부한 커뮤니티로 인해 트러블 슈팅 차원에서 강력하다는 점이에요.
실제 개발에서도 이런 커뮤니티의 도움을 많이 받았어요.
스택오버플로우 뿐만 아니라 다른 커뮤니티에서도 활발히
언급되고 공유되고 있기 때문에 검색도 쉬웠습니다.

세 번째 이유는 프로젝트 특성상 백업 및 복구가 자주 사용되는데
해당 속도가 타 DBMS에 비해 우수하다는 점이에요.
가장 오래된 DBMS 중 하나로 안정성이 검증되어 있어서
안심하고 사용할 수 있었어요.
라이언
라이언

이어서 TypeORM을 선택한 이유에 대해서도 설명해드릴게요.

첫 번째 이유는 TypeScript를 지원하는 ORM 중에서
가장 많은 기능을 제공하고 있어서 선택했어요.
TypeScript를 사용하다 보면 타입을 지정해야 하는데,
TypeORM은 이 부분을 편하게 해줘서 마음에 들었어요.

두 번째 이유는 NestJS에서 공식적으로 지원하는 ORM이라
안정적으로 사용할 수 있다는 점이에요.
NestJS와 TypeORM을 함께 사용하면 더욱 효율적으로 개발할 수 있답니다.

세 번째 이유는 풍부한 커뮤니티로 인해
트러블 슈팅 차원에서 강력하다는 점이에요.
이 부분은 개발 중에 문제가 생겼을 때
도움을 받을 수 있는 점이라 선택했어요.
라이언
라이언

총정리하자면, PostgreSQL과 TypeORM을 선택한 이유는 다음과 같아요,

1. PostgreSQL

- 엔터프라이즈급 DBMS 중 무료 라이센스라는 측면에서 비용 절감 가능.
- 풍부한 커뮤니티를 통한 강력한 트러블 슈팅 경험.
- 프로젝트 특성상 백업 및 복구가 자주 사용되는데, 해당 속도가 타 DBMS에 비해 우수.

2. TypeORM

- TypeScript를 지원하는 ORM 중에서 가장 많은 기능을 제공.
- NestJS에서 공식적으로 지원하는 ORM이라 안정적으로 사용.
- 풍부한 커뮤니티를 통한 강력한 트러블 슈팅 경험.
라이언
죠지
죠지
고마워요 라이언!
그럼 이어서 루카스가 GraphQL과 Apollo Client를
선택한 이유에 대해 설명해주시겠어요?
루카스

안녕하세요.
루카스입니다!
먼저 GraphQL에 대해서 말씀드릴게요.
저는 이전에 GraphQL에 대한 포스팅을 작성한 적이 있었는데요.
참고해주시면 좀 더 자세한 내용을 확인 할 수 있습니다.

이제 시작해볼게요.

첫 번째 이유는 단일 엔드포인트 사용입니다.
GraphQL은 모든 데이터 쿼리에 대해 단일 엔드포인트를 사용하여
여러 리소스에 대한 요청을 단일화함으로써 네트워크 응답시간을 줄일 수 있어요.
도메인 특성상 복잡하고 다양한 카테고리가 존재하기 때문에,
REST를 활용하면 그만큼 엔드포인트의 수도 기하급수적으로
증가할 우려가 있고 복잡성의 증가, API의 일반화의 어려움이
동반 될 것 같았거든요.

두 번째 이유는 유연한 데이터 요청이에요.
클라이언트가 필요로 하는 데이터 구조와 필드를 명시적으로 요청할 수 있어,
오버페칭(필요 이상의 데이터 요청)이나 언더페칭(필요한 데이터의 불충분한 요청)
문제를 방지할 수 있어요!
아마도 이 부분이 가장 크지 않을까 싶어요.
저희 도메인은 백엔드 볼륨도 크고 릴레이션도 굉장히 많아서
API의 일반화로 최대한 통신에서 발생하는 비용을 줄여야했어요.

세 번째 이유는 커뮤니케이션 비용 감소에요.
GraphQL을 사용하면 스키마를 통한 논의가 가능하고,
쿼리, 스키마, 코드 생성에 대한 도구 지원이 풍부하여
백엔드와 프론트엔드 간의 커뮤니케이션 비용을 낮출 수 있어요.
플레이그라운드보다 더 풍부한 기능을 제공하는 Apollo 샌드박스를
활용하면 강력함이 배가 되는 것 을 체감할 수 있었어요.

루카스
루카스

이어서 Apollo Client에 대해서도 말씀드릴게요.
Apollo Client에 대해서 언급하는 것은 처음인 것 같은데요.
이 부분에 대해서는 선택의 여지가 조금 부족했던게 맞는 것 같아요.
그래서 이번을 계기로 다시 한 번 이유에 대해서 생각하는
좋은 계기가 되었습니다.

첫 번째 이유는 Relay와 비교해서 'fragment' 기반 보다는
좀 더 유연한 쿼리 방식을 사용해 런타임에 데이터 요청을
쉽게 조정할 수 있게 하는 것이 좋았어요.
복잡한 도메인에서 fragment 기반 활용 방식은
재사용을 위한 분리 과정 등 복잡성을 최대한 덜어야하는
환경에 적합하지 않다고 생각했어요.

두 번째 이유는 Apollo Client는 매우 직관적인
캐싱 메커니즘을 제공하여 데이터를 효과적으로 관리하고
업데이트해준다는 점이에요.
서버에 의존하는 방식이지만, 매번 서버와의 통신이
필요하지 않는 데이터도 많기 때문에 캐싱 기능은
선택이 아니라 필수였어요.

세 번째는 Apollo Client는 설치 및 설정이
상대적으로 간단하고, 커뮤니티와 문서가 잘 구성되어 있어
새로운 사용자가 접근하기 쉬운 점이에요.
또한 Apollo Client는 GraphQL 쿼리를 위한
통합 개발 환경을 제공해서 이 부분에 정말 큰
매력을 느꼈답니다.
루카스
죠지
죠지
루카스~ 자세한 설명 감사해요 ㅎㅎ
저도 루카스의 설명을 계기로 확실하게 짚고
넘어가는 시간이 된 것 같아요.
자 그럼 이제 마지막으로 기원이 스토리북을 선택한
이유에 대해서 설명해주시겠어요?
기원

안녕하세요 👏 기원입니다.
저도 루카스와 마찬가지로 스토리북에 대해서
포스팅을 작성한 경험이 있어요.
그래서 반갑기도 했고, 다시 공부할 수 있는
좋은 기회가 된 것 같아요.
제가 정리한 내용은 다음과 같아요.

- 자동 문서 생성 및 최신화
: 스토리북은 개발 과정에서 컴포넌트의 문서를
자동으로 생성하고 최신 상태로 유지해요.
이는 프로젝트의 유지보수 및 이해를 용이하게 한답니다.

- 컴포넌트 기반의 개발 지원
: 스토리북은 컴포넌트 기반 개발을 강화하며,
각 컴포넌트를 독립적으로 렌더링하고 테스트할 수 있는 환경을 제공해요.
이를 통해 더 견고하고 재사용 가능한 UI 컴포넌트를 구축할 수 있어요.

- UI 테스트 및 분리 가능한 로직 개발
: 간단한 UI 테스트가 가능하고,
데이터 로직과 UI 로직을 분리하여 개발할 수 있어요.
이는 개발 과정을 더욱 명확하고 관리하기 쉽게 만들어줘요.

- 독립적인 환경에서의 UI 개발
: 스토리북은 개발자가 애플리케이션의 나머지 부분과
독립적으로 UI를 개발하고 확인할 수 있는 환경을 제공해요.
이는 초기 설계 단계에서 매우 유용하고,
개발 중이거나 완성된 UI 컴포넌트를 실시간으로 검토하고 수정할 수 있어요.

- 팀과의 효과적인 커뮤니케이션
: 스토리북은 개발된 UI 컴포넌트를 문서화하고 공유함으로써
팀원 간의 커뮤니케이션을 강화해요.
프로젝트에 참여하는 모든 구성원이 컴포넌트의
현재 상태와 기능을 명확하게 이해할 수 있도록 돕는답니다.
기원
죠지
죠지
깔끔한 설명 감사해요. 기원 ㅎㅎ

자 그럼 이제 제가 마지막으로 Next.js와 XState를 선택한
이유에 대해서 자세히 말씀드리도록 할게요.

시작은 NEXT.js를 선택한 이유입니다.

첫 번째 이유는 강력한 SSR 기반 프레임워크라는 점이에요.
저희 프로젝트는 실제 솔루션 영역과
사용자를 관리하는 부분이 통합되어 있는 구조에요.
그렇기 때문에 SEO 측면에서도 고려가 필요했어요.
리액트도 SSR을 제공하지만, 이후 말씀 드릴 강력한
확장 기능 그리고 파일 기반 라우팅도 한 몫했습니다.

두 번째 이유는 파일 기반 라우팅과 커스텀 서버 설정,
동적 라우팅, 환경 변수 관리 등의 개발자가 필요로 하는
다양한 확장 기능을 지원한다는 점이에요.
이러한 확장 기능이 실제 개발에서도 많은 덕을 보고있답니다.

죠지
죠지
다음은 XState를 선택한 이유에요.

- 유한 상태 머신(FSM)
: 환자의 접수부터 진료 대기 등의 복잡한 상태 관리 요구사항을
효과적으로 해결할 수 있기 때문이에요.
동적이고 복잡한 상호작용을 가진 어플리케이션이기 때문에
적합하다고 생각했어요.

- 상태 전이의 명확한 정의
: XState를 사용하면 상태와 상태 사이의
전이를 명확하게 정의할 수 있어요.
이는 상태 관리의 가독성과 유지보수성을 향상시키고,
가시적인 코드를 구축할 수 있다는 점이 마음에 들었어요.

- 효율적인 코드 조직과 유지보수
: 상태 관리 로직을 중앙집중화하여 관리함으로써,
복잡성을 낮추고, 문서화가 가능하게 했어요.
도한 타입 제너레이터를 기반으로
타입에 대한 예외 상황도 통제할 수 있어 일석이조에요.
죠지
죠지
오늘 저희가 선택한 기술과 라이브러리에 대한
이유를 간략하게 설명해보았습니다.
어떠셨나요? 이렇게 선택한 이유를 공유하면서
프로젝트의 환경을 고려하는 것이 중요하다는 점이
충분히 전달되었길 바랍니다.

키워드로 정리해 본 사용 이유

Next.js:
SSR
SEO
확장기능
XState:
유한상태머신
상태전이
효율적인코드
GraphQL:
단일엔드포인트
유연한데이터요청
커뮤니케이션비용감소
Apollo Client:
캐싱메커니즘
직관적인쿼리
설치및설정간단
Storybook:
자동문서생성
컴포넌트기반개발
UI테스트
PostgreSQL:
무료라이센스
풍부한커뮤니티
백업및복구속도
TypeORM:
TypeScript지원
NestJS공식지원
풍부한커뮤니티
profile
안녕하세요 👏
FE Developer 죠지입니다.
githubgithubgithub