본문으로 건너뛰기

바이크카고 제작일지 #2 - 초기 기술선택

· 약 7분

이번 편은 철저히 기술 선택과 그 이유에 대해서만 작성되었기 때문에 흥미가 없으신 분들은 다음 편으로 넘어가셔도 좋습니다.

전제조건​

  • (취미활동이기 때문에) 운영에 필요한 리소스는 최소한이어야 한다.

Database​

AWS RDS + Postgres​

가장 중요하게 생각한 건 역시 비용. 최소한에 가까운 지출로만 서비스를 운영하고 싶었다.

그 다음으로는 학습할 여지가 얼마나 있는지. 내가 앞으로 얼마나 현업에서 사용하게 될지 등 학습과 관련된 요소였다.

머리 속에 있었던 선택지들은 다음과 같다.

AWS RDS, AWS DynamoDb, MongoDB Atlas

위 사항들을 고려하면 AWS DynamoDB를 사용하는 게 가장 적합해보였다.

하지만 서비스 특성상, 당시에 다음과 같은 제한들로 인해 고려대상에서 제외했다.

  • 쿼리 패턴이 굉장히 다양할 것 같다는 점.
  • 페이지네이션이 빡세게 처리되어야 할 것 같다는 점.
  • Transaction 처리
  • Update 처리

지금보면 모두 해결 가능한 문제들이라 생각했지만 어쨌든 당시에는 저런 벽들이 있는 것으로 예상되었다.

또한 내가 0부터 프로덕션까지 RDS를 구축해서 사용해 본 적이 없었으므로 이번 기회에 해보는 것도 좋겠다고 생각했다.

(무료 DB를 제공하는 서비스도 있었다. Heroku, Fly.io 등을 사용했어도 되었지만 일단 인프라 관련된 서비스들은 되도록 하나의 벤더 안에서 관리하는 게 더 편할 것 같았기에 그냥 AWS만 사용하려고 했다.)

Web Server​

AWS Lambda + Serverless Framework​

처음에는 이번 기회에 Nest.js 같은 노드용 올인원 프레임워크를 사용해볼까 하는 생각이 있었다.

하지만 EC2 같은 인스턴스를 띄우거나 항시 살아있는 container를 만들고 싶지는 않았는데, 아무래도 인스턴스가 올라가면 운영에 리소스가 들어가기 때문이다.

그렇다고 AWS Lambda에 올리자니 기능을 많이 사용하는 것도 아닌데 너무 덩치만 큰 느낌이라 선택지에서 제외했다.

결국 선택지는 또다시 AWS Lambda.

어쨌든 간에 실행 레이어를 최대한 얇게 설정하고 싶었다.

API Framework​

Apollo Server + Express + Prisma + GraphQL Nexus​

위 취지에 맞게 원래는 아무것도 없는 plain node.js를 사용하려고 했었는데…

GraphQL을 써보고 싶다는 생각에 이런 식으로 구성했다.

GraphQL을 쓰고 싶었던 이유는 아래와 같다.

  1. 데이터부터 클라이언트까지 강타입으로 이어지는 아케틱처를 하고 싶었음.
  2. Client Cache key가 (React-Query 같은) request based로 cache key를 사용하는 게 아닌, 응답 데이터의 타입에 따라 normalized 되어서 관리되는 형식이 더 낫다고 생각했음.
  3. GraphQL을 써본 적이 없었음.

Apollo를 선택한 이유는 다음과 같다.

  1. Relay보다 더 TS 친화적이라고 생각했다.
  2. React의
    나
    는 Relay가 더 좋아보였지만 그렇게까지 빡세게 해당 기능들을 사용할 것 같지 않았다.
  3. 사전 설정, 문서화 등이 Apollo가 훨씬 더 친절했다.

다음으로 정해야 하는 건 DB와 어떻게 통신을 할 것인지었는데, 원래는 쌩쿼리로 해결하려고 했었다. 그런데 잘 찾아보니 Prisma 라는 ORM과 Nexus를 활용하면 GQL을 테이블부터 클라이언트까지 강타입으로 묶을 수 있을 거 같았다.

일단은 되긴 된다. 정말로…되긴 된다.

이에 대해 자세한 설명은 분량상 다른 글에서 하려고 한다.

Frontend​

NextJS + Apollo Client + TailwindCSS​

API 구성 쪽에서 너무 많은 힘을 써서 여기는 익숙한 스텍으로 진행하기로 했다.

더 이상 힘쓰는 것은 불가능.

Design​

Windows 그림판 + 무료 에셋툴 + DALL E 2​

Figma를 사용하려고 하다가 다른 학습할 것들이 너무 많아서 적당히 그림판으로 끄적이고 CSS롤 바로 그려버리는 식으로 작업했다.

이미지, Favicon, Logo 등은 Favicon Generator나 저작권 없는 무료 이미지 사이트들, DALL E를 통해 생성한 이미지들을 주로 사용하였다.

그리고 나서​

#1 첫 서비스 시작 화면
#1 첫 서비스 시작 화면

그런데

문제가 발생했다.

다음 편에서 계속