BuyBus에 들어간 기술 스택을 물어보는 이들이 종종 있어서 한번 정리해봤다. 어느 정도 경험이 있는 개발자에게는 당연한 내용이겠지만! 모든 항목을 포함하려고 최대한 노력해봤으니 이런 비슷한 걸 만들고 싶다는 막연한 상상만 해왔던 사람들에게는 꽤 유용하지 않을까 기대한다.

다이어그램이 총 세 개인데, 맨 위가 내 개발 환경과 서버, 유저 기기, AWS / Google / PayPal 등 써드파티까지 포함한 overview이고 그 아래 두 개는 overview의 server와 client 부분을 각각 확대한 것이라고 보면 된다.

세 개 모두 무려 벡터 그래픽이다! server, client 세부 아키텍쳐는 dependency-cruise라는 npm 패키지로 자동 생성했고, overview는 Figma로 직접 만들었다. Figma auto layout으로 포함 관계까지는 깔꼼하게 그려냈지만 화살표들은 어떻게 해야 하나 고민했는데, 요소 위치가 바뀌면 그를 잇는 화살표의 시종점을 자동으로 업데이트해주는 기능이 vanilla Figma에는 없었기 때문이다. 그런데 Arrow Auto라는 플러그인 깔아서 쓰니까 찰떡같이 되더라. Figma 짱짱맨

자동 생성된 server / client 아키텍쳐가 좀 무시무시하게 생겼는데,, 보기만큼 못할 짓은 아니다. 그냥 필요한 기능에 따라 서버 요청 / 클라이언트 페이지를 만들고, 재사용이 필요하겠다 싶으면 별도의 component로 분리하고, 구현할 기능이 이미 라이브러리로 존재하겠다 싶으면 구글에서 찾아서 끌어와서 쓰고, ⋯ 하다보면 이렇게 된다. 화살표가 지네끼리 너무 겹쳐있어서 하나를 똑바로 따라가기가 어려운데, 그냥 어떤 구성 요소가 있고 무슨 외부 라이브러리(빨간색 박스들)를 가져다 썼는지 정도만 봐주면 좋을 것 같다.

overall

server details

client details