<div id="readability-page-1" class="page"><div><figure></figure><h2 id="29ca">호갱노노 빠른 배송 생활권 속도 개선</h2>작년 하반기에 호갱노노에서는 빠른 배송 생활권 서비스를 시작했습니다. 호갱노노팀 내에서 제안한 의견이 서비스로 나온 경우인데요, 이 서비스가 나오기까지 많은 분이 참여해주시고 작업해 주셨습니다. 그 과정 중에 백엔드 팀에서 만났던 속도 문제와 해결 방안을 소개하려고 합니다.참! 아직도 빠른 배송 생활권 서비스를 모르신다면 아래 그림을 참고해 사용해보세요.<figure><figcaption>빠른 배송 생활권 (PC버전)</figcaption></figure><figure><figcaption>빠른 배송 생활권 (Mobile 버전)</figcaption></figure></div><div>빠른 배송 생활권은 간단하게 데이터 수집 -&gt; 수집된 데이터를 client로 보내주기 -&gt; client에서 받은 데이터를 화면에 보여주기로 나눌 수 있습니다.제가 맡은 부분은 수집된 지역별 빠른 배송 서비스 데이터를 내려주는 API 개발이었습니다. 처음에는 빠른 배송 생활권 데이터가 워낙 많다 보니 느렸습니다. 그래서 지속적인 개선작업이 있었고 나중에는 서비스가 가능할 정도로 속도가 많이 빨라졌지만 API 속도는 만족스럽지 못했습니다.해당 API는 DB에 있는 데이터 전체를 내려주는 단순한 작업을 하고 있었습니다. 이 상태로 만족하고 서비스 오픈을 해야 하는지 고민이 될 때 저희 팀에서 좋은 해결방안이 나왔습니다.시간이 오래 걸리는 부분이 확인하니 DB에서 데이터를 Entity로 변환할 때였습니다. 호갱노노에서는 TypeORM을 사용하고 있습니다. TypeORM덕분에 DB에서 가져온 데이터를 Entity로 만들어주기 때문에 편하게 잘 사용하고 있습니다. 하지만 빠른 배송 생활권의 경우에는 변환작업 때문에 속도가 느렸습니다. 큰 단위의 지리정보를 다루다 보니 그 안에는 포인트(점)들의 양이 너무 많아 변환할 때 속도가 느렸습니다. 그래서 이 부분을 Raw 데이터로 가지고 와서 타입을 맞춰주기로 했습니다.<pre>// 기존 방식 const shapes = await repo.createQueryBuilder("shape") .select("geometry") .where("~~~") // where 조건 .getMany()</pre><pre>// 개선 후 const shapes = await repo.createQueryBuilder("shape") .select("geometry") .where("~~~") // where 조건 .getRawMany&lt;{ geometry: RawMultiPolygon }&gt;() // 데이터가 약 수만건 이상이어서 getRawMany로 수정</pre>여기서는 QueryBuilder를 사용하고 있습니다. QueryBuilder를 통해 데이터를 얻을 때 결과값은 entity와 Raw Result 2가지 타입으로 받을 수 있습니다. 대부분의 경우 실제 사용할 entity로 데이터를 가져오게 됩니다. (예를 들면 user와 같이 말이죠.)실제 entity를 가져올 경우에는 getOne 또는 getMany를 사용할 수 있습니다. 그런데 어떤 경우에는 entity가 아닌 특정 데이터를 가져와야하는 경우도 있습니다. 이런 경우 특정 데이터를 Raw data라고 합니다. Raw data를 얻기 위해서는 getRawOne 또는 getRawMany를 사용하면 됩니다. TypeORM 문서에서는 특정 컬럼의 sum을 구하고 싶을 때에도 사용할 수 있다고 나와있습니다.<pre>// 특정 사용자의 사진 수 합계를 구하기 위해 getRawOne을 사용하는 예 const { sum } = await dataSource .getRepository(User) .createQueryBuilder("user") .select("SUM(user.photosCount)", "sum") .where("user.id = :id", { id: 1 }) .getRawOne()</pre><pre>// 사용자들의 각각 사진 수 합계를 구하기 위해 getRawMany을 사용하는 예 const photosSums = await dataSource .getRepository(User) .createQueryBuilder("user") .select("user.id") .addSelect("SUM(user.photosCount)", "sum") .groupBy("user.id") .getRawMany()</pre>여기서는 getRawMany를 사용했습니다. 그리고 해당 RawData에 맞게 타입을 선언 후 해당 타입이 리턴된다는 것을 알려주었습니다. (여기서 geometry는 MultiPolygon 값이 들어가 있습니다. 여기서 받는 데이터 타입을 RawMultiPolygon로 선언했습니다.) RawMultiPolygon은 아래와 같이 정의했습니다.<pre>export interface RawPoint { x: number y: number }export type RawLineString = RawPoint[] export type RawPolygon = RawLineString[] export type RawMultiPolygon = RawPolygon[]</pre>Raw 데이터를 가지고 온 후에 Client에 내려줄 데이터로 변환하는 작업을 진행했습니다. 작업 코드는 대략 아래와 같습니다.<pre>const result = { shape: shapes.map((shape) =&gt; shape.geometry ?.map?.((polygon) =&gt; { return polygon.map((line) =&gt; { return line.map((coord) =&gt; ({ lat: coord.y, lng: coord.x })) }) }).flat() }</pre>TypeORM에서 해당 Entity로 변환하는 대신 Raw 데이터를 가져와서 원하는 데이터 구조로 직접 바꾸니 속도가 많이 향상되었고 무사히 서비스 오픈을 할 수 있었습니다.위와 같이 직접 원하는 데이터 구조로 바꾸기 위해서는 해당 데이터에 대한 이해도가 필요합니다. 이 작업을 하면서 지리 데이터(MultiPolygon, Polygon 등) 분석이 필요했습니다. <a href="https://github.com/cschwarz/wkx" rel="noopener ugc nofollow" target="_blank">https://github.com/cschwarz/wkx</a> 에서 참고를 많이 했습니다.글 읽어주셔서 감사합니다.출처<a href="https://typeorm.io/select-query-builder" rel="noopener ugc nofollow" target="_blank">https://typeorm.io/select-query-builder</a></div></div>

zigbang - Medium

작년 하반기에 호갱노노에서는 빠른 배송 생활권 서비스를 시작했습니다. 호갱노노팀 내에서 제안한 의견이 서비스로 나온 경우인데요, 이 서비스가 나오기까지 많은 분이 참여해주시고 작업해 주셨습니다. 그 과정 중에 백엔드 팀에서 만났던 속도 문제와 해결 방안을 소개하려고 합니다.
참! 아직도 빠른 배송 생활권 서비스를 모르신다면 아래 그림을 참고해 사용해보세요.
빠른 배송 생활권은 간단하게 데이터 수집 -> 수집된 데이터를 client로 보내주기 -> client에서 받은 데이터를 화면에 보여주기로 나눌 수 있습니다.
제가 맡은 부분은 수집된 지역별 빠른 배송 서비스 데이터를 내려주는 API 개발이었습니다. 처음에는 빠른 배송 생활권 데이터가 워낙 많다 보니 느렸습니다. 그래서 지속적인 개선작업이 있었고 나중에는 서비스가 가능할 정도로 속도가 많이 빨라졌지만 API 속도는 만족스럽지 못했습니다.
해당 API는 DB에 있는 데이터 전체를 내려주는 단순한 작업을 하고 있었습니다. 이 상태로 만족하고 서비스 오픈을 해야 하는지 고민이 될 때 저희 팀에서 좋은 해결방안이 나왔습니다.
시간이 오래 걸리는 부분이 확인하니 DB에서 데이터를 Entity로 변환할 때였습니다. 호갱노노에서는 TypeORM을 사용하고 있습니다. TypeORM덕분에 DB에서 가져온 데이터를 Entity로 만들어주기 때문에 편하게 잘 사용하고 있습니다. 하지만 빠른 배송 생활권의 경우에는 변환작업 때문에 속도가 느렸습니다. 큰 단위의 지리정보를 다루다 보니 그 안에는 포인트(점)들의 양이 너무 많아 변환할 때 속도가 느렸습니다. 그래서 이 부분을 Raw 데이터로 가지고 와서 타입을 맞춰주기로 했습니다.
// 기존 방식
const shapes = await repo.createQueryBuilder("shape")
 .select("geometry")
 .where("~~~") // where 조건
 .getMany()
// 개선 후
const shapes = await repo.createQueryBuilder("shape")
 .select("geometry")
 .where("~~~") // where 조건
 .getRawMany<{ geometry: RawMultiPolygon }>() 
// 데이터가 약 수만건 이상이어서 getRawMany로 수정
여기서는 QueryBuilder를 사용하고 있습니다. QueryBuilder를 통해 데이터를 얻을 때 결과값은 entity와 Raw Result 2가지 타입으로 받을 수 있습니다. 대부분의 경우 실제 사용할 entity로 데이터를 가져오게 됩니다. (예를 들면 user와 같이 말이죠.)
실제 entity를 가져올 경우에는 getOne 또는 getMany를 사용할 수 있습니다. 그런데 어떤 경우에는 entity가 아닌 특정 데이터를 가져와야하는 경우도 있습니다. 이런 경우 특정 데이터를 Raw data라고 합니다. Raw data를 얻기 위해서는 getRawOne 또는 getRawMany를 사용하면 됩니다. TypeORM 문서에서는 특정 컬럼의 sum을 구하고 싶을 때에도 사용할 수 있다고 나와있습니다.
// 특정 사용자의 사진 수 합계를 구하기 위해 getRawOne을 사용하는 예
const { sum } = await dataSource
 .getRepository(User)
 .createQueryBuilder("user")
 .select("SUM(user.photosCount)", "sum")
 .where("user.id = :id", { id: 1 })
 .getRawOne()
// 사용자들의 각각 사진 수 합계를 구하기 위해 getRawMany을 사용하는 예
const photosSums = await dataSource
 .getRepository(User)
 .createQueryBuilder("user")
 .select("user.id")
 .addSelect("SUM(user.photosCount)", "sum")
 .groupBy("user.id")
 .getRawMany()
여기서는 getRawMany를 사용했습니다. 그리고 해당 RawData에 맞게 타입을 선언 후 해당 타입이 리턴된다는 것을 알려주었습니다. (여기서 geometry는 MultiPolygon 값이 들어가 있습니다. 여기서 받는 데이터 타입을 RawMultiPolygon로 선언했습니다.) RawMultiPolygon은 아래와 같이 정의했습니다.
export interface RawPoint {
 x: number
 y: number
}
export type RawLineString = RawPoint[]
export type RawPolygon = RawLineString[]
export type RawMultiPolygon = RawPolygon[]
Raw 데이터를 가지고 온 후에 Client에 내려줄 데이터로 변환하는 작업을 진행했습니다. 작업 코드는 대략 아래와 같습니다.
const result = {
 shape: shapes.map((shape) => shape.geometry
 ?.map?.((polygon) => {
 return polygon.map((line) => {
 return line.map((coord) => ({ lat: coord.y, lng: coord.x }))
 })
 }).flat()
}
TypeORM에서 해당 Entity로 변환하는 대신 Raw 데이터를 가져와서 원하는 데이터 구조로 직접 바꾸니 속도가 많이 향상되었고 무사히 서비스 오픈을 할 수 있었습니다.
위와 같이 직접 원하는 데이터 구조로 바꾸기 위해서는 해당 데이터에 대한 이해도가 필요합니다. 이 작업을 하면서 지리 데이터(MultiPolygon, Polygon 등) 분석이 필요했습니다. https://github.com/cschwarz/wkx 에서 참고를 많이 했습니다.
글 읽어주셔서 감사합니다.
출처
https://typeorm.io/select-query-builder
호갱노노 빠른 배송 생활권 속도 개선 was originally published in 직방 기술 블로그 on Medium, where people are continuing the conversation by highlighting and responding to this story.

호갱노노 빠른 배송 생활권 속도 개선

댓글