hclee.log

Node.js + GraphQL 성능

Mon, 11 Jan 2021 13:56:12 GMT

express + type-graphql로 GraphQL API를 구현하는 중에 문뜩 처리 성능이 어떤지 궁금해서 찾아보게 되었다.

성능 측정 출처 : https://github.com/benawad/node-graphql-benchmarks

요약

graphql-jit을 활용해라

모니터링을 위한 tracing은 꺼라

apollo-server, type-graphql 사용은 지양해라
측정 방법
5개의 클라이언트가 동일한 쿼리문으로 5초간 반복 요청하여 성능을 측정함

query {
    authors {
        id
            name
            md5
            books {
                id
                    name
            }
        }
}

성능 결과를 보면 GraphQL의 초당 처리량은 좋아봐야 REST의 70% 밖에 안되며 응답 지연 시간은 대략 5배 이상 더 걸리는 것으로 보인다.

결과로는 무작정 GraphQL이 REST보다 나쁜 것으로 보이는데 이 테스트는 Overfetching, Underfetching을 고려하지 않은 테스트이고 실제 서비스에 GraphQL을 적용하니 전반적으로 빨라졌다 라는 글이 있는걸 보면 REST vs GraphQL보다 Node.js에서 GraphQL 요청 처리가 왜 느려지나?, 어떤 Graphql 구현체, 라이브러리를 써야 하나? 의 관점으로 테스트 결과를 봐야 할 것 같다.

성능, 개발/학습 비용을 보고 어느 선에서 타협할지를 선택해야 하는데 mercurius가 준수한 성능에 graphql-jit 캐싱 기능 등 지원해주는게 많아서 적절해 보이긴 한데 그냥 Golang으로 짜기로 했다.

[당근 마켓 클론] 지역 정보와 DB 선택

Wed, 06 Jan 2021 11:56:26 GMT

ERD 링크

https://www.erdcloud.com/d/2mDmcrHWY3CqW4Rrp

지난 글에서 작성된 구현 기능 목록을 바탕으로 데이터 모델링을 수행했다.

데이터 모델링에 대한 이야기는 특별히 할게 없지만 이런 저런 삽질하면서 발견한 정보들을 공유한다.

행정동 지역 경계, 중심 좌표 정보

유저들과 중고 물품들을 구분하기 위한 지역 정보가 필요하다. 통계청 데이터 대신 미리 변환해 놓은 것이 있어서 사용했다.

행정동 정보 출처 : https://github.com/vuski/admdongkor

통계청 통계지리정보서비스에서 제공하는 행정동 경계 파일을 바탕으로 작성

좌표계 EPSG:4326 기준으로 작성된 지역 경계 정보를 geojson로 제공

좌표계 EPSG:4326 기준으로 작성된 지역 중심 좌표를 csv로 제공

공간 데이터를 관리하기 위한 RDBMS 선택

결론만 먼저 말하면 Postgresql + PostGIS 플러그인을 사용한다.

특정 지역 범위를 계산하는 ST_Buffer와 교차 지역들을 계산하는 ST_Intersects를 MySQL8에서 사용하기가 영 불편하기 때문이다.

그 이유는 다음과 같다.

ST_Buffer가 4326 좌표계를 지원하지 않음
ST_Buffer 호출 결과를 ST_Intersects가 사용하기 위해서 변환 함수를 여러번 호출해야 됨
ST_Buffer 전달 인자의 범위 값에 대한 단위를 알 수 없음

특정 범위와 교차되는 지역들을 구하는 쿼리를 비교해보면 Postgresql의 쿼리가 더 짧고 범위에 대한 설정 값(미터 단위)이 직관적이다.

// In MySQL8 
SELECT
    *
FROM
    "행정동 테이블"
WHERE
    ST_Intersects("행정동 지역 경계값", ST_GeomFromText(ST_AsText(ST_Buffer(ST_GeomFromText(ST_AsText(ST_GeomFromText('POINT(129.075041 35.179768)', 4326))), 0.005)), 4326)); // 0.005 ??

// In Postgresql
SELECT
    *
FROM
    "행정동 테이블" 
WHERE
    ST_Intersects("행정동 지역 경계값", ST_Buffer(ST_GeomFromText('POINT(129.075041 35.179768)', 4326)::geography, 500)::geometry); // 500 미터

Mikro-ORM

그동안 typeorm을 써왔는데 mikro-orm이라는 것을 발견했다.

knex.js 쿼리 빌더를 기반으로 작성된 ORM 패키지인데

typeorm보다 인기가 적지만 성능이 좋은것 같아서 써보기로 한다.

[당근 마켓 클론] 기능 분석

Thu, 17 Dec 2020 09:42:59 GMT

당근마켓 클론 구현에 필요한 요구사항들을 나열해본다. 동네 생활, 지역 광고등 여러 기능이 있지만 중고 거래 시스템만 구현하는 것을 목표로 한다.

회원 가입

회원 가입 시 본인, 지역 인증이 필요하다.
회원 가입 시 현재 위도, 경도 기반의 기본 지역이 지정된다.
회원 가입 후 활동 지역 범위 설정을 수행해야 한다.

회원 탈퇴

가입된 회원은 탈퇴할 수 있다.
회원 탈퇴 시 모든 중고 물품, 후기, 채팅 내역은 삭제된다.

프로필 설정

회원은 자신의 프로필 명과 사진을 변경할 수 있다.

활동 범위 설정

회원은 자신이 활동할 지역과 범위를 설정할 수 있다.

중고 물품 등록

중고 거래를 위해 중고 물품에 대한 글을 작성한다.
제목을 작성해야 한다.
최소 1개, 최대 10개의 사진을 포함할 수 있다.
중고 물품이 속하는 카테고리를 선택해야 한다.
가격을 설정해야 하며 가격 협의 가능 여부를 지정할 수 있다.
물품에 대한 설명을 작성할 수 있다.
중고 물품이 노출될 지역 범위를 설정할 수 있다.

중고 거래 검색

키워드 기반 중고 물품 검색을 제공한다.
카테고리 기반 중고 물품 검색을 제공한다.
인기 검색어 목록이 출력된다.
지역 내 인기 중고 물품 목록이 출력된다.
개인화 추천 중고 물품 물품이 출력된다.

가격 제안하기

가격 제안 가능 중고 물품인 경우 가격을 선 제안해야 한다. (구매자 별 최대 1회 가능)
판매자에게 가격 제안 알림이 발생되고 판매자가 수락하는 경우 거래를 위한 1:1 채팅이 생성된다.
판매자가 수락하는 경우 구매자의 구매 내역에 중고 물품이 [예약 중] 상태로 등록된다.
판매자가 거절하는 경우 구매자의 구매 내역의 중고 물품은 [가격 제안 거절] 상태로 변경된다.
판매자가 수락하는 경우 중고 물품의 정보의 상태에 [예약 중] 뱃지가 등록된다.

채팅으로 거래하기

가격 제안이 불가능한 제품은 구매자가 1:1채팅으로 거래를 요청한다.
구매자의 가격 제안을 판매자가 수락한 경우 1:1 채팅으로 거래가 진행된다.

구매/판매 후기

중고 거래후 구매자와 판매자는 서로에게 후기를 남길 수 있다.
후기는 긍정 평가, 부정 평가가 있으며 평가는 회원의 매너 온도 점수에 반영된다.
판매 후기 작성 시 중고 물품의 상태는 거래 완료로 표기된다.

구매/판매 내역 보기

자신이 구매/판매한 중고 물품들의 목록을 조회할 수 있다.
채팅을 했거나 가격 제안을 한 중고 물품은 구매 내역에 추가된다.
새로운 중고 물품을 등록한 경우 판매 내역에 추가된다.

관심 목록 보기

중고 물품의 정보를 조회하여 관심 대상 설정을 하거나 해제할 수 있다.
관심 대상들은 관심 목록 보기에서 조회할 수 있다.

키워드 알림 등록

지정된 키워드를 포함하는 중고 물품이 등록된 경우 알림을 받기 위한 키워드들을 등록한다.
최대 30개 키워드 알림을 등록할 수 있다

채팅 목록 조회

거래 종료/진행 중인 중고 거래 채팅 목록을 조회할 수 있다.
채팅 목록을 클릭할 경우 해당 채팅 창으로 이동한다.

모아보기

사용자는 다른 사용자를 팔로잉하거나 해제할 수 있다.
자신의 팔로잉 내역은 다른 사용자들은 알 수 없다.
팔로잉한 사용자들의 게시글 목록을 한곳에서 조회할 수 있다.

사용자 차단

차단된 사용자의 모든 게시글과 답글, 채팅은 보이지 않는다.
차단된 사용자는 차단 사용자 보기에서 목록으로 조회할 수 있다.

기능 목록

👍 구현할 기능 (우선순위 순)

회원 가입, 정보 수정, 탈퇴

중고 거래 지역 등록, 수정

중고 물품 조회, 등록, 수정

이미지 업로딩

중고 거래용 채팅

구매/판매자 리뷰 및 중고 거래 점수 레이팅

차단 유저 등록, 삭제

관심 유저 등록, 삭제 및 알림

관심 상품 등록, 삭제 및 알림

가격 제시 (구매자 -> 판매자) 및 알림

키워드 등록, 삭제 및 알림

👎 누락된 기능

동네 생활

동네 광고
중고 물품 신고
중고 물품 추천
검색 키워드 추천
이외에 딥러닝 관련된 기능들

[react-native-web 모노레포] - 웹 빌드 환경 구성

Sat, 05 Dec 2020 09:20:25 GMT

웹과 모바일에서 동일한 사용자 경험을 제공하기 위해 단일 React-Native 앱을 작성하고 모바일과 웹 모두 빌드할 수 있는 모노 레포지토리를 구성해보자.

github 레포지토리

주요 패키지 버전

react : 16.13.1
react-native : 0.63.3
react-native-web : 0.14.8
styled-components : 5.2.1
nextjs : 10.0.3
typescript : 4.1.2
@babel/core : 7.12.1
yarn : 1.22.10

이전 포스트에서 공통 앱과 mobile 빌드 환경 구성하였다. 남은 web(nextjs) 빌드 환경을 구성해보자.

@nextjs-rn-monrepo/web 패키지 생성

cd ~/nextjs-rn-monorepo/packages
npx create-next-app web --example with-typescript

cd web
rm -rf components interfaces pages utils
mkdir pages

의존성 패키지 설치

cd ~/nextjs-rn-monorepo/packages/web

yarn add
    react-dom \
    react-is \
    react-native \
    react-native-web \
    styled-components

yarn add --dev \
    @babel/core \
    @babel/plugin-transform-runtime \
    @babel/preset-env \
    @babel/runtime-corejs3 \
    babel-plugin-react-native-web \
    next-compose-plugins \
    next-transpile-modules

yarn workspace @nextjs-rn-monorepo/web add @nextjs-rn-monorepo/app@0.0.1

babel 설정

// ~/nextjs-rn-monorepo/packages/web/babel.config.js

module.exports = api => {
  api.cache(true);

  return {
    presets: [
      "next/babel",
      [
        "@babel/preset-env",
        {
          targets: {
            browsers: ["> 1%", "last 2 versions", "not ie <= 10"]
          },
        }
      ]
    ],
    plugins: [
      [
        "@babel/plugin-transform-runtime", 
        { corejs: 3 } 
      ],
      [
        "styled-components",
        {
          ssr: true,
          displayName: true,
          preprocess: false
        }
      ],
    ],
  }
};

Next.js 설정

// ~/nextjs-rn-monorepo/packages/web/next.config.js

const withPlugins = require('next-compose-plugins');
const withTM = require('next-transpile-modules')(
  [
    // 참조할 다른 로컬 패키지와 해당 패키지가 사용하는 의존성 패키지들을 명시
    '@nextjs-rn-monorepo/app',
    'react-native',
    'styled-components',
  ],
);

module.exports = withPlugins([withTM], {
  webpack(config) {
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      'react-native$': 'react-native-web', 
    }
    config.resolve.extensions = [
      '.web.ts',
      '.web.tsx',
      '.ts',
      '.tsx',
      '.web.js',
      '.web.jsx',
      '.js',
      '.jsx',
      ...config.resolve.extensions,
    ]
    return config;
  }
});

인덱스 웹 페이지 작성

react-native 앱을 서버 사이드 렌더링 할 수 있게 커스텀 도큐먼트 파일을 작성한다.

// ~/nextjs-rn-monorepo/packages/web/pages/_document.tsx

import React, { Children } from 'react'
import Document, {
  Html,
  Head,
  Main,
  NextScript,
  DocumentContext,
} from 'next/document'
import { AppRegistry } from 'react-native'

import { name as appName } from '../package.json'

// Force Next-generated DOM elements to fill their parent's height
const normalizeNextElements = `
  #__next {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  html {
    height: 100%;
  }

  body {
    height: 100%;
    overflow: hidden;
  }
`

export default class MyDocument extends Document {
  static async getInitialProps({ renderPage }: DocumentContext) {
    AppRegistry.registerComponent(appName, () => Main)
    const { getStyleElement } = AppRegistry.getApplication(appName)
    const page = await renderPage()
    const styles = [
      // eslint-disable-next-line react/no-danger